スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Tree ShakingとCJS,ESMごっちゃはトレードオフ

WebpackでBabelによるトランスパイルを行いながらTree Shakingを利用するには、まず利用するであろうpreset-es2015にoptionでmodule:falseを渡して、BabelにES6 Modules(以下ESM)からCommonJS(以下CJS)への変換を行わないよう設定する必要がある。現行のWebpackはdynamic-importやESMを自分で解釈できるため、Babelによるモジュール形式の変換を行なわなくても通常は問題ない。しかしWebpackのバージョンが2.2以降で、モジュール内でimport文が使われていて、module.exportsに代入が行なわれている場合に不具合が発生する。


Webpackではモジュールを読み込むとき、それがimport文を含んでいる場合はESMとして扱う。Webpack v2.2以降ではESMを実行する際にmodule.exportsが読み取り専用プロパティとして定義されているため、CJSの作法で module.exports = モジュール返り値; とすると読み取り専用プロパティへの代入となりエラーが投げられる。要するにimportするのならexportを使え、という話である。おしまい。


参考

関連記事

コメントの投稿

非公開コメント

すポンサードリンク
最新記事
カテゴリ
DN (57)
CSS (2)
いろいろ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。