読者です 読者をやめる 読者になる 読者になる

気ままなタンス*プログラミングなどのノートブック

プログラミングやRPGツクール、DTM、VOCALOIDについてのんびり書きます。

【JavaScript】webpack + babelの環境メモ

JavaScript webpack

webpackとbabelでES6の自動コンパイル環境を準備したのでメモを残す。

コンパイルに必要なライブラリ

ライブラリ インストールコマンド 備考
babel-cli npm install -g babel-cli グローバルインストール
babel-preset-es2015 npm install --save-dev babel-preset-es2015
babel-polyfill npm install --save-dev babel-polyfill polyfillの意味:古いブラウザであってもモダンブラウザと同様の機能を提供する方法

webpackのライブラリ

ライブラリ インストールコマンド 備考
webpack npm install -g webpack グローバルインストール
style-loader npm install --save-dev style-loader
css-loader npm install --save-dev css-loader
babel-loader npm install --save-dev babel-loader

ついでにjQueryをインストール

ライブラリ インストールコマンド 備考
jquery npm install jquery

webpack.config.jsの作成

  • エントリーは/src/entry.jsとする
  • コンパイル後の出力先ディレクトリは/dist/bundle.jsとする
  • コンパイル前のjsファイルを確認(devtool)
  • babel-loader、style-loader、css-loaderを指定する
module.exports = {
    entry: "/src/entry.js",
    output: {
        path: __dirname + "/dist,
        filename: "bundle.js"
    },
    devtool: "inline-source-map",
    module: {
        loaders: [
            { "test": /\.js$/, exclude: /node_modules/, loader: "babel-loader"},
            { "test": /\.css$/, loader: "style-loader!css-loader"}
        ]
    }
}

style.cssを作成

body {
  background: blue;
}

src/entry.jsを作成

// entry.js
require("./style.css");
let $ = require('jquery');
// import $ from 'jquery' // これは動かなかった。。

let v = [1, 2, 3];
v.forEach(x => console.log(x));

htmlより、dist/bundle.jsを読み込み

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="dist/bundle.js"></script>

</body>
</html>

自動コンパイルをするため、--watchオプションをつける。

$ webpack --watch

通常のビルドはこちら

$ webpack

実行コマンド一覧

$ npm init -y

# ライブラリインストール
$ npm install -g babel-cli
$ npm install --save-dev babel-preset-es2015
$ npm install --save-dev babel-polyfill
$ npm install -g webpack
$ npm install --save-dev style-loader
$ npm install --save-dev css-loader
$ npm install --save-dev babel-loader

# webpack.config.jsを作成(上記、「webpack.config.jsの作成」の内容を記述し保存
$ touch ./webpack.config.js


# ファイルの監視(自動コンパイル)を実行
$ webpack --watch


参考にさせていただいた記事

qiita.com

library and externals

mae.chab.in

d.hatena.ne.jp

所感

個人的にWebフレームワークDjango(https://www.djangoproject.com/)を使っており、 DJangoテンプレートからbundle.jsを読み込み、動かすところまでできた。

あとは、ES6を使って、実際にアプリを書いてみる。

npmについては、ほぼほぼ初心者といって良い状態。 Gruntとwebpackを使ってみて、個人的にはwebpackの方がシンプルで使いやすいように思った。