使用Babel将特定的node_modules转换为es5

时间:2019-06-04 22:34:23

标签: javascript webpack babeljs

这个问题是关于将node_modules从es6移植到es5。

我正在处理的项目需要支持ie11,该项目由于具有未转译为es5的依赖关系而当前被中断。我可以在控制台输出中看到中断站点的行。有一个称为randexp的依赖项,可以导出类,并且不使用babel来翻译代码。我在babel.config.js中用正则表达式指定了一些值,这些值用正则表达式表示某些模块,这些模块被我识别为未转译为es5。

这是我的两个主要问题:

  1. 我如何确定需要babel为我进行转换的依赖项,而不必深入挖掘控制台错误来找到软件包,并将文件路径添加到babel的替代项中?
  2. 如果依赖树中的某个地方碰巧没有将模块转换为es5,其他项目如何提供跨浏览器支持?

这是我的babel配置:

module.exports = {
    presets: [
        '@babel/preset-react',
        [
            '@babel/preset-env',
            {
                // loads polyfills from @babel/polyfill for the targeted browsers
                useBuiltIns: 'entry',
                corejs: 2,
                targets: {
                    browsers: [
                        'chrome >= 55',
                        'firefox >= 52',
                        'safari >= 7',
                        'edge >= 13',
                        'ie 11'
                    ]
                }
            }
        ]
    ],
    // We are using the same plugins that create-react-app uses. Some of the CRA plugins are covered by @babel/preset-env
    plugins: [
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-syntax-dynamic-import',
        '@babel/plugin-transform-classes',
        '@babel/plugin-transform-runtime',
        '@babel/plugin-transform-modules-commonjs'
    ],
    overrides: [
        {
            test: [/.*\/drange\/?/, /.*\/randexp\/?/],
            plugins: [
                '@babel/plugin-proposal-class-properties',
                '@babel/plugin-syntax-dynamic-import',
                '@babel/plugin-transform-classes',
                '@babel/plugin-transform-runtime',
                '@babel/plugin-transform-modules-commonjs'
            ],
            presets: [
                [
                    '@babel/preset-env',
                    {
                        targets: {
                            browsers: [
                                'chrome >= 55',
                                'firefox >= 52',
                                'safari >= 7',
                                'edge >= 13',
                                'ie 11'
                            ]
                        }
                    }
                ]
            ]
        }
    ],
    env: {
        development: {
            plugins: ['react-hot-loader/babel']
        },
        test: {
            presets: [['@babel/preset-env', {}]],
            plugins: [
                ['babel-plugin-webpack-alias-7', { config: './build_config/webpack.common.js' }],
                'istanbul'
            ]
        },
        production: {
            plugins: ['transform-react-remove-prop-types', 'recharts']
        }
    }
};

0 个答案:

没有答案