如何使用 babel-loader 轉譯 node_modules 模塊？

Question

問題：我想為舊瀏覽器 (>= 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: [],
    },
],

使用 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 配置名為.babel.rc並且 babel 7 默認設置是查找名為babel.config.js的配置文件，請參見此處。

所以從'.babel.rc'重命名巴貝爾配置文件后'babel.config.js'我可以申請描述了我'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)\/).*/, 
    },
],

問題：感覺像是變通方法，但是沒有更方便的方法來處理此類問題嗎？ 我只是假裝在不久的將來會有越來越多的未轉換包（按照這個討論），我們是否總是必須手動將包名放在 webpacks 的exclude規則中？

Answer 1

問題：感覺像是變通方法，但是沒有更方便的方法來處理此類問題嗎？ 我只是假裝在不久的將來會有越來越多的未轉換包（按照這個討論），我們是否總是必須手動將包名放在 webpacks 的排除規則中？

您可以使用are-you-es5類are-you-es5模塊自動創建異常列表或測試： https : are-you-es5

如果指向您的node_modules諸如eslint-plugin-compat類的東西可能會警告您出現問題： https : node_modules

雖然它並不完美。 我認為在一般的生產設置中，您應該在添加包之前了解您添加的包，或者進行一些自動化測試，如果 IE11 對您的項目至關重要，則會捕獲瀏覽器錯誤。

我知道這並不總是可能的，但我強烈建議將 IE11 及以下版本推向一些較低層的支持。 在使用現代 JS 的同時，仍然很難保持 IE11 及以下版本。