entityMap|blocks|key|732c4|text|core-js目前正在取代bable-polyfill。你不需要在任何地方设置它，除了.babelrc文件我有一个问题，为什么你要复制库，你有@babel/polyfill和babel-pollyfill同样适用于@babel/preset-env和babel-preset-en。您已在.babelrc+corejs中声明，但我没有看到package.json已安装？|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|ffeb8|我的例子可能不完美，但我会努力做到:)|3ouhq|.babelrc|6vh2u|package.json|c44cn|webpack.config.js|dgavo|index.js|2o7h4|更新|dvqnh|添加到package.json中，您可以准备自己的受支持浏览器列表|4eh5n|添加到.babelrc|6cae6|在所有这些附加更改之后，控制台中将显示支持哪些浏览器以及添加了哪些pollyfill。当然，最重要的事情是在IE11中测试它。我总是在6-7个桌面浏览器和3-4个移动浏览器上测试。^0|1Z|F|2F|F|2Z|H|3H|F|40|8|49|6|4P|C|0|0|0|8|0|0|C|0|0|H|0|0|8|0|0|3|C|0|3|8|0^^$0|$]|1|@$2|3|4|5|6|7|8|Y|9|@$A|Z|B|10|C|D]|$A|11|B|12|C|D]|$A|13|B|14|C|D]|$A|15|B|16|C|D]|$A|17|B|18|C|D]|$A|19|B|1A|C|D]|$A|1B|B|1C|C|D]]|E|@]|F|$]]|$2|G|4|H|6|7|8|1D|9|@]|E|@]|F|$]]|$2|I|4|J|6|7|8|1E|9|@$A|1F|B|1G|C|D]]|E|@]|F|$]]|$2|K|4|L|6|7|8|1H|9|@$A|1I|B|1J|C|D]]|E|@]|F|$]]|$2|M|4|N|6|7|8|1K|9|@$A|1L|B|1M|C|D]]|E|@]|F|$]]|$2|O|4|P|6|7|8|1N|9|@$A|1O|B|1P|C|D]]|E|@]|F|$]]|$2|Q|4|R|6|7|8|1Q|9|@]|E|@]|F|$]]|$2|S|4|T|6|7|8|1R|9|@$A|1S|B|1T|C|D]]|E|@]|F|$]]|$2|U|4|V|6|7|8|1U|9|@$A|1V|B|1W|C|D]]|E|@]|F|$]]|$2|W|4|X|6|7|8|1X|9|@]|E|@]|F|$]]]]

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 <code>@babel/polyfill</code> and<code> babel-pollyfill</code>
the same applies to <code>@babel/preset-env</code> and<code> babel-preset-en</code>. You have declared in <code>.babelrc</code> <code>corejs</code> but I do not see that <code>package.json</code> has been installed?
My <a href="https://github.com/tomik23/ToDoList/blob/master/package.json#L12" rel="nofollow noreferrer">example</a> may not be perfect but I try to strive for it :)
<code>.babelrc</code>
<pre><code>{
 &quot;presets&quot;: [
 [
 &quot;@babel/preset-env&quot;,
 {
 &quot;useBuiltIns&quot;: &quot;usage&quot;,
 &quot;corejs&quot;: 3
 }
 ]
 ]
}
</code></pre>
<code>package.json</code>
<pre><code>&quot;devDependencies&quot;: {
 &quot;@babel/core&quot;: &quot;^7.5.5&quot;,
 &quot;@babel/preset-env&quot;: &quot;^7.5.5&quot;,
 &quot;babel-loader&quot;: &quot;^8.0.6&quot;,
 &quot;core-js&quot;: &quot;^3.1.4&quot; // this is now your polyfill
 ...
}
</code></pre>
<code>webpack.config.js</code>
<pre><code>entry: {
 app: './index.js',
},
</code></pre>
<code>index.js</code>
<pre><code>import './style.scss';
import module from './module.js';
...
</code></pre>
UPDATE
add to <code>package.json</code>, you can prepare your own list of supported browsers
<pre><code>&quot;browserslist&quot;: [
 &quot;last 2 version&quot;,
 &quot;&gt;1%&quot;,
 &quot;not dead&quot;
],
</code></pre>
add to <code>.babelrc</code>
<pre><code>{
 &quot;debug&quot;: true,
 &quot;useBuiltIns&quot;: &quot;usage&quot;,
 &quot;corejs&quot;: 3
}
</code></pre>
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.

