GitHubじゃ!Pythonじゃ!

GitHubからPython関係の優良リポジトリを探したかったのじゃー、でも英語は出来ないから日本語で読むのじゃー、英語社会世知辛いのじゃー

owais

django-webpack-loader – djangoでWebpackを透過的に使用する

投稿日:

djangoでWebpackを透過的に使用する

django-webpack-loader

http://owaislone.org/blog/webpack-plus-reactjs-and-django/を読んで、このライブラリを使用してdjangoでWebpackを設定するためのステップガイドをご覧ください。

webpackを使用して、djangoの静的ファイルや不透明なラッパーのない静的バンドルを生成します。

Django webpackローダーはwebpack-bundle-trackerによって生成された出力を消費し、生成されたバンドルをdjangoで使用できるようにします。

変更ログも利用可能です。

互換性

テストケースでは、Python 2.7ではDjango> = 1.6、Pythonでは> 3.4をカバーしています。 100%のコードカバレッジが目標ですので、いつでもすべてが動作することが保証されます。 古いバージョンのdjangoでも動作するはずですが、パッケージにはテストケースは含まれていません。

インストール

npm install --save-dev webpack-bundle-tracker

pip install django-webpack-loader

構成

前提

設定のBASE_DIRがdjangoアプリケーションのルートを参照していると仮定します。

import sys
import os

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

assets/settings.STATICFILES_DIRSれていると仮定しsettings.STATICFILES_DIRSようになりsettings.STATICFILES_DIRS

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'assets'),
)

webpackの設定が./webpack.config.jsあり、次のようになっていると仮定します

var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');

module.exports = {
  context: __dirname,
  entry: './assets/js/index',
  output: {
      path: path.resolve('./assets/webpack_bundles/'),
      filename: "[name]-[hash].js"
  },

  plugins: [
    new BundleTracker({filename: './webpack-stats.json'})
  ]
}

デフォルト構成

WEBPACK_LOADER = {
    'DEFAULT': {
        'CACHE': not DEBUG,
        'BUNDLE_DIR_NAME': 'webpack_bundles/', # must end with slash
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
        'POLL_INTERVAL': 0.1,
        'TIMEOUT': None,
        'IGNORE': ['.+\.hot-update.js', '.+\.map']
    }
}

キャッシュ

WEBPACK_LOADER = {
    'DEFAULT': {
        'CACHE': not DEBUG
    }
}

CACHEがTrueに設定されている場合、webpack-loaderは統計ファイルを1回だけ読み取って結果をキャッシュします。 これは、統計ファイルに加えられた変更を取得するためにWebワーカーを再起動する必要があることを意味します。

BUNDLE_DIR_NAME

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'bundles/' # end with slash
    }
}

BUNDLE_DIR_NAMEは、webpackがバンドルを出力するディレクトリを参照します。 完全なパスであってはなりません。 ./assetsが静的./assets 1つで./assetsが./assets/output/bundles/にバンドルを生成する場合、 ./assetsoutput/bundles/output/bundles/

バンドルがmain-cf4b5fab6e00a404e0c7.jsというファイルを生成し、STATIC_URLが/static/場合、 <script>タグは次のようになります

<script type="text/javascript" src="/static/output/bundles/main-cf4b5fab6e00a404e0c7.js"/>

STATS_FILE

WEBPACK_LOADER = {
    'DEFAULT': {
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json')
    }
}

STATS_FILEは、 webpack-bundle-trackerプラグインによって生成されたファイルへのファイルシステムパスです。 このようにwebpack-bundle-trackerプラグインを初期化すると

new BundleTracker({filename: './webpack-stats.json'})

webpackの設定が/home/src/webpack.config.jsにある場合、 STATS_FILEの値はSTATS_FILEなります/home/src/webpack-stats.json

IGNORE

IGNOREは正規表現のリストです。 webpackによって生成されたファイルが式の1つと一致する場合、そのファイルはテンプレートに含まれません。

POLL_INTERVAL

POLL_INTERVALは、 POLL_INTERVALが統計ファイルのポーリングを待機する秒数です。 statsファイルはデフォルトで100ミリ秒ごとにポーリングされ、webpackがバンドルをコンパイルする間にリクエストがブロックされます。 バンドルのコンパイル時間が短くなる場合は、これを減らすことができます。

注:生産時には統計ファイルはポーリングされません(DEBUG = False)。

タイムアウト

TIMEOUTは、webpack_loaderがwebpackが例外を送出する前にコンパイルを完了するのを待つ秒数です。 0Noneまたは値を設定から外すと、タイムアウトが無効になります。

使用法

Webpackを手動で実行してアセットを構築する。

django-webpack-loaderの基本原則の1つは、webpack自体を管理しないことで、必要な方法でwebpackを実行する柔軟性を提供することです。 もしあなたがwebpackを初めて使ったのであれば、その例題の 1つをチェックし、 私の詳細なブログ記事を読んだり webpack docsをチェックしたりしてください。

設定

INSTALLED_APPSwebpack_loaderを追加する

INSTALLED_APPS = (
    ...
    'webpack_loader',
)

テンプレート

{% load render_bundle from webpack_loader %}

{% render_bundle 'main' %}

render_bundleはテンプレートに必要な<script> <link>タグと<link>タグをレンダリングします。

render_bundleは2番目の引数をとります。これは一致するファイル拡張子になります。 これは、異なるタイプのファイルを別々にレンダリングする場合に便利です。 例えば、CSSを頭に、JSを下に描画するには、このようなことができます。

{% load render_bundle from webpack_loader %}

<html>
  <head>
    {% render_bundle 'main' 'css' %}
  </head>
  <body>
    ....
    {% render_bundle 'main' 'js' %}
  </body>
