webpackのentryにフォルダの中のパスを指定できないかと思っていたところ、方法がありました。やりたいことは、以下のようなフォルダ階層があったとして、ES6>srcフォルダの中身を指定し、webフォルダにアウトプットしたいという感じです。ES6>src>js>commonフォルダには、main.jsとtest.js(ES2015で記述されてるもの)を作成しておきます。
npmでglobをインストール
globとは
Unixシェルで使われている規則に従って指定されたパターンにマッチする
すべてのパス名を見つけ出すモジュールです。
globのルールは正規表現ではなく、標準Unixパス拡張ルールに準拠します。
いくつかの特殊な文字(*、?、[])があり、そのパターンルールがファイル名に対して適用されます。
何はともあれ、globが必要です。Node.jsのnpmコマンドを使っていきます。
※Node.jsをインストールしてない場合はインストールしましょう。
⇩ windowsの場合
・Node.js / npmをインストールする(for Windows) - Qiita
⇩ Macの場合
・いまアツいJavaScript!ゼロから始めるNode.js入門〜5分で環境構築編〜
Windows10で実行していきます。
webpackとbabelのインストールまではこちらの記事をご参考ください。
プロジェクト(今回はES6フォルダ)まで移動します。
cd /d C:¥ES6
Node.jsのnpmコマンドでglobをインストールします。
npm install glob
webpackでglobを使う
webpackの設定ファイルについては下記サイトが詳しい詳しいです。
・webpack.config.jsの読み方、書き方 - dackdive's blog
自分はbabelもnpmでインストールしているので、webpackの設定ファイルがwebpack.config.babel.jsという名前になっています。
const path = require("path"); const glob = require("glob"); var entries = {} glob.sync("./src/js/**/*.js").map(function(file){ // {key:value}のObject(連想配列形式)を生成 entries[file] = file; }); module.exports = { // どのファイルをビルドするのかを指定。複数可。 entry: entries, // 出力するファイル名と出力先パス output: { path: path.join(__dirname + '/web'), filename: '[name].js' // [name]はentryに指定した配列Objectのkey }, devtool: 'inline-source-map', // module module: { loaders: [{ test: /\.js$/, // ビルド対象(.js のファイルに対して) exclude: /node_modules/, // ビルド対象から除外するフォルダ loader: 'babel-loader', // loader でローダの指定。( babel-loader を使用して babel でトランスパイルする) }] }, // requireで読み込むときのrootのpathを指定 resolve: { root: [ path.join(__dirname + '/src/js'), ], extensions: ['', '.js', '.jsx'], }, }
設定ファイルの記述ができたら、コマンドプロンプトで
webpack
と実行します。
トランスパイルされました。
⇩ JavaScriptのモジュール管理の歴史については下記サイトへ
・JavaScriptのモジュール管理(CommonJSとかAMDとかBrowserifyとかwebpack) | tsuchikazu blog
ECMAScriptとCommonJSで仕様が異なることを知らず、jsファイルにrequire()を書いて、babelでトランスパイルするもエラーを繰り返していました(涙)。
全体像を見ることも大事ですね。
まだ、CommonJSのrequire()をBabel6で使う方法は分からず終いですが、今回はこのへんで。
今回はこのへんで。