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

Question

我在 4 个月后回到了我的 Webpack 4 配置和所有包。一个包更新或弃用的速度总是让我感到惊讶。

我遇到了这个问题，我曾经将 @babel/polyfill 与我的其他 JS 和 SASS 源代码一起直接包含到 Webpack 的入口 => src 中。

这是我当前的 .babelrc 文件:

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

还有我的Webpack的入口设置:

entry: {
    src: [paths.entry.polyfill(), paths.entry.js(), paths.entry.sass()]
},

以及我设置所有导出的配置:

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

我的 package.json 和 Babel 文件:

"@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 的替代品吗？

我想保留一个 polyfill，但用已弃用的包替换它。

谢谢!

编辑:

由于某种原因导致错误的 JS 文件箭头函数仅在生产模式下不起作用:

(() => {
    // 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 文件:

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

Answer 1

core-js 目前正在取代 bable-polyfill。除了 .babelrc 文件外，你不必在任何地方设置它我有一个问题，为什么要复制你有 @babel/polyfill 和 babel-pollyfill 的库这同样适用于@babel/preset-env 和 babel-preset-en。你已经在 .babelrc corejs 中声明了，但是我没有看到 package.json 已经安装了？

我的 example可能不完美，但我会努力争取:)

.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，你可以准备自己支持的浏览器列表

"browserslist": [
  "last 2 version",
  ">1%",
  "not dead"
],

添加到.babelrc

{
  "debug": true,
  "useBuiltIns": "usage",
  "corejs": 3
}

在控制台中进行所有这些额外更改后，将显示支持哪些浏览器以及添加了哪些 pollyfill。当然，最重要的是在 IE11 中进行测试。我总是在 6-7 个桌面浏览器和 3-4 个移动浏览器上进行测试。