Как перекомпилировать модули node_modules с помощью babel-loader?

Проблема: я хочу создать пакетные файлы для веб-сайта для старых браузеров (> = IE10).

Мой транспилированный код вызывает ошибки в старом Internet Explorer 11, когда я транспилирую код с babel 7.x, используя 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, см. здесь.

Итак, после переименования файла конфигурации babel из ´.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)\/).*/, 
    },
],

Вопрос: Это похоже на обходной путь, но нет ли более удобного способа решения таких проблем? Я просто притворяюсь, что в ближайшем будущем будет все больше и больше нетрансформированных пакетов (после это обсуждение) и всегда ли мы должны вручную помещать имена пакетов для этого в exclude правило webpacks ??


person Michael    schedule 04.01.2019    source источник
comment
вы можете убедиться, что ничего не добавляете к exclude: [] опциям.   -  person PlayMa256    schedule 04.01.2019
comment
@ PlayMa256: Вы имеете в виду webpack.config.js? Я уже пробовал это, но это ничего не меняет. То же самое для добавления exclude: [] в конфигурацию .babelrc.js, без изменений.   -  person Michael    schedule 04.01.2019
comment
Взгляните на этот github.com/webpack/webpack/issues/2031   -  person AKT    schedule 04.01.2019
comment
Хорошо, это была проблема с Babel. Моя конфигурация babel была названа ´.babel.rc`, и где-то в игре babel изменил настройку по умолчанию для поиска файла конфигурации babel на babel.config.js, см. Здесь: babeljs.io/docs/en/options#configfile. Итак, после переименования файла конфигурации решение exclude: /node_modules\/(?!(MY_MODULE |ANOTHER-ONE)\/).*/, теперь работает нормально.   -  person Michael    schedule 07.01.2019
comment
Спасибо!!! В частности, эта страница помогла мне babeljs.io/docs/en / config-files # 6x-vs-7x-babelrc-loading   -  person Eric    schedule 18.04.2019


Ответы (1)


Вопрос: Кажется, это обходной путь, но нет ли более удобного способа справиться с такими проблемами? Я просто притворяюсь, что в ближайшем будущем будет все больше и больше нетрансформированных пакетов снаружи (после этого обсуждения), и всегда ли мы должны вручную помещать имена пакетов для него в правило исключения веб-пакетов ??

Вы можете использовать такие модули, как are-you-es5, для автоматического создания списка исключений или тестирования: 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 и ниже.

person otw    schedule 03.07.2020