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

Question

问题:我想为旧浏览器(> = IE10)的网站构建捆绑文件。

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

问题:我怎样才能确保我所有的node_module如果软件包作者尚未转译模块，它们将被转译吗？

webpack.config.js 使用 babel-loader

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

babelrc.js 配置使用 babel 7.x

// .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 配置被命名为 .babel.rc而 babel 7 默认设置是查找名为 babel.config.js 的配置文件，见 here .

因此，在将 babel 配置文件从 '.babel.rc' 重命名为 'babel.config.js' 之后，我可以在我的 'webpack.config.js' 描述的 here 中应用解决方案用这样的解决方案转换未转换的“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

Question: It feels like workaround, but isn't there a more convenientway to handle such issues? I just pretend there will be more and moreuntransformed packages outside in the near future (following thisdiscussion) and do we always have to manually put the package namesfor it in webpacks' exclude rule??

您可以使用 are-you-es5 等模块自动创建异常(exception)列表或测试: 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 及以下版本。