Webpack-软件包:@ babel/polyfill已被弃用-如何使用替代方法? [英] Webpack - package: @babel/polyfill has been deprecated - How to use an alternative?
问题描述
4个月后，我回到了Webpack 4配置和所有软件包.它总是让我感到惊讶，包更新或弃用的速度有多快.
I came back to my Webpack 4 configuration and all the packages after 4 months. It always surprises me how fast a package get's updated or deprecated.
我有这个问题，我曾经将@ babel/polyfill和其他JS和SASS源一起直接包含在Webpack的入口=> src中.
I have this problem, that I used to include the @babel/polyfill directly to the Webpack's entry => src together with my other JS and SASS source.
这是我当前的.babelrc文件:
This is my current .babelrc file:
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry",
"corejs": "core-js@2",
"debug": false
}
]
]
}
我的Webpack的输入设置:
And my Webpack's entry setting:
entry: {
src: [paths.entry.polyfill(), paths.entry.js(), paths.entry.sass()]
},
还有我设置所有导出的配置:
And the config where i setup all the exports:
entry: {
sass: () => path.resolve(module.exports.sass(), './style.scss'),
js: () => path.resolve(module.exports.js(), './index.js'),
polyfill: () => '@babel/polyfill'
},
我的带有Babel文件的package.json:
My package.json with the Babel files:
"@babel/core": "^7.4.4",
"@babel/polyfill": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"autoprefixer": "^9.4.4",
"babel-eslint": "10.0.1",
"babel-loader": "^8.0.5",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
从今天开始，我可以将任何替代品用于@ babel/polyfill吗?
Is there any replacement that i can use for the @babel/polyfill as of today?
我想保留一个polyfill，但将其替换为已弃用的包装.
I would like to keep a polyfill but replace it with the deprecated package.
谢谢！
由于某种原因导致错误的JS文件箭头功能仅在生产模式下不起作用:
JS file causing an error for some reason Arrow functions are not working in production mode only:
(() => {
// Do not remove this console log. It serves as a reminder to build in production mode.
// Building in production mode removes all console, alert and debug statements.
// NM.
console.log(
'%c Running main script in development mode.',
'color: #bada55; font-size: 12px; font-weight: 700'
);
// Add class top HTML tag if a mobile device is detected.
const primaryHTML = document.querySelector('html');
if (
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
navigator.userAgent
)
) {
primaryHTML.classList.add('touchdevice');
}
})();
Webpack文件:
Webpack file:
require('checkenv').check();
// Webpack Setup
const { THEME_AUTHOR, THEME_NAME, HOST, PORT } = require('./env.config');
const path = require('path');
const paths = require('./paths.config');
const pkg = require('../package.json');
const webpack = require('webpack');
// Plugins
const HappyPack = require('happypack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
.BundleAnalyzerPlugin;
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const HardSourceWebpack = require('hard-source-webpack-plugin');
const BrowserSync = require('browser-sync-webpack-plugin');
const MiniCssExtract = require('mini-css-extract-plugin');
const styleLint = require('stylelint-webpack-plugin');
const CopyWebpack = require('copy-webpack-plugin');
const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
const WebpackBuildNotifierPlugin = require('webpack-build-notifier');
const CleanTerminalPlugin = require('clean-terminal-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const Imagemin = require('imagemin-webpack-plugin').default;
const threadPool = HappyPack.ThreadPool({ size: 4 });
// Config utils
const { removeEmpty, getIfUtils } = require('webpack-config-utils');
const { NODE_ENV } = process.env;
const { ifProduction, ifDevelopment } = getIfUtils(NODE_ENV);
module.exports = {
target: 'web',
mode: ifDevelopment ? 'development' : 'production',
stats: {
hash: false,
version: false,
timings: false,
assets: false,
chunks: false,
modules: false,
reasons: false,
children: false,
source: false,
errors: false,
builtAt: false,
errorDetails: false,
entrypoints: false,
warnings: false,
publicPath: false
},
externals: {
jquery: 'jQuery'
},
optimization: {
minimize: ifProduction(true, false),
namedModules: ifDevelopment(true, false),
runtimeChunk: 'single',
noEmitOnErrors: true,
splitChunks: {
hidePathInfo: true,
chunks: 'all',
automaticNameDelimiter: '-',
maxAsyncRequests: 5,
maxInitialRequests: 3,
name: THEME_NAME,
cacheGroups: {
style: {
enforce: true,
priority: 1
},
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: 2,
name: 'vendors',
enforce: true,
chunks: 'all'
}
}
},
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
parallel: true,
cache: false,
warnings: false,
comments: false,
compress: {
drop_console: ifProduction(true, false)
},
output: {
comments: false
}
}
})
]
},
entry: {
src: [paths.entry.js(), paths.entry.sass()]
},
output: {
path: paths.output.base(),
filename: paths.filename.js()
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loaders: ['happypack/loader?id=js']
},
{
test: /\.scss$/,
exclude: /node_modules/,
loaders: [MiniCssExtract.loader, 'happypack/loader?id=scss']
}
]
},
plugins: removeEmpty([
new CleanWebpackPlugin({
// Write Logs to Console
verbose: ifDevelopment(true, false),
// Automatically remove all unused webpack assets on rebuild
cleanStaleWebpackAssets: true,
// Do not allow removal of current webpack assets
protectWebpackAssets: false
}),
new ExtraWatchWebpackPlugin({
files: ['.stylelintrc', '.stylelintignore', '.eslintrc']
}),
new HappyPack({
id: 'js',
verbose: ifDevelopment(true, false),
threadPool: threadPool,
loaders: ['babel-loader', 'eslint-loader']
}),
new HappyPack({
id: 'scss',
verbose: ifDevelopment(true, false),
threadPool: threadPool,
loaders: [
{
loader: 'css-loader',
options: {
url: false,
modules: false
}
},
'sass-loader'
]
}),
new styleLint({
configFile: '.stylelintrc',
context: paths.sass(),
files: '**/*.s?(a|c)ss'
}),
new MiniCssExtract({
filename: paths.filename.sass()
}),
new CopyWebpack([
{
from: paths.images(),
to: paths.output.images()
}
]),
new CopyWebpack([
{
from: paths.fonts(),
to: paths.output.fonts()
}
]),
ifProduction(
new Imagemin({
test: /\.(jpe?g|png|gif|svg)$/i
})
),
new HardSourceWebpack.ExcludeModulePlugin([
{
// HardSource works with mini-css-extract-plugin but due to how
// mini-css emits assets, assets are not emitted on repeated builds with
// mini-css and hard-source together. Ignoring the mini-css loader
// modules, but not the other css loader modules, excludes the modules
// that mini-css needs rebuilt to output assets every time.
test: /mini-css-extract-plugin[\\/]dist[\\/]loader/
},
{
test: /my-loader/,
include: path.join(__dirname, 'vendor')
}
]),
new HardSourceWebpack({
environmentHash: {
root: process.cwd(),
directories: [],
files: ['package-lock.json', 'yarn.lock']
},
info: {
mode: 'none',
level: 'debug'
},
// Clean up large, old caches automatically.
cachePrune: {
// Caches younger than `maxAge` are not considered for deletion. They must
// be at least this (default: 2 days) old in milliseconds.
maxAge: 2 * 24 * 60 * 60 * 1000,
// All caches together must be larger than `sizeThreshold` before any
// caches will be deleted. Together they must be at least this
// (default: 50 MB) big in bytes.
sizeThreshold: 50 * 1024 * 1024
}
}),
new BrowserSync(
{
proxy: HOST,
open: false,
notify: false,
port: PORT,
files: [
'wp-content/themes/**/*.css',
{
match: ['wp-content/themes/**/*.php']
}
],
snippetOptions: {
ignorePaths: ['wp-admin/**', 'wp-content/**']
}
},
{
reload: false
}
),
new FriendlyErrorsPlugin(),
// new BundleAnalyzerPlugin({
// openAnalyzer: false,
// generateStatsFile: false,
// statsOptions: {
// exclude: /node_modules/,
// errors: false,
// warnings: false,
// errorDetails: false,
// reasons: false,
// cached: false,
// cachedAssets: false
// }
// }),
new CleanTerminalPlugin(),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
'process.env.VERSION': JSON.stringify(pkg.version)
}),
new webpack.optimize.OccurrenceOrderPlugin(true),
new webpack.BannerPlugin({
banner: `Copyright ${new Date().getFullYear()} ${THEME_AUTHOR} - v${
pkg.version
}`,
exclude: /(main-vendor|main-runtime)\.js/i
}),
ifDevelopment(new webpack.HashedModuleIdsPlugin()),
ifDevelopment(
new webpack.SourceMapDevToolPlugin({
exclude: /(main-vendor|main-runtime)\.js/i
})
),
ifDevelopment(
new WebpackBuildNotifierPlugin({
title: `${THEME_AUTHOR}`,
sound: false,
suppressSuccess: true
})
)
])
};
推荐答案
core-js当前正在替换bable-polyfill.除了.babelrc文件外，您无需在其他任何地方进行设置我有一个问题，为什么您要复制具有 @ babel/polyfill 和 babel-pollyfill 的库这同样适用于 @ babel/preset-env 和 babel-preset-en .您已经在 .babelrc corejs 中声明了，但是我看不到已经安装了 package.json 吗?
core-js is currently replacing bable-polyfill. You do not have to set it anywhere except for the .babelrc file
I have a question, why do you duplicate libraries you have @babel/polyfill and babel-pollyfill
the same applies to @babel/preset-env and babel-preset-en. You have declared in .babelrc corejs but I do not see that package.json has been installed?
我的示例可能并不完美，但我尝试为之奋斗:)
My example may not be perfect but I try to strive for it :)
.babelrc
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3
}
]
]
}
package.json
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"babel-loader": "^8.0.6",
"core-js": "^3.1.4" // this is now your polyfill
...
}
webpack.config.js
entry: {
app: './index.js',
},
index.js
import './style.scss';
import module from './module.js';
...
更新
添加到 package.json 中，您可以准备自己的支持的浏览器列表
add to package.json, you can prepare your own list of supported browsers
"browserslist": [
"last 2 version",
">1%",
"not dead"
],
添加到 .babelrc
{
"debug": true,
"useBuiltIns": "usage",
"corejs": 3
}
在控制台中进行所有这些其他更改之后，将显示支持哪些浏览器和添加了哪些pollyfill.当然，最重要的是在IE11中对其进行测试.我总是在6-7个台式机和3-4个移动浏览器上进行测试.
After all these additional changes in the console will appear what browsers are supported and what pollyfill have been added. And of course the most important thing is to test it in IE11. I always test on 6-7 desktop and 3-4 mobile browsers.
这篇关于Webpack-软件包:@ babel/polyfill已被弃用-如何使用替代方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
