web-dev-qa-db-ja.com

複数のエントリポイントを使用してバベルポリフィルを含める最良の方法は何ですか

複数のエントリポイントを使用してwebpack構成を使用しています。

var fs = require('fs');
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.[hash].js');

module.exports = {
    cache: true,
    entry: {
        main: './resources/assets/js/main.js',
        services: './resources/assets/js/services.js'
    },
    output: {
        path: './public/assets/web/js',
        filename: '[name].[hash].js',
        publicPath: '/assets/web/js/',
        chunkFilename: '[id].[chunkhash].js'
    },
    resolve: {
        modulesDirectories: ['node_modules', 'web_modules', 'modules']
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: [/node_modules/, /web_modules/],
            loader: 'babel-loader',
            query: {
                stage: 0
            }
        }]
    },
    plugins: [commonsPlugin,
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            'window.jQuery': 'jquery'
        }),
        function() {
            this.plugin('done', function(stats) {
                fs.writeFile('./cache.json', JSON.stringify({
                    hash: stats.hash
                }));
            });
        }
    ]
};

babel polyfillをwebpack構成に含める方法はありますか？それとも私のセットアップに含めるための最良の方法は何ですか？

すべてのモジュールに必須として含める必要がありますか？

事前にどうもありがとうございました！

webpackbabeljs
67
Berto Yáñez

最も簡単な方法は、変更することです

main: './resources/assets/js/main.js',
services: './resources/assets/js/services.js'

することが

main: ['babel-polyfill', './resources/assets/js/main.js'],
services: ['./resources/assets/js/services.js']

そのため、ポリフィルは、各エントリポイントの一部としてロードおよび実行され、ファイルについて知る必要はありません。

これは、mainとservicesの両方が同じページにロードされることを前提としています。それらが2つの別々のページである場合、両方の配列にbabel-polyfillエントリが必要です。

注意

上記はBabel 5に適用されます。Babel6では、npm install --save babel-polyfillを使用し、babel-polyfillの代わりにbabel/polyfillを使用します。

75
loganfsmyth

開発の代替手段（おそらく、実稼働環境に最適なセットアップではない）は、独自のモジュールにbabel-polyfillを含めることです。

entry: {
    'babel-polyfill': ['babel-polyfill'],
    main: './resources/assets/js/main.js',
    services: './resources/assets/js/services.js'
}

背景：上記の回答で提案を試みましたが、まだエラーが発生していました：「babel-polyfillのインスタンスは1つしか許可されていません」。 webpack 2を使用しているので、それが要因かもしれません。上記のソリューションは、より大きなアプリに含めるために再利用可能なライブラリを作成しており、テスト用にライブラリリポジトリに別個のデモバンドルを必要としているため、私の目的には適しています。しかし、完全なアプリの場合、HTTP/2を使用していない限り、実稼働環境でポリフィルをロードするために追加のHTTPリクエストを要求するのは得策ではありません。

7
Matt Browne