web-dev-qa-db-fra.com

Quelle est la meilleure façon d'inclure babel polyfill en utilisant plusieurs points d'entrée

J'utilise une configuration webpack en utilisant plusieurs points d'entrée:

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
                }));
            });
        }
    ]
};

Est-il possible d'inclure le babel polyfill dans la configuration de mon WebPack. Ou quel est le meilleur moyen de l'inclure dans ma configuration?

Dois-je l'inclure en tant que condition requise dans tous mes modules?

Merci beaucoup d'avance!

webpackbabeljs
67
Berto Yáñez

Le moyen le plus simple serait de changer

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

être

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

de sorte que le polyfill soit chargé et exécuté en tant que partie de chaque point d’entrée sans que vos fichiers aient besoin de le savoir.

Cela suppose que main et services sont chargés sur la même page. Si ce sont deux pages séparées, vous voudriez le babel-polyfill entrée dans les deux tableaux.

Remarque

Ce qui précède s’applique à Babel 5. Pour Babel 6, vous auriez npm install --save babel-polyfill et utilise babel-polyfill au lieu de babel/polyfill.

75
loganfsmyth

Une alternative pour le développement (peut-être pas la meilleure configuration pour la production) serait d'avoir babel-polyfill dans son propre module:

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

Contexte: j'ai essayé la suggestion de la réponse ci-dessus et j'obtenais toujours une erreur: "Une seule instance de babel-polyfill est autorisée". J'utilise Webpack 2, alors c'est peut-être un facteur. La solution ci-dessus convient parfaitement à mes besoins, car j'écris une bibliothèque réutilisable à inclure dans des applications plus grandes. Je souhaite simplement un ensemble de démonstration distinct dans le référentiel de bibliothèque à des fins de test. Mais pour une application complète, il peut ne pas être judicieux de demander une requête HTTP supplémentaire pour charger le polyfill en production, sauf si vous utilisez HTTP/2.

7
Matt Browne