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()
,不。。。