Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/jsf/5.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Webpack 在网页包中制作babel6支持Array.from的最佳方法是什么?_Webpack_Babeljs_Ecmascript 6 - Fatal编程技术网

Webpack 在网页包中制作babel6支持Array.from的最佳方法是什么?

Webpack 在网页包中制作babel6支持Array.from的最佳方法是什么?,webpack,babeljs,ecmascript-6,Webpack,Babeljs,Ecmascript 6,我正在使用以下网页包配置: var path = require('path'); var webpack = require('webpack'); module.exports = { plugins: [ new webpack.ProvidePlugin({ 'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch' }) ],

我正在使用以下网页包配置:

    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
。但是我不认为这样做是个好主意,因为这样会使输入文件太重


因此,这里有任何
加载程序
/
插件
/
预设
,我可以用它来支持
数组。从网页包中的
开始,就像
巴贝尔polyfill
所做的那样?

你会想直接与之集成,这就是巴贝尔在引擎盖下使用的。然后,您可以通过显式地要求单个模块来挑选要提供兼容性的特性

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

我知道这条线索很旧,但我在谷歌搜索时偶然发现了它

另一种方法是抛弃
babel polyfill
,使用
dynamic polyfill

你可以选择这样的方式

import polyfill from 'dynamic-polyfill'

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

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

好的,babel runtime也会加载polyfill。如果您在浏览器中工作,则可能需要整个polyfill。你认为你的方法有什么实际的缺点吗?这通常是我推荐的。不过,您通常不会同时使用
'transform-runtime'
。@FelixKling您是对的,在这种情况下,我应该删除该插件,但问题是,出于某些原因,我更喜欢使用插件,而不是将整个polyfill模块合并到文件中。我认为使用插件最终会使输出文件的大小变小(可能是不正确的?)。此外,我不想每次在
webpack.config.js
中添加新的条目文件时都添加
babel polyfill
(在使用插件的情况下,我只需要添加条目文件)。那么这里是否有任何插件可以用来替换支持数组的
转换运行时
。另外从
开始?我是否需要
npm安装core js
?(你说,Babel在幕后使用它,但我运气不好。映射、设置和加载内容,但数组函数,即
Array.includes()
,不。。。