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

Posted 2023-03-07

【中文标题】如何使用 babel-loader 转换 node_modules 模块？

【英文标题】：How to transpile node_modules modules with babel-loader?

【发布时间】：2019-05-31 07:04:08

【问题描述】：

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

当我使用babel-loader 转译带有babel 7.x 的代码时，我转译的代码在旧Internet Explorer 11 上引发错误，因为似乎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”后，我可以在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 规则中？

【问题讨论】：

您可以确保不向exclude: [] 选项添加任何内容。

@PlayMa256：你的意思是在webpack.config.js？我已经尝试过了，但它并没有改变任何东西。将exclude: [] 添加到.babelrc.js 配置相同，没有变化。

看看这个github.com/webpack/webpack/issues/2031

好的，这是 babel 的问题。我的 babel 配置被命名为 ´.babel.rc` 并且在游戏中的某处 babel 将查找 babel 配置文件的默认设置更改为 babel.config.js，请参见此处：babeljs.io/docs/en/options#configfile。因此，重命名配置文件后，exclude: /node_modules\/(?!(MY_MODULE |ANOTHER-ONE)\/).*/, 解决方案现在可以正常工作了。

谢谢！！！特别是这个页面帮助了我babeljs.io/docs/en/config-files#6x-vs-7x-babelrc-loading

【参考方案1】：

问题：感觉像是变通方法，但没有更方便的方法吗？ 处理此类问题的方法？我只是假装会有越来越多 在不久的将来外面的未改造的包裹（遵循这个 讨论），我们是否总是需要手动输入包名 为它在 webpacks 的排除规则中？？

您可以使用are-you-es5 等模块自动创建异常列表或测试：https://www.npmjs.com/package/are-you-es5

如果指向您的node_modules，eslint-plugin-compat 之类的内容可能会警告您出现问题：https://www.npmjs.com/package/eslint-plugin-compat

虽然它并不完美。我认为在一般的生产环境中，您应该在添加它们之前了解您添加的包，或者如果 IE11 对您的项目至关重要，则可以进行一些自动化测试来捕获浏览器错误。

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