在 webpack 中使 babel6 支持 Array.from 的最佳方法是什么？

Question

我正在使用下面的 webpack 配置：

    var path = require('path');
var webpack = require('webpack');

module.exports = {
    plugins: [
        new webpack.ProvidePlugin({
            'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
        })
    ],
    entry: {
        demo1 : ['babel-polyfill', './src/js/page/demo1.js']
    },

    output: {
        path: 'dist/js/page',
        filename: '[name].js'
    },
    devtool: 'eval-source-map',
    module: {
        loaders: [
            {
                test: /\.js$/,
                include: [
                    path.resolve(__dirname, "src")
                ],
                exclude: path.resolve(__dirname, "node_modules"),
                loader: "babel-loader",
                query: {
                    plugins: ['transform-runtime'],
                    presets: ['es2015', 'react']
                }
            },
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'}
        ]
    },
    resolve: {
        root: path.resolve(__dirname, "src"),
        extensions: ['', '.js', '.json', '.scss']
    }
};

如图所示，我将整个babel-polyfill模块合并到入口文件demo1.js以支持Array.from。但我不认为这样做是个好主意，因为它会使入口文件变得太多。

所以这里有任何 loader/plugin/preset 可以用来支持 webpack 中的 Array.from，就像 babel-polyfill 所做的那样？

Answer 1

然后你会想直接与 core-js 集成，这就是 Babel 在后台使用的功能。然后，您可以通过明确要求各个模块来挑选要提供兼容性的功能。

require('core-js/fn/array/from');

// Then, from within any module:
Array.from(new Set([1, 2, 3, 2, 1])); // => [1, 2, 3]

这就是 Babel 6 通过预设有效地为您设置的内容。

Answer 2

我知道这个帖子很旧，但我在谷歌搜索时偶然发现了它。

另一种方法是放弃 babel-polyfill 并使用 dynamic-polyfill。 https://www.npmjs.com/package/dynamic-polyfill

你可以选择

import polyfill from 'dynamic-polyfill'

polyfill({
  fills: ['Array.from'],
  afterFill() {
    // your code
  }
})

然后浏览器仅在需要时才下载 polyfill。

在 webpack 中使 babel6 支持 Array.from 的最佳方法是什么？

what`s the best way to make babel6 support Array.from in webpack?

ecmascript-6

webpack

babeljs