npm path.joinの罠

この記事の目的

・最初webpackを使おうとして、なぜかERROR in Entry module not found: Error: Cannot resolve moduleと出て、モジュールが見つからないと散々悩んでいたら、実はwebpackに関するミスではなくて、path.joinの思わぬ罠に引っかかっていたということだった。

・webpackに限らず、ディレクトリの些細な違いが影響するものにpath.joinを安易に挟むと思わぬバグを生みますよという自分への戒めと、共有のために記しておく。

あらすじ

・path.joinは引数に入れた文字列をそのまま繋げず、ちゃっかり変えてしまう時がある

事件現場

・gulpマンションconfig.js号室

+-- package.json
+-- gulpfile.babel.js
+-- gulp/
    +-- config.js    //ここ
    +-- tasks
+-- public/
    +-- src/
        +-- index.js

何が起こったか

・gulpからwebpackを操作しようとして、config.jsに以下のようなことを書いた。

config.js

const path = require('path');

const originSourceDir = './public/src';
const originBuildDir = './public/build';

module.exports = {
    src: originSourceDir,
    build: originBuildDir,
    js: {
        srcDir: path.join(originSourceDir, 'js'),
        bldDir: path.join(originBuildDir, 'js'),
        uglify: true
    },
    webpack: {
        entry: {
            bundle: path.join(originSourceDir, 'js/index.js')
        },
        output: {
            filename: 'bundle.js'
        },
        //以下略
    }
};

・知らない人には是非とも知っておいて欲しい事実として

・webpackのentryに記述するパスは`./`から始まる必要がある。

というものがある。 このことを知っていたらpathの巧妙な罠に気づくのも早かったろうが........

・今回のケースでは、私は今まで通り

・path.joinは第一引数と第二引数をそのままスラッシュで繋げてくれるもの

と考えていたわけだが、以下のような場合

const path = require('path');
const dir = './public/src';
path.join(dir, 'js/index.js') 　　//'public/src/js/index.js'　........だと？

おわかりいただけただろうか？最初の./がまるまる消えてしまうのだ！

・もう何が起こったかの概要はつかめたかと思われるが、ディレクトリパスをpath.joinで書いてしまっていたため、どう書いても最初に./がつかなくなってしまうのだ！

・このせいでwebpackのことばかりを深く調べまくる羽目になってしまった........

結論

・path.joinの扱いには気をつけること！。
・最初に./をつけたい場合はpath.joinは使わずに、普通に文字列の連結で書くといい。