Webpack-提供core-js polyfills

Question

我需要创建一个在其顶部具有es6 polyfills的包，以便支持诸如此类的方法Object.assign，以防它们不是本机定义的。Array.prototype.filtercore-js

我创建了一个简单的示例应用程序，隔离了我遇到的这个问题，并将其推送到这里：（https://gist.github.com/tiberiucorbu/fb9acd2f286e3452ef06df9d6bae9210

现在webpack谈到时非常令人困惑polyfills，我尝试了不同的方法，但是似乎没有什么能像我想象的那样：

使用提供程序插件

灵感：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配置中：

尝试：

entry: {
    'app': [
        'core-js',
        './index.ts'
    ]
},

结果：捆绑包包含core-js文件，但它们尚未运行。规范继续失败。

那么，如何确保捆绑包中包含polyfill，并且它们在此（webpack，karma，打字稿）星座中正确运行？

---

更新：（以某种方式）工作解决方案

我尝试了使用另一种思维方式的另一种方法：导入 polyfill 并执行 polyfill，同时让webpack / typescript处理导入，而让我的脚本处理执行。感觉有点黑，但是可以用。

与最初发布的版本相比的变化：

@@ -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导入为该文件name并执行该文件name：

import * as polyfills from 'core-js';

polyfills();

然后将捆绑包沿着业力配置中的测试文件导入：

@@ -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)

要点现在处于工作状态，并进行了上述更改：

https://gist.github.com/tiberiucorbu/fb9acd2f286e3452ef06df9d6bae9210

如果您知道一个没有中间文件的更优雅的解决方案，那么知道/知道这一点将是一个不错的选择，但是现在我可以按原样使用它。

Answer 1

您可以使用不同的方法，只需让 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

并且不需要 Polyfill