LOGv:20171214

webpack4でlibraryTargetをumdにしたらエラー

webpack4で

module.exports = (env, argv) => {
    let { mode } = argv;
    return {
        output : {
            path          : __dirname,
            library       : 'myLib',
            libraryTarget : 'umd'
        }
    },
    ...
};

という感じにlibraryTargetをumdにしてブラウザーでも使えるしesmodules環境でも使えるしnode.js環境でも使えるライブラリを作成して
バンドルし、node.js環境でrequireしてみたら、バンドルされたjsでこのようなエラーが

ReferenceError: window is not defined

はて、と思いバンドルされたjsを覗いてみたら

(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory();
    else if(typeof define === 'function' && define.amd)
        define([], factory);
    else if(typeof exports === 'object')
        exports["Kensho"] = factory();
    else
        root["Kensho"] = factory();
})(window, function() {
...

ですよねー
環境別にモジュールを定義するwebpackUniversalModuleDefinition関数に渡してる第1実引数がwindowになってる。
これだと、node.js環境はwindow無いから引数渡した時点でエラーになる。

で、これを見ると修正されたっぽい
https://github.com/webpack/webpack/issues/6642

module.exports = (env, argv) => {
    let { mode } = argv;
    return {
        output : {
            path          : __dirname,
            library       : 'myLib',
            libraryTarget : 'umd',
            globalObject  : 'this'
        }
    },
    ...
};

という風にglobalObjectプロパティを設定してあげれば良い。

open close