Используйте Babel для переноса определенных узловых модулей в es5 - PullRequest
Новая
       4

Используйте Babel для переноса определенных узловых модулей в es5

0 голосов
/ 05 июня 2019

Этот вопрос касается переноса node_modules из es6 в es5.

Проект, над которым я работаю, должен поддерживать ie11, который в настоящее время нарушен из-за наличия зависимостей, которые не передаются в es5. Я вижу в консоли вывод строки, которая нарушает работу сайта. Существует зависимость, называемая randexp, которая экспортирует класс, и она не использует babel для переноса кода. Я указал в своем babel.config.js значение переопределения с помощью регулярного выражения для некоторых модулей, которые я определил как не переносимые в es5.

Вот мои 2 основных вопроса:

  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']
        }
    }
};
...