如何让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。但我认为这样做不是一个好主意，因为它会使入口文件变得更加沉重。

那么有没有适用于webpack的加载器/插件/预设，可以像babel-polyfill一样支持Array.from呢？

- VaJoy Larn

---

据我所知，babel-runtime 也会加载 polyfill。 - Felix Kling

如果你在浏览器中工作，很可能需要整个 polyfill。你是否看到了任何实际的缺点？这通常是我推荐的做法。不过你通常不会同时使用 'transform-runtime'。 - loganfsmyth

@FelixKling 你说得对，如果是这样的话我应该删除那个插件，但问题是，出于某些原因，我更喜欢使用插件而不是将整个 polyfill 模块合并到文件中。我认为使用插件最终会使输出文件更小（也许这是不正确的？）。此外，我不想每次在 webpack.config.js 中添加新的入口文件时都要添加 babel-polyfill（在使用插件的情况下，我只需要添加入口文件即可）。那么有没有插件可以替换 transform-runtime 并支持 Array.from 呢？ - VaJoy Larn

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通过预设为您有效设置的内容。

- Filip Dupanović

---

我需要执行 npm install core-js 吗？你说，Babel 在幕后使用它，但我尝试过没有成功。Map、Set 和许多其他功能都可以使用，但是数组函数，例如 Array.includes() 却不行... - Frank N

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。

- PascalAOMS