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

webpackのentryにワイルドカードを使うには

webpackのentryにフォルダの中のパスを指定できないかと思っていたところ、方法がありました。やりたいことは、以下のようなフォルダ階層があったとして、ES6>srcフォルダの中身を指定し、webフォルダにアウトプットしたいという感じです。ES6>src>js>commonフォルダには、main.jsとtest.js(ES2015で記述されてるもの)を作成しておきます。

f:id:ts0818:20170112221928j:plain

npmでglobをインストール

globとは

Unixシェルで使われている規則に従って指定されたパターンにマッチする
すべてのパス名を見つけ出すモジュールです。
globのルールは正規表現ではなく、標準Unixパス拡張ルールに準拠します。
いくつかの特殊な文字(*、?、[])があり、そのパターンルールがファイル名に対して適用されます。

node.jsのいろいろなモジュール28 – globでファイル検索 | Developers.IO

何はともあれ、globが必要です。Node.jsのnpmコマンドを使っていきます。

※Node.jsをインストールしてない場合はインストールしましょう。

⇩  windowsの場合

Node.js / npmをインストールする(for Windows) - Qiita

⇩  Macの場合

いまアツいJavaScript!ゼロから始めるNode.js入門〜5分で環境構築編〜

 

Windows10で実行していきます。

webpackとbabelのインストールまではこちらの記事をご参考ください。 

ts0818.hatenablog.com

 

プロジェクト(今回はES6フォルダ)まで移動します。

cd /d C:¥ES6

Node.jsのnpmコマンドでglobをインストールします。

npm install glob

 

webpackでglobを使う

webpackの設定ファイルについては下記サイトが詳しい詳しいです。

webpackを使い倒す - Thujikun blog

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

と実行します。

f:id:ts0818:20170112232419j:plain

トランスパイルされました。

⇩  JavaScriptのモジュール管理の歴史については下記サイトへ 

JavaScriptのモジュール管理(CommonJSとかAMDとかBrowserifyとかwebpack) | tsuchikazu blog

ECMAScriptとCommonJSで仕様が異なることを知らず、jsファイルにrequire()を書いて、babelでトランスパイルするもエラーを繰り返していました(涙)。

全体像を見ることも大事ですね。

まだ、CommonJSのrequire()をBabel6で使う方法は分からず終いですが、今回はこのへんで。

広告を非表示にする