sebastians90 / webpack-polyfill-injector Goto Github PK
View Code? Open in Web Editor NEWWebpack plugin to automatically inject polyfills into your bundle without affecting modern browsers.
License: MIT License
Webpack plugin to automatically inject polyfills into your bundle without affecting modern browsers.
License: MIT License
When I add webpack-polyfill-injector to package.json
npm : npm WARN deprecated [email protected]: Please replace with usage of fs.existsSync
At line:1 char:1
+ npm install
+ ~~~~~~~~~~~
+ CategoryInfo : NotSpecified: (npm WARN deprec...f fs.existsSync:String) [], RemoteException
+ FullyQualifiedErrorId : NativeCommandError
npm
WARN
deprecated
[email protected]: 🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
> [email protected] postinstall D:\cot\EDelivery\EDelivery\EDelivery.Injected.AspCore.MvcApp\node_modules\polyfill-library
> npm run build
> [email protected] build D:\cot\EDelivery\EDelivery\EDelivery.Injected.AspCore.MvcApp\node_modules\polyfill-library
> npm run clean && node tasks/node/updatesources && node tasks/node/buildsources
> [email protected] clean D:\cot\EDelivery\EDelivery\EDelivery.Injected.AspCore.MvcApp\node_modules\polyfill-library
> rimraf ./polyfills/__dist
Updating third-party polyfills...
_TypedArray: No change
~html5-elements: No change
atob: No change
AudioContext: No change
EventSource: No change
fetch: Polyfill updated, replacing old version
from ..\whatwg-fetch\fetch.js
* Running module-specific update task update.task.js
HTMLPictureElement: No change
Intl: No change
JSON: No change
MutationObserver: No change
Promise: No change
UserTiming: No change
WebAnimations: No change
Polyfills updated successfully
Writing compiled polyfill sources to D:\cot\EDelivery\EDelivery\EDelivery.Injected.AspCore.MvcApp\node_modules\polyfill-library\polyfills\__dist/...
Waiting for files to be written to disk...
Sources built successfully
added 123 packages from 94 contributors and audited 9050 packages in 113.717s
found 0 vulnerabilities
package.json
"dependencies": {
"@babel/polyfill": "7.2.5",
"@dashboardcode/bsmultiselect": "0.2.19",
"bootstrap": "4.2.1",
"bootstrap-daterangepicker": "3.0.3",
"datatables.net": "1.10.19",
"datatables.net-bs4": "1.10.19",
"jquery": "3.3.1",
"jquery-validation": "1.19.0",
"jquery-validation-unobtrusive": "3.2.11",
"popper.js": "1.14.6",
"source-map": "^0.7.3"
},
"devDependencies": {
"@babel/cli": "7.2.3",
"@babel/core": "7.2.2",
"@babel/node": "7.2.2",
"@babel/plugin-external-helpers": "7.2.0",
"@babel/plugin-transform-modules-umd": "7.2.0",
"@babel/plugin-transform-spread": "7.2.2",
"@babel/preset-env": "7.2.3",
"@babel/preset-typescript": "7.1.0",
"@types/bootstrap": "^4.2.0",
"@types/jquery": "3.3.29",
"@types/node": "10.12.18",
"@types/webpack-env": "1.13.6",
"autoprefixer": "9.4.5",
"babel-loader": "8.0.5",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-remove-import": "1.0.0",
"bundlesize": "^0.17.0",
"clean-webpack-plugin": "1.0.0",
"cross-env": "^5.2.0",
"css-loader": "2.1.0",
"del": "^3.0.0",
"expose-loader": "0.7.5",
"file-loader": "3.0.1",
"gulp": "^4.0.0",
"html-loader": "0.5.5",
"html-webpack-plugin": "3.2.0",
"import-loader": "1.0.1",
"material-design-icons": "3.0.1",
"mini-css-extract-plugin": "0.5.0",
"node-sass": "4.11.0",
"npm-run-all": "4.1.5",
"optimize-css-assets-webpack-plugin": "5.0.1",
"postcss-cli": "6.1.1",
"postcss-loader": "3.0.0",
"precss": "4.0.0",
"resolve-url-loader": "3.0.0",
"sass": "^1.16.0",
"sass-loader": "7.1.0",
"script-loader": "0.7.2",
"source-map-explorer": "1.6.0",
"source-map-loader": "0.2.4",
"style-loader": "0.23.1",
"typescript": "3.2.2",
"uglifyjs-webpack-plugin": "2.1.1",
"url-loader": "1.1.2",
"webpack": "4.28.4",
"webpack-bundle-analyzer": "3.0.3",
"webpack-cli": "3.2.1",
"webpack-manifest-plugin": "2.0.4",
"webpack-merge": "4.2.1",
"webpack-polyfill-injector": "3.0.1"
},
Instead of creating thousands of individual polyfill files (or one big one), it would be neat to have an option of loading them from https://polyfill.io directly
This would invalidate the argument in the readme that it avoids a CDN, but it's a fair compromise to load individual/needed polyfills from a CDN than having thousands of files in your build.
Looking at the code, I believe it would be fairly straight forward to add this in. Maybe an option like fromCdn: true/false
Hi @SebastianS90,
Thanks for the excellent library. I am trying to use this injector with ManifestPlugin
. My entry point looks like:
entry: {
"details-page": `webpack-polyfill-injector?${JSON.stringify({
modules: ["./js/details-page.js"]
})}!`,
},
Doing ls -lah
after webpack
shows:
-rw-r--r-- 1 amirraminfar staff 152K Jan 4 07:57 details-page.js
-rw-r--r-- 1 amirraminfar staff 29K Jan 4 07:57 index.js
-rw-r--r-- 1 amirraminfar staff 7.9K Jan 4 07:57 manifest.js
-rw-r--r-- 1 amirraminfar staff 12K Jan 4 07:57 polyfills.001.js
-rw-r--r-- 1 amirraminfar staff 1.0K Jan 4 07:57 polyfills.010.js
-rw-r--r-- 1 amirraminfar staff 13K Jan 4 07:57 polyfills.011.js
-rw-r--r-- 1 amirraminfar staff 4.8K Jan 4 07:57 polyfills.100.js
-rw-r--r-- 1 amirraminfar staff 17K Jan 4 07:57 polyfills.101.js
-rw-r--r-- 1 amirraminfar staff 5.7K Jan 4 07:57 polyfills.110.js
-rw-r--r-- 1 amirraminfar staff 18K Jan 4 07:57 polyfills.111.js
-rw-r--r-- 1 amirraminfar staff 129B Jan 4 07:57 styles.js
-rw-r--r-- 1 amirraminfar staff 561K Jan 4 07:57 vendor.js
So it clearly works.
However, the manifest.json
file is:
{
"details-page.js": "js/polyfills.111.js",
"index.js": "js/index.js",
"manifest.js": "js/manifest.js",
"styles.css": "css/styles.4a3f11a3c4954ae47993.css",
"styles.js": "js/styles.js",
"vendor.js": "js/vendor.js"
}
I would expect details-page.js
to be js/details-page.js
.
The plugins look like:
plugins: [
new ManifestPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
chunks: ["details-page", "index"]
}),
new webpack.optimize.CommonsChunkPlugin({
name: "manifest"
}),
new PolyfillInjectorPlugin({
polyfills: ["Promise", "Array.prototype.fill", "fetch"]
}),
new ExtractTextPlugin("css/[name].[chunkhash].css"),
new CleanWebpackPlugin([
__dirname + "/clashstats/static/css",
__dirname + "/clashstats/static/js"
])
]
Any idea on how to fix this?
The filename that is inserted into the manifest file has a hash in.
{
"academy.js": "academy.b33882694b68b2428270.js",
"additive.js": "additive.ef3f610e50e7cc4e4ec9.js",
"it-service.js": "it-service.b8a27a945b592180540c.js",
"jquery.js": "jquery.64513b74380a928395b1.js",
"jquery.js.map": "jquery.64513b74380a928395b1.js.map",
"main.js": "main.39d3885277a4a9cf6410.js",
"messtechnik.js": "messtechnik.96f59b35c32258fae5a4.js",
"runtime.js": "runtime.8ae0f74e5b2bf2026e02.js",
"software.js": "software.b4683261e2812dd67800.js",
"solutions.js": "solutions.c2054046c03659d2f2ec.js",
"style.css": "style.e2d4363cdc14a0813f32.css",
"style.js": "style.e2d4363cdc14a0813f32.js",
"vendor.js": "vendor.dfc1c6c43efb610026f6.js",
"vendor.js.map": "vendor.dfc1c6c43efb610026f6.js.map",
"polyfills.fe9b0b39fde15e838cb4.js": "polyfills.fe9b0b39fde15e838cb4.js",
"polyfills.fe9b0b39fde15e838cb4.js.map": "polyfills.fe9b0b39fde15e838cb4.js.map",
"fonts/main.scss": "fonts/Karla-Regular.fd3f938a23d57da8894c8aa0e85adf3f.ttf",
"jquery.64513b74380a928395b1.js.LICENSE": "jquery.64513b74380a928395b1.js.LICENSE",
"polyfills.fe9b0b39fde15e838cb4.js.LICENSE": "polyfills.fe9b0b39fde15e838cb4.js.LICENSE",
"vendor.dfc1c6c43efb610026f6.js.LICENSE": "vendor.dfc1c6c43efb610026f6.js.LICENSE"
}
webpack.config.js:
// Packages
const os = require('os')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const notifier = require('node-notifier')
const TerserPlugin = require('terser-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CleanPlugin = require('clean-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const BuildNotifierPlugin = require('webpack-build-notifier')
const PolyfillInjectorPlugin = require('webpack-polyfill-injector')
const ManifestPlugin = require('webpack-manifest-plugin')
const WebpackBundleAnalyzer = require('webpack-bundle-analyzer')
const BundleAnalyzerPlugin = WebpackBundleAnalyzer.BundleAnalyzerPlugin
// Webpack
module.exports = (env, argv) => {
const appName = 'Additive builder'
const appLogo = path.resolve(__dirname, 'images/additive-signet.png')
const dist = path.resolve(__dirname, 'dist')
const root = path.resolve(__dirname, '../../../')
const cache = path.resolve(__dirname, 'cache')
const pkg = require(path.resolve(root, 'package.json'))
const platform = os.platform()
const developerName = os.userInfo().username
const ENV = argv.mode ? argv.mode : env.NODE_ENV
const isProd = ENV === 'production'
const isDev = ENV === 'development'
// Notify on start
notifier.notify({
appName: appName,
title: appName,
message: 'Starting webpack compiler...',
contentImage: appLogo,
sound: true,
icon: path.resolve(__dirname, 'images/webpack.png'),
})
// Log some infos
console.log('nodeENV:', chalk.whiteBright(ENV))
console.log('whoIsMe:', chalk.whiteBright(developerName))
console.log('whichOs:', chalk.whiteBright(platform))
console.log('devMode:', isDev ? chalk.green(isDev) : chalk.red(isDev), '\n')
// Return the webpack config
return {
entry: {
// Main
main: `webpack-polyfill-injector?${JSON.stringify({
modules: ['./source/js/app.js'],
})}!`,
// Business Units
academy: './source/js/pages/academy.js',
additive: './source/js/pages/additive.js',
'it-service': './source/js/pages/it-service.js',
messtechnik: './source/js/pages/messtechnik.js',
software: './source/js/pages/software.js',
solutions: './source/js/pages/solutions.js',
// Styles
style: './source/scss/main.scss',
},
devtool: isDev ? 'source-map' : 'source-map',
output: {
path: path.resolve(__dirname, 'dist'),
filename: isDev ? '[name].js' : '[name].[chunkhash].js',
},
// Optimize the output
optimization: {
concatenateModules: true,
namedModules: true,
namedChunks: true,
runtimeChunk: 'single',
splitChunks: {
minSize: 10,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
reuseExistingChunk: true,
name: 'vendor',
chunks: 'all',
},
jquery: {
test: /[\\/]node_modules[\\/]jquery[\\/]/,
reuseExistingChunk: true,
name: 'jquery',
chunks: 'all',
priority: 10,
enforce: true,
},
},
},
minimize: isProd,
minimizer: [
new TerserPlugin({
extractComments: 'some',
sourceMap: false,
cache: cache,
}),
new OptimizeCSSAssetsPlugin(),
],
},
// Plugins we use on compilation
plugins: [
new CleanPlugin([dist]),
new ManifestPlugin(),
new BuildNotifierPlugin({
title: appName,
logo: appLogo,
suppressCompileStart: false,
sound: true,
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
}),
new MiniCssExtractPlugin({
filename: isDev ? '[name].css' : '[name].[chunkhash].css',
}),
new PolyfillInjectorPlugin({
polyfills: ['IntersectionObserver'],
singleFile: true,
}),
new BundleAnalyzerPlugin({
analyzerMode: 'static',
reportFilename: path.resolve(root, `reports/${pkg.version}/treemap.html`),
openAnalyzer: false,
logLevel: 'error',
defaultSizes: 'gzip',
}),
],
// All rules we use to catch all necessary scripts and styles
module: {
rules: [
// {
// enforce: 'pre',
// test: /\.js$/,
// exclude: /node_modules/,
// loader: 'eslint-loader',
// options: {
// failOnWarning: false,
// failOnError: isProd,
// configFile: '../../.eslintrc',
// },
// },
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
plugins: ['lodash'],
presets: [['@babel/preset-env', { modules: false }]],
},
},
{
test: /\.s?(c|a)ss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: isDev,
importLoaders: 1,
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: isDev,
ident: 'postcss', // https://github.com/postcss/postcss-loader#plugins
plugins: () => [require('postcss-color-mod-function')()],
},
},
{
loader: 'sass-loader',
options: {
sourceMap: isDev,
},
},
],
},
{
test: /\.(jpe?g|png|gif|svg|webp)$/i,
use: [
{
loader: 'file-loader',
options: {
name: isDev ? '[name].[ext]' : '[name].[hash].[ext]',
outputPath: 'images/',
},
},
],
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: isDev ? '[name].[ext]' : '[name].[hash].[ext]',
outputPath: 'fonts/',
},
},
],
},
{
// Exposes jQuery for use outside Webpack build
test: require.resolve('jquery'),
use: [
{
loader: 'expose-loader',
options: 'jQuery',
},
{
loader: 'expose-loader',
options: '$',
},
],
},
],
},
}
}
Hi, is it possible to remove "use strict" from the js bundle
I am using external libraries which use "use strict"
And im getting Syntax error in IE11
Version 1.0.0
will be a complete rework of this plugin. Work is currently ongoing in the develop
branch and beta versions can be installed using the @beta
tag:
yarn add webpack-polyfill-injector@beta --dev
npm install webpack-polyfill-injector@beta --save-dev
Changes so far / Roadmap:
develop
)[A, B, C]
, then we generate files A
, B
, C
, AB
, AC
, BC
, ABC
. The browser requests the file that contains all necessary polyfills. This saves bandwidth, as no unnecessary polfills are loaded. Since all files are contained in the bundle, they can be served by a very dumb webserver (instead of something like polyfill-service
).cdn.polyfill.io
? Is there any need for this when you can bundle all files statically?Use semantic-release
to automate releases.
This causes the src filename to start with undefined
, resulting in an invalid filename, i.e. o.src="undefinedjs/polyfills.min.js"
I've solved this by adding the missing publicPath
into the webpack config like so:
{
output: {
publicPath: ''
}
}
However, it would be nicer if this could be fixed in PluginState.js by giving it a default value, i.e:
this.publicPath = compilation.options.output.publicPath;
-> this.publicPath = (undefined == compilation.options.output.publicPath ? '' : compilation.options.output.publicPath);
If the author agrees I'll make an appropriate PR.
It would be neat if polyfll-injector supported default sets: https://polyfill.io/v2/docs/features/#default-sets
This way one could define polyfills: [ 'default' ]
and have a good starting point for further polyfilling.
Some polyfills have dependencies, e.g. Promise.prototype.finally
.
When I include support for Promise
I get an error that the module cannot be found. I checked out polyfill-service
and it appears that it is pointed to the wrong path. For example, Promise
should go to: 'polyfill-service/polyfills/Promise/prototype/finally/polyfill'.
Something about this script is crashing on any import '*.css'
. I haven't tracked down the exact issue, but I get an error on text.forEach is undefined
for each one of those files.
There is now a separate package that contains only the polyfills, without any service infrastructure:
Hi I used your Loader and Plugin and it dies with PolyFillLibrary is not a constructor.
when I log PolyFillLibrary it is a plain Object and not a constructor.
I don't know if it was a change in PolyFillLibrary or something else.
Would be awesome if somebody could give me a hint why it is behaving like that.
Found out they changed in a Patch Version from constructor to Object.
Change happened from 3.27.1 to 3.27.2.
BR,
Kev
(continuation from the discussion in #16)
publicPath
needs to be setwebpack-polyfill-injector
can be used in import .. from ...
or require(...)
callsI am trying to integrate the polyfill-injector. But i am not sure how to do it in my webpack file. I just want one output file desktop.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
const webpack = require('webpack');
const path = require('path');
const PolyfillInjectorPlugin = require('webpack-polyfill-injector');
module.exports = {
entry: ['./src/index.js'],
output: {
path: path.resolve(__dirname, "public"), // string
filename: "desktop.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules\/(?!(dom7|ssr-window|swiper)\/).*/,
use: {
loader: "babel-loader?presets[]=es2015"
}
},
{
test: /\.(gif|png|jpe?g|svg|jpg)$/i,
use: [
{
loader: 'file-loader',
options: {
context: 'src',
name: '[path][name].[ext]',
outputPath: '/'
}
}
]
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
]
};
When comparing the package.json file between versions 1.0.1 and 1.0.2, there is a change in Webpack version; from 3.10.0 to 4.6.0. This shouldn't be the case in a patch version.
forEach is not supported on IE:
https://tips.tutorialhorizon.com/2017/01/06/object-doesnt-support-property-or-method-foreach/
The solution:
(function () {
if ( typeof NodeList.prototype.forEach === "function" ) return false;
NodeList.prototype.forEach = Array.prototype.forEach;
})();
Webpack 3.11, webpack-polyfill-injector 1.0.2
When I'm adding Object.setPrototypeOf to polyfills array Webpack crashes with the error:
ERROR in (webpack)-polyfill-injector/src/loader.js?{"modules":["./ClientApp/boot.ts"]}
Module parse failed: Unexpected token (162:38)
You may need an appropriate loader to handle this file type.
| return false;
| }())) ||
| /* Object.setPrototypeOf */ !();
| }.call(window)) {
| var js = document.createElement('script');
If I comment out Object.setPrototypeOf then Webpack runs successfully.
I'm trying to make my Angular app work in IE11, no luck so far :(
Similarly it would be nice if we could define groups of polyfills. For example: I am currently using the following polyfills:
Symbol
Array.prototype.@@iterator
NodeList.prototype.@@iterator
In 99.9% of the cases either none of them are loaded or all of them. Allowing them to be grouped would reduce the number of output files.
Originally posted by @j6s in #19 (comment)
First, great work on this plugin! I love it!
I have found only one issue that is tripping me up. In my webpack config, I need to set the output.filename
as a function so that I can conditionally remove contenthash
from my filename for a few custom plugins for another library. When I do that, things blow up with a filename.replace is not a function
error.
Hopefully something can be done to fix this and thank you!
(continuation from the discussion in #16)
Provide an option to always include the polyfills, i.e. load them synchronously instead of asynchronously in a new script
tag.
The Promise polyfill includes
Promise.prototype.finally
, to avoid needlessly serving this polyfill to those browsers, we have configured the browser targets for this polyfill to not include those configured in the Promise polyfill.
Function.name test after UglifyJS equal
"x" === function() {}.name
Better alternative
window.open.name === 'open'
Hi @SebastianS90,
Could it be that the loader doesn't work when the code uses code splitting and chunking?
I am using splitChunk options and i debugged inside of the loader everything is correct and gets returend, but there is no trace of your polyfill code in any of the generated files from webpack. The polyfill chunks are generated but the "loading" code is not present.
Maybe you can give me a hint.
UPDATE: Actually i got it to work so that the code is in there and there is also the check if there are polyfills needed, but the code is never executed in IE11. In chrome it shows me the console logs i put in there by hand. But on IE11 it never shows anything.
BR,
Kevin
So far this plugin seems to work fine in webpack 5 when the cache is disabled. However when I enable the cache, the first time I run devserver it works, then from then on each time devserver starts (the cache is used) I get :
<e> [webpack-dev-middleware] HookWebpackError: [webpack-polyfill-injector] The plugin must be used together with the loader!
<e> at makeWebpackError (/media/workspace/drivenow-frontend/node_modules/webpack/lib/HookWebpackError.js:49:9)
<e> at /media/workspace/drivenow-frontend/node_modules/webpack/lib/Compilation.js:2198:11
<e> at eval (eval at create (/media/workspace/drivenow-frontend/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:22:1)
<e> at runMicrotasks (<anonymous>)
<e> at processTicksAndRejections (internal/process/task_queues.js:97:5)
<e> -- inner error --
<e> Error: [webpack-polyfill-injector] The plugin must be used together with the loader!
<e> at /media/workspace/drivenow-frontend/node_modules/webpack-polyfill-injector/src/plugin.js:27:27
<e> at /media/workspace/drivenow-frontend/node_modules/webpack/lib/Compilation.js:486:8
<e> at fn (/media/workspace/drivenow-frontend/node_modules/webpack/lib/Compilation.js:426:19)
<e> at Hook.eval [as callAsync] (eval at create (/media/workspace/drivenow-frontend/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:12:17)
<e> at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/media/workspace/drivenow-frontend/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
<e> at cont (/media/workspace/drivenow-frontend/node_modules/webpack/lib/Compilation.js:2195:33)
<e> at /media/workspace/drivenow-frontend/node_modules/webpack/lib/Compilation.js:2241:9
<e> at /media/workspace/drivenow-frontend/node_modules/neo-async/async.js:2830:7
<e> at done (/media/workspace/drivenow-frontend/node_modules/neo-async/async.js:2865:11)
<e> at /media/workspace/drivenow-frontend/node_modules/neo-async/async.js:2818:7
<e> caused by plugins in Compilation.hooks.processAssets
<e> Error: [webpack-polyfill-injector] The plugin must be used together with the loader!
<e> at /media/workspace/drivenow-frontend/node_modules/webpack-polyfill-injector/src/plugin.js:27:27
<e> at /media/workspace/drivenow-frontend/node_modules/webpack/lib/Compilation.js:486:8
<e> at fn (/media/workspace/drivenow-frontend/node_modules/webpack/lib/Compilation.js:426:19)
<e> at Hook.eval [as callAsync] (eval at create (/media/workspace/drivenow-frontend/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:12:17)
<e> at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/media/workspace/drivenow-frontend/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
<e> at cont (/media/workspace/drivenow-frontend/node_modules/webpack/lib/Compilation.js:2195:33)
<e> at /media/workspace/drivenow-frontend/node_modules/webpack/lib/Compilation.js:2241:9
<e> at /media/workspace/drivenow-frontend/node_modules/neo-async/async.js:2830:7
<e> at done (/media/workspace/drivenow-frontend/node_modules/neo-async/async.js:2865:11)
Any way to get some polyfills in one service and the other with the polyfill-service delivered in the package ?
something like this perhaps ?
new PolyfillInjectorPlugin([{
polyfills: ['Promise'],
service:'./js/promise.min.js'
},
{
polyfills: [
'String/prototype/startsWith',
],
}])
Can't install with npm, and don't see a workaround:
ghost@vdeb:~/dev/precursor$ npm install webpack-polyfill-injector --save-dev
npm WARN deprecated [email protected]: 🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
npm WARN deprecated [email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN deprecated [email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
> [email protected] preinstall /home/ghost/dev/precursor/node_modules/.staging/zlib-e6ec4d4d
> node-waf clean || true; node-waf configure build
sh: 1: node-waf: not found
sh: 1: node-waf: not found
/home/ghost/dev/precursor
└── (empty)
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.1.2 (node_modules/watchpack/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.1.2 (node_modules/webpack-dev-server/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN [email protected] requires a peer of ajv@^6.0.0 but none was installed.
npm ERR! Linux 4.9.0-6-amd64
npm ERR! argv "/home/ghost/local/bin/node" "/home/sharki/local/bin/npm" "install" "webpack-polyfill-injector" "--save-dev"
npm ERR! node v6.11.4
npm ERR! npm v3.10.10
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] preinstall: `node-waf clean || true; node-waf configure build`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] preinstall script 'node-waf clean || true; node-waf configure build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the zlib package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node-waf clean || true; node-waf configure build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs zlib
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls zlib
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /home/ghost/dev/precursor/npm-debug.log
npm ERR! code 1
Your plugin is really handy, however you should warn users that it will install 200+ dependencies. At least in my case, polyfill-service
I ended up installing copies of babel, mysql2, mocha, etc...
A bit to much for solving a 1KB polyfill requirement
Configuration that I have to provide two polifills actual for IE11 only:
module.exports = {
entry: {
app: `webpack-polyfill-injector?${JSON.stringify({
modules: ['./src/index.es8.js']
})}!`
},
output: {
path: outputFolderPath,
filename: '[name].js'
},
plugins: [
new PolyfillInjectorPlugin({
polyfills: [
'Element.prototype.closest',
'Element.prototype.classList'
]
}),
new ManifestPlugin(),
new CleanPlugin(outputFolderPath, { verbose: false }),
extractCSS
],
module: {
rules: [
{
// MANAGE DEPENDENCY. METHOD 2. Manage dependencies at run-time. Adds modules to the global object
// https://github.com/webpack-contrib/expose-loader
// exposes $, jQuery, window.$, window.jQuery on global level;
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
}, {
loader: 'expose-loader',
options: '$'
}]
},
{
test: /\.(scss)$/,
use:
extractCSS.extract({
fallback: 'style-loader',
use:
[
{
loader: 'css-loader' // translates CSS into CommonJS JavaScript modules
}, {
loader: 'postcss-loader', // run post css actions (here autoprefixer)
options: {
sourceMap: true,
plugins: function () {
return [
require('precss'),
require('autoprefixer') // adds "vendor's" prefixes e.g. -webkit-input-placeholder , -ms-input-placeholder etc.
];
}
}
}, {
loader: 'sass-loader', options: {
sourceMap: true
} // compiles Sass to CSS
}]
})
},
{
test: /\.ts$/,
"loader": 'awesome-typescript-loader'
},
{
test: /\.(woff2|woff|ttf|svg|png)$/,
use: 'url-loader'
},
{
test: /\.(es8)\.(js)$/,
include: /src/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
babelrc: false,
presets: [
["@babel/env",
{
"targets": {
"browsers": ["last 2 chrome versions", "ie 11", "safari 11", "edge 15", "firefox 59"]
},
"debug": true
}
]
]
}
}
},
{
include: /src/,
exclude: /node_modules/,
test: /global\.js$/,
use: {
loader: "script-loader"
}
}
]
}
};
Expected behaviour: node's 'closest' become available for IE11
Results: when with Chrome and Edge everithing is OK with IE 11 I see
There $ was used in HTML inline scripts.
I think the reason is that expose-loader
was not started and $ was not assigned to global.
So the questions is could expose-loader
and 'webpack-polyfill-injector' work together? Could you add it to the documentation?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.