我需要创建一个直接在其上面的es6 polyfill的bundle,以便在没有本地定义的情况下,像core.js,Array.prototype.filter等方法由core-js支持.
我已经创建了一个简单的示例应用程序来隔离我遇到的这个问题,并将其推到一个要点:https://gist.github.com/tiberiucorbu/fb9acd2f286e3452ef06df9d6bae9210
现在webpack在polyfill方面非常混乱,我尝试了不同的方法,但似乎没有任何工作,正如我想象的那样:
使用提供程序插件
灵感:https://webpack.github.io/docs/shimming-modules.html
试试:
webpack.config.js
new webpack.ProvidePlugin({
'': 'imports?this=>window!core-js/index.js'
})
结果:
什么都不会发生.如果我没有改变什么.如果没有它,捆绑是相同的.我的小测试失败了:
PhantomJS 2.1.1 (Windows 7 0.0.0) Application extend should use Object.assign FAILED
Failed: undefined is not a constructor (evaluating 'Object.assign(a, b)')
extend@index.spec.ts:81:30
index.spec.ts:59:44
loaded@http://localhost:9876/context.js:151:17
将core-js文件定义到webpacks条目配置中:
试试:
entry: {
'app': [
'core-js',
'./index.ts'
]
},
结果:
该包包含core-js文件,但它们未运行.规范继续失败.
那么我如何确保捆绑包含polyfill并且它们在这个(webpack,karma,typescript)星座中正确运行?
更新:(不知何故)工作解决方案
我尝试了另一种使用另一种心态的方法:导入polyfill并执行polyfill,同时提供webpack / typescript来处理导入和我的脚本来处理执行.
感觉有点hackish但它的确有效.
从最初发布的版本更改:
@@ -3,8 +3,10 @@ var webpack = require('webpack');
module.exports = {
entry: {
'app': [
- 'core-js',
'./index.ts'
+ ],
+ 'polyfills': [
+ 'core-js'
]
},
output: {
@@ -30,4 +32,4 @@ module.exports = {
// '': 'imports?this=>window!core-js/index.js'
// })
]
-};
\ No newline at end of file
+};
创建了一个新文件,将core-js作为名称导入并执行该名称:
import * as polyfills from 'core-js';
polyfills();
之后在karma配置中沿着测试文件导入了bundle:
@@ -4,6 +4,7 @@ module.exports = function (config) {
config.set({
frameworks: ['jasmine'],
files: [
+ './dist/polyfills.js',
'./**/*.spec.ts'
],
@@ -26,4 +27,4 @@ module.exports = function (config) {
concurrency: Infinity,
plugins: ['karma-phantomjs-launcher', 'karma-sourcemap-loader', 'karma-webpack', 'karma-jasmine']
})
-};
\ No newline at end of file
+};
我的小测试成功了:
26 01 2017 01:30:40.594:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
26 01 2017 01:30:40.596:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
26 01 2017 01:30:40.613:INFO [launcher]: Starting browser PhantomJS
26 01 2017 01:30:41.081:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket /#c9shUPdbgFg0XwJbAAAA with id 77560741
PhantomJS 2.1.1 (Linux 0.0.0): Executed 1 of 1 SUCCESS (0.04 secs / 0.002 secs)
Gist现在处于一个有上述变化的工作状态:
https://gist.github.com/tiberiucorbu/fb9acd2f286e3452ef06df9d6bae9210
如果你知道一个没有中间文件的更优雅的解决方案会很高兴有/知道,但在这一点上我可以使用它.
最佳答案 您可以使用不同的方法,只需让webpack使用babel确保ES6兼容性:
webpack.config.js
module.exports = {
...
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
]
}
}
安装babel装载机:
npm install babel-loader babel-core babel-preset-es2015 webpack --save-dev
使用babel,您可以充分利用所有ES6:
import $from 'jquery'
const cool = w => 42
并且不需要填充物