Laravel Mix: настройка Babel для совместимости с IE11 (преобразования и полифилы) - PullRequest
Новая
       73

Laravel Mix: настройка Babel для совместимости с IE11 (преобразования и полифилы)

0 голосов
/ 02 ноября 2019

В приложении Laravel 6 с Laravel-Mix 4 и с использованием предустановки Vue мне нужно скомпилировать код JavaScript для совместимости с IE11. Это означает добавление любых поли-заливок для отсутствующих функций, компиляцию функций стрелок и так далее. Из коробки это не сделано.

Мой тестовый код в resources/js/app.js: 

//require('./bootstrap');
let test = [1, 2, [3, 4]];
console.log(
    test.flat().map((x) => 2*x)
);

При настройке по умолчанию, laravel mix не компилирует код JavaScript, а только делаетнекоторое форматирование. Комментарии сохраняются в скомпилированном выводе.

Результат npm run dev: 

       Asset      Size   Chunks             Chunk Names
/css/app.css   0 bytes  /js/app  [emitted]  /js/app
  /js/app.js  4.95 KiB  /js/app  [emitted]  /js/app

Как мне заставить Laravel-Mix использовать Babel для создания IE11-совместимого исходного кода?

1 Ответ

0 голосов
/ 04 ноября 2019

Включение компиляции Babel с помощью Laravel Mix и использование полизаполнений для Internet Explorer

Шаг 1. Установите Corejs для получения полифиллов

Следуя документации Babeljs для babel-preset-env 2 Сначала нам нужно установить core-js (который содержит полифилы): 

$ npm install core-js@3 --save

Шаг 2. Сконфигурировать .babelrc

создать файл .babelrc в корне проекта:

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "usage",
                "corejs": {
                    "version": 3,
                    "proposals": false
                },
                "targets": {
                    "ie": "11"
                }
            }
        ]
    ]
}

Теперь запустите npm run dev, и вы найдете вставленные полифилы, скомпилированные функции стрелок и т. Д. - ваш код может просто работать на IE11!

Laravel-Mix, Babel, IE:Некоторые gotchas

node_modules не обрабатываются с помощью babel

При конфигурации по умолчанию только исходный код в самом проекте, а не его зависимости, проходит через этап компиляции babel. Это означает, что любой let или аналогичный в зависимостях отключит устаревшие браузеры 3 .

, используя `mix.babel ', рискуя скомпилировать файл дважды

LaravelСмешанные документы предлагают использовать функцию mix.babel в разделе Vanilla JS 1 . Как это выглядит:

  • , если нет .babelrc, указанный файл запускается через babel.
  • , если присутствует .babelrc, обычный шаг компиляции миксауже использует babel. Использование mix.babel приводит к тому, что шаг компиляции запускается дважды.

Интересно, что дважды скомпилированный код не запускается в IE. Одна проблема состоит в том, что он будет содержать вызовы require () для полифиллов, которые не могут быть обработаны: 

SCRIPT5009: 'require' is undefined
...