web-dev-qa-db-ja.com

webpackを使用してESモジュールを出力する

ロールアップでは、formatオプションを'es'に設定するだけでESモジュールを出力できます。 webpackでも同じことができますか？今では不可能な場合、webpackに追加する予定はありますか？

output.libraryTargetのドキュメント で見つかった唯一のことは、ESモジュールに言及しています。

libraryTarget: "commonjs-module"-module.exportsオブジェクトを使用して公開します（output.libraryは無視されます）、__esModuleが定義されます（相互運用モードでES2015モジュールとしてスレッド化されます）

しかし、それはかなり不明瞭です。 libraryTarget: "commonjs2"が定義されていることを除いて、__esModuleと同じですか？ 「相互運用モード」とは何ですか？

javascriptwebpackecmascript-6webpack-2es6-modules
38
Michał Perłakowski

Webpack2にはまだ関連するlibraryTargetがありません。ES6バンドルは出力しません。反対側からCommonJSにライブラリをバンドルすると、バンドラーはツリーシェーキングを実行できなくなり、未使用のモジュールを削除できなくなります。これはESモジュールがまだ開発中であるため、ブラウザにESバンドルを出荷する人はいませんが、webpackは主にブラウザ対応のバンドルを作成するために使用されます。

ライブラリを公開している場合は、反対側から、CommonJS（umd）とESターゲットの両方を提供できます。これは、パッケージの "module"キー。json のおかげです。実際、ESターゲットを公開するためにwebpackは必要ありません。必要なことは、すべてのファイルでbabelを実行してes2015標準に取得することだけです。たとえば、reactを使用している場合は、「react」プリセットでbabelを実行できます。ソースが追加機能なしですでにES 2015である場合、モジュールを直接src/index.jsに向けることができます。

//package.json
...
  "module": "src/index.js"
  "main": "dist/your/library/bundle.js
...

Babelを使用してexport v from 'mod'私のメインのindex.jsの指示なので、すべてのモジュールをエクスポートする1​​つのモジュールファイルがあります。これはbabel-plugin-transform-export-extensions（stage-1プリセットにも含まれています）で実現されます。

React-bootstrapライブラリからこのアプローチを見つけました。githubでスクリプトを見ることができます（webpack1です）。 react-sigma repo でスクリプトを少し改善しました。必要なことを行う次のファイルを自由にコピーしてください。

config/babel.config.js
scripts/buildBabel.js
scripts/es/build.js
scripts/build.js // this is command line controller, if you need just ES you don't need it

また、libターゲット（scripts/lib/build.jsおよび.babelrc）を見てください。ライブラリユーザーは、ESがrequire（ "react-sigma/lib/Sigma /"）を明示的に指定しなくても、ライブラリユーザーが必要なモジュールのみを含めることができます。 、libが重いモジュール型の場合に特に便利です！

13
Max Vorobjev