</head>

複数のwebpackプロジェクト

バージョン2.0以降のWebpackローダーでは、複数のWebpack構成もサポートされています。 次の設定では、2つのwebpack statsファイルを設定で定義し、テンプレートタグのconfig引数を使用して、バンドルをロードする統計ファイルに影響を与えます。

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'bundles/',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
    },
    'DASHBOARD': {
        'BUNDLE_DIR_NAME': 'dashboard_bundles/',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-dashboard.json'),
    }
}
{% load render_bundle from webpack_loader %}

<html>
  <body>
    ....
    {% render_bundle 'main' 'js' 'DEFAULT' %}
    {% render_bundle 'main' 'js' 'DASHBOARD' %}

    <!-- or render all files from a bundle -->
    {% render_bundle 'main' config='DASHBOARD' %}

    <!-- the following tags do the same thing -->
    {% render_bundle 'main' 'css' 'DASHBOARD' %}
    {% render_bundle 'main' extension='css' config='DASHBOARD' %}
    {% render_bundle 'main' config='DASHBOARD' extension='css' %}

    <!-- add some extra attributes to the tag -->
    {% render_bundle 'main' 'js' 'DEFAULT' attrs='async chatset="UTF-8"'%}
  </body>
</head>

HTMLタグではなくファイルURL

HTMLタグなしでアセットへのURLが必要な場合は、 get_filesテンプレートタグを使用できます。 一般的な使用例は、JavascriptプラグインのカスタムCSSファイルのURLを指定することです。

get_filesは、一致するファイルのリストを返すことを除いてrender_bundleまったく同じようにrender_bundleし、カスタムテンプレート変数にリストを割り当てることができます。 例えば、

{% get_files 'editor' 'css' as editor_css_files %}
CKEDITOR.config.contentsCss = '{{ editor_css_files.0.publicPath }}';

<!-- or list down name, path and download url for every file -->
<ul>
{% for css_file in editor_css_files %}
    <li>{{ css_file.name }} : {{ css_file.path }} : {{ css_file.publicPath }}</li>
{% endfor %}
</ul>

他の静的資産の参照

webpack_staticテンプレートタグは、webpackによって管理される静的資産をdjangoテンプレートにロードする機能を提供します。 これは、 staticタグで構築されたdjangoに似ていstaticが、代わりにwebpackアセットのためです。

以下の例では、 logo.png npmまたはbowerパッケージが含まれている静的資産を使用できます。

{% load webpack_static from webpack_loader %}

<!-- render full public path of logo.png -->
<img src="{% webpack_static 'logo.png' %}"/>

パブリックパスはwebpack.config.js output.publicPathに基づいてwebpack.config.js ます

Pythonコードから

アプリケーションコードからwebpackアセットパス情報にアクセスする場合は、 webpack_loader.utilsモジュールの関数を使用できます。

>>> utils.get_files('main')
[{'url': '/static/bundles/main.js', u'path': u'/home/mike/root/projects/django-webpack-loader/tests/assets/bundles/main.js', u'name': u'main.js'},
 {'url': '/static/bundles/styles.css', u'path': u'/home/mike/root/projects/django-webpack-loader/tests/assets/bundles/styles.css', u'name': u'styles.css'}]
>>> utils.get_as_tags('main')
['<script type="text/javascript" src="/static/bundles/main.js" ></script>',
 '<link type="text/css" href="/static/bundles/styles.css" rel="stylesheet" />']

プロダクションでの使用方法

それはあなた次第です これを処理するにはいくつかの方法があります。 私は、プロダクションとローカル用に少しずつ別々の設定をするのが好きです。 私はローカルの統計情報+バンドルファイルを無視するようにgitに指示しますが、プロダクションのためにそれらを追跡します。 新しいバージョンを本番環境にプッシュする前に、プロダクション設定を使用して新しいバンドルを生成し、新しい統計ファイルとバンドルをコミットします。 STATICFILES_DIR追加されたディレクトリに統計ファイルとバンドルを格納します。 これにより、collectstaticとの統合が無料になります。 生成されたバンドルは自動的にターゲットディレクトリに収集され、S3に同期されます。

./webpack_production.config.js

var config = require('./webpack.config.js');
var BundleTracker = require('webpack-bundle-tracker');

config.output.path = require('path').resolve('./assets/dist');

config.plugins = [
    new BundleTracker({filename: './webpack-stats-prod.json'})
]

// override any other settings here like using Uglify or other things that make sense for production environments.

module.exports = config;

settings.py

if not DEBUG:
    WEBPACK_LOADER.update({
        'BUNDLE_DIR_NAME': 'dist/',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-prod.json')
    })

また、collectstaticを実行する前にサーバ上にバンドルを生成して、それがうまくいくかどうかを確認することもできます。

余分な

Jinja2設定

ジンジャーテンプレートにアセットを出力する必要がある場合は、 Django JinjaモジュールとDjango 1.8と互換性のあるJinja2拡張モジュールを提供します。

拡張機能をインストールするには、 ["OPTIONS"]["extension"]リストのdjango_jinja TEMPLATES設定に追加します。

TEMPLATES = [
    {
        "BACKEND": "django_jinja.backend.Jinja2",
        "OPTIONS": {
            "extensions": [
                "django_jinja.builtins.extensions.DjangoFiltersExtension",
                "webpack_loader.contrib.jinja2ext.WebpackExtension",
            ],
        }
    }
]

次に、あなたの基本ジンジャーテンプレートで:

{{ render_bundle('main') }}

あなたのwebpackをdjangoでお楽しみください:)







-owais
-, , , , , ,

執筆者: