ymyzk’s blog

Django Compressor + Babel で Django でも簡単に ES6 コードを扱う方法

—

by

Yusuke Miyazaki
in ,

ECMAScript 6 の実装は各処理系で少しずつ進んでいますが, 現実的に Web ブラウザで ECMAScript 6 のコードを実行するには一部の機能のみを用いるか, Babel 等のコンパイラを用いて ECMAScript 5 互換のコードに変換して利用することになります.

この記事では Python の Web アプリケーションフレームワーク Django と Django で静的ファイルの圧縮等を行う Django Compressor と Babel を組み合わせて利用する方法を紹介します.

環境

Python・Django・Django Compressor・Node.js (io.js)・Babel がインストールされた環境があり, 適当な Django のプロジェクトが生成できているものと仮定します.

Django と Django Compressor は pip を用いてインストール, Babel は npm からインストールするのが簡単です.

pip install Django django_compressor
npm install -g babel

基本設定

Django Compressor の設定を Django の設定ファイル (例: settings.py) に ドキュメントに従って記述します.

INSTALLED_APPS = (
    # other apps
    # INSTALLED_APPS に compressor を追加する
    'compressor',
)

STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    # STATICFILES_FINDERS に compressor.finders.CompressorFinder を追加する
    'compressor.finders.CompressorFinder',
)

# STATIC_ROOT が設定されていない場合は COMPRESS_ROOT を設定する必要があります.

Babel を用いる設定

Django Compressor では圧縮処理を行う前に前処理を行うことができます. この設定を使って ES6 のコードを Babel を用いて ES5 のコードに変換します. この設定を活用すれば CoffeeScript を JavaScript に変換したり, Sass を CSS にコンパイルしたりすることもできます.

Django の設定ファイルに以下を追記します. この設定は type が text/es6+javascript のものを babel -o {outfile} {infile} というコマンドを用いて変換するという設定です.

COMPRESS_PRECOMPILERS = (                                                                                                                                     
    ('text/es6+javascript', 'babel -o {outfile} {infile}'),                                                                                                   
)

テンプレート中の compress で囲った範囲に type が text/es6+javascript のものがあれば自動的に変換されます.

{% load compress %}
{% compress js %}

{% endcompress %}

上のコードは変換されて以下のような HTML が出力されます. もちろん src 属性を使ってファイルを指定しても同様に動作します.

Django Compressor はデフォルトでは開発環境 (Debug = True) の場合圧縮処理を行いませんが, COMPRESS_PRECOMPILERS の設定については開発環境でも処理が行われるようになっていますので, その点は安心して開発できます.

関連