I need to create a bundle that has right on top of it the es6 polyfills so that methods like Object.assign
, Array.prototype.filter
and so on are backed by core-js
in case they are not defined natively.
I've created a simple sample application that isolates this problem that I have and it is pushed to a gist here : https://gist.github.com/tiberiucorbu/fb9acd2f286e3452ef06df9d6bae9210
Now webpack
is very confusing when it comes to polyfills
, I've tried different approaches but nothing seems to work as I've imagined :
Inspiration : https://webpack.github.io/docs/shimming-modules.html
Try :
webpack.config.js
new webpack.ProvidePlugin({
'': 'imports?this=>window!core-js/index.js'
})
Result :
Nothing different happen. as If I didn't change anything. the bundle is the same without it. My small test fails :
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)')
[email protected]:81:30
index.spec.ts:59:44
loaded@http://localhost:9876/context.js:151:17
core-js
files into the webpacks entry
config:Try :
entry: {
'app': [
'core-js',
'./index.ts'
]
},
Result : The bundle contains the core-js files but they are not ran. The spec continues to fail.
So how can I make sure that the bundle contains the polyfills and they are properly ran in this (webpack, karma, typescript) constellation ?
I've tried another aproach using another mindset: import polyfills and execute polyfills while leting webpack/typescript to handle the imports and a script of mine to handle the execution. Feels a bit hackish but it works.
Changes from the initial posted version :
@@ -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
+};
Created a new file that imports core-js as name
and executes that name
:
import * as polyfills from 'core-js';
polyfills();
and after that imported the bundle along the test files in the karma configuration:
@@ -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
+};
My small test succeeds:
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)
The Gist is now on a working state with the changes mentioned above :
https://gist.github.com/tiberiucorbu/fb9acd2f286e3452ef06df9d6bae9210
If you know a more elegant solution without a middle file would be a nice to have/know, but at this point I can work with it as it is.
You can use a different approach, just letting webpack ensure the ES6 compatibility using babel:
webpack.config.js
module.exports = {
...
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
]
}
}
For install babel loader:
npm install babel-loader babel-core babel-preset-es2015 webpack --save-dev
Using babel, you can use all ES6 in its fully glory:
import $ from 'jquery'
const cool = w => 42
And no polyfills will be needed
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With