entityMap|blocks|key|acjv7|text|更新|type|unstyled|depth|inlineStyleRanges|entityRanges|data|543g7|在webpack+5的情况下：|5qnl1|如有必要，关闭运行时代码中的ES2015语法|f3ktm|默认情况下，webpack的运行时代码使用ES2015语法来构建较小的包。如果您的构建目标环境不支持此语法(如IE11)，则需要设置target：'web'，'+ES5‘以恢复为ES5语法(如果目标环境是浏览器，则设置为’web‘)。|d1cgi|dn14c|来源。^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|M|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|N|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|O|9|@]|A|@]|B|$]]|$2|I|4|-4|6|7|8|P|9|@]|A|@]|B|$]]|$2|J|4|K|6|7|8|Q|9|@]|A|@]|B|$]]]]

UPD
In the case with webpack 5:
<blockquote>
Turn off ES2015 syntax in runtime code, if necessary
By default, webpack's runtime code uses ES2015 syntax to build smaller
bundles. If your build targets environments that don't support this
syntax (like IE11), you'll need to set target: ['web', 'es5'] to
revert to ES5 syntax ('web' if target environment is browser).
</blockquote>
The <a href="https://webpack.js.org/migrate/5/#turn-off-es2015-syntax-in-runtime-code-if-necessary" rel="nofollow noreferrer">source</a>.

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. 

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.

This is my current .babelrc file:

<pre><code>{
 "presets": [
 [
 "@babel/preset-env",
 {
 "useBuiltIns": "entry",
 "corejs": "core-js@2",
 "debug": false
 }
 ]
 ]
}
</code></pre>

And my Webpack's entry setting:

<pre><code>entry: {
 src: [paths.entry.polyfill(), paths.entry.js(), paths.entry.sass()]
},
</code></pre>

And the config where i setup all the exports:

<pre><code>entry: {
 sass: () =&gt; path.resolve(module.exports.sass(), './style.scss'),
 js: () =&gt; path.resolve(module.exports.js(), './index.js'),
 polyfill: () =&gt; '@babel/polyfill'
},
</code></pre>

My package.json with the Babel files:

<pre><code>"@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",
</code></pre>

Is there any replacement that i can use for the @babel/polyfill as of today? 

I would like to keep a polyfill but replace it with the deprecated package.

Thanks!

EDIT:

JS file causing an error for some reason Arrow functions are not working in production mode only:

<pre><code>(() =&gt; {
 // 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');
 }
})();
</code></pre>

Webpack file:

<pre><code>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
 })
 )
 ])
};
</code></pre>

Webpack - package: @babel/polyfill has been deprecated - How to use an alternative?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

 4个月后，我回到了我的Webpack 4配置和所有的包。包更新或弃用的速度总是让我感到惊讶。 我有这个问题，我曾经将@babel/polyfill直接包含到Webpack的条目=> src中，以及我的其他JS和SASS源代码。 这是我当前的.babelrc文件： 和我的Webpack的入口设置： 和我设置所有导出的配置： 我的带有巴别塔文件的package.json： 今天有没有替代@babel

问Webpack - package：@babel/polyfill已被弃用-如何使用替代方案？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Webpack - package：@babel/polyfill已被弃用-如何使用替代方案？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Webpack - package：@babel/polyfill已被弃用-如何使用替代方案？
EN