Question

问题：：我想为旧版浏览器（> = IE10）构建网站的捆绑文件。

当我使用babel 7.x与babel-loader进行代码转换时，我的已转换代码在旧Internet Explorer 11上引发了错误，因为看来node_modules模块在默认情况下将不再被转换？

问题：：如果我的所有node_module模块尚未被软件包作者转译，我如何确保它们会被转译？

使用babel-loader的webpack.config.js

// webpack.config.js
rules: [
    {
        test: /\.(js|jsx)$/,
        use: [
            {
                loader: 'babel-loader',
            },
        ],
        exclude: [],
    },
],

使用babel 7.x的babelrc.js配置

// .babelrc.js
module.exports = function(api) {
    const presets = [
        [
            '@babel/preset-env',
            {
                useBuiltIns: 'usage',
                ignoreBrowserslistConfig: true,
                targets: {
                    node: 8,
                    browsers: [
                        'last 3 versions',
                        '> 1% in DE',
                        'Explorer >= 10',
                    ],
                },
            },
        ],
        '@babel/preset-react',
    ];

    const plugins = [
        // ...
    ];

    return {
        presets,
        plugins,
    };
};

更新1：

这是通天塔的问题。我的babel配置名为.babel.rc，而babel 7的默认设置是查找名为babel.config.js的配置文件，请参见here。

因此，将babel配置文件从“ .babel.rc”重命名为“ babel.config.js”后，我可以在“ here”所述的“ webpack.config.js”中应用解决方案来转换未转换的“ node_modules” ´带有以下解决方案的软件包：

// webpack.config.js
rules: [
    {
        test: /\.(js|jsx)$/,
        use: [
            {
                loader: 'babel-loader',
            },
        ],
        // Exclude the untransformed packages from the exclude rule here
        exclude: /node_modules\/(?!(MY_MODULE|ANOTHER-ONE)\/).*/, 
    },
],

问题：这似乎是一种解决方法，但是没有更便捷的方法来处理此类问题吗？我只是假装在不久的将来（在this discussion之后），外面会有越来越多的未转换的软件包，我们是否总是必须手动将其软件包名称放入webpacks的exclude规则中？

Answer 1

问题：感觉像是一种解决方法，但是没有一个更方便的方法处理此类问题的方法？我只是假装会越来越多在不久的将来将未转换的程序包带到外部（此之后讨论），我们是否总是需要手动输入软件包名称在webpack的排除规则中？

您可以使用are-you-es5之类的模块来自动创建例外列表或测试：https://www.npmjs.com/package/are-you-es5

如果eslint-plugin-compat指向您的node_modules：https://www.npmjs.com/package/eslint-plugin-compat

，也可能会警告您一些问题。

但这并不完美。我认为通常在生产设置中，您应该只在添加软件包之前就知道它们，或者如果IE11对您的项目至关重要，则应该进行一些自动化测试以捕获浏览器错误。

我知道这并不总是可能的，但我强烈建议将IE11及以下版本推向更低层的支持。使用现代JS仍然很难维护IE11及以下版本。

如何使用babel-loader转换node_modules模块？

使用babel-loader的webpack.config.js

使用babel 7.x的babelrc.js配置

更新1：

1 个答案: