什么是使webel6中的babel6支持Array.from的最佳方法?

时间:2015-12-22 13:59:33

标签: ecmascript-6 webpack babeljs es2015

我正在使用下面的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来支持Array.from中的babel-polyfill作为{{1}}做什么?

2 个答案:

答案 0 :(得分:1)

您需要直接与core-js集成,这是Babel在幕后使用的内容。然后,您可以通过明确要求单个模块来挑选您想要提供兼容性的功能。

var secArray = new List<Dictionary<string, string>>();
var secArray0 = new Dictiionary<string, string>();

secArray0["Name"] = "Gomesh";
secArray.Add(secArray0);

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

答案 1 :(得分:0)

我知道这个帖子已经老了但我在谷歌搜索时偶然发现了它。

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

你可以选择像

这样的东西
import polyfill from 'dynamic-polyfill'

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

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