Arhn - архитектура программирования

Webpack 4 + Babel 7.4.0 + Babel Polyfill

Я пытаюсь улучшить поддержку своего приложения, написанного на ES6, через @babel/polyfill и поддержку browserslist. Я выполнил все инструкции на https://babeljs.io/docs/en/babel-polyfill, но я думаю, что что-то упустил.

Моя browserslist поддержка определяется через мой package.json. Я проверяю, сработала ли установка, проверяя наличие полифила Array.from (который используется во всем коде).

Есть идеи, почему я не вижу полифилов в скомпилированном коде? Я использую для объявления полифилла в точке входа, но теперь в документации babel говорится, что в этом нет необходимости.

Если useBuiltIns: 'usage' указано в .babelrc, тогда не включайте @ babel / polyfill ни в массив записей webpack.config.js, ни в источник. Обратите внимание, что @ babel / polyfill все еще необходимо установить.

 ...
  "browserslist": [
    "last 2 version",
    "> 1%",
    "IE 10"
  ],
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/preset-env": "^7.4.2",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.0-beta.4",
    "babel-preset-env": "^1.7.0",
    "chromedriver": "^2.41.0",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "^1.0.0",
    "cssnano": "^4.1.4",
    "env2": "^2.2.2",
    "file-loader": "^1.1.11",
    "html-critical-webpack-plugin": "^2.1.0",
    "html-webpack-plugin": "^3.2.0",
    "lunr": "^2.3.5",
    "mini-css-extract-plugin": "^0.4.1",
    "nightwatch": "^0.9.21",
    "node": "^7.10.1",
    "node-sass": "^4.11.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "replace-in-file-webpack-plugin": "^1.0.6",
    "sass-loader": "^7.0.3",
    "selenium-server": "^3.14.0",
    "selenium-standalone": "^6.15.6",
    "style-loader": "^0.21.0",
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.2.1",
    "webpack-merge": "^4.1.3"
  },
  "dependencies": {
    "@babel/polyfill": "^7.4.0",
    "bootstrap": "^4.1.3",
    "handlebars": "^4.1.0",
  }

Мой .babelrc файл выглядит следующим образом:

{
    "presets": [
        [
            "@babel/preset-env", {
                "useBuiltIns": "usage"
            }
        ]
    ],
    "plugins": ["@babel/plugin-syntax-dynamic-import"],
}

Мой файл webpack выглядит так:

{
    test: /\.js$/,  
    use: {
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env']
        }
    }
}]
webpack javascript babeljs
29.03.2019

  • Ваш код работает должным образом во всех поддерживаемых браузерах? 29.03.2019
  • Нет, в IE10 / IE11 не работает (отсутствует полифилл Array.from) 29.03.2019
  • В этом случае вы можете захотеть импортировать @ babel / polyfill в компоненты, где находится ваш модный материал. По крайней мере, это то, что я имел в виду с Babel 7, webpack и т. Д ... 29.03.2019
  • Это то, что я сделал по умолчанию, но в документации сказано, что в этом нет необходимости, поэтому я хотел подтвердить. 29.03.2019
  • Документация по всему интерфейсу, который постоянно находится в состоянии бета-тестирования, никогда не бывает идеальной. Слишком много компонентов работают вместе - невозможно создать один стабильный рецепт. По крайней мере, таков мой опыт. 29.03.2019
  • Вы можете попробовать обновить ... @babel/preset-env (7.4.4) добавляет Array.from для меня, в том числе с вашей конфигурацией списка браузеров, и я использую Array.from в исходном коде. Не пробовал использовать ваш плагин (и я использую накопительный пакет с другими плагинами, если это имеет какое-либо влияние). 29.04.2019

Ответы:


1

Начиная с Babel 7.4.0, @ babel / polyfill устарела. В Babel 7.4.0 были внесены изменения в способ работы полифиллинга. Все полифиллы, которые были предоставлены в @ babel / polyfill, были предоставлены пакетом core-js. Babel 7.4 использует новейшую версию этого пакета, core-js @ 3, которая несовместима с предыдущей версией (core-js @ 2), поэтому нам придется внести некоторые изменения в нашу конфигурацию.

Вот что мы можем сделать сейчас:

  • Обновите @ babel / core и @ babel / preset-env

  • Удалите @ babel / polyfill из зависимостей. Поскольку core-js теперь используется непосредственно для полифиллов.

  • Установите последнюю версию core-js

npm install --save core-js@3

И, наконец, переход с core-js @ 2 на core-js @ 3

Поскольку версии 2 и 3 core-js несовместимы друг с другом, по умолчанию он не включен.

Если вы используете @ babel / preset-env, вам необходимо включить опцию corejs: 3 в .babelrc:

presets: [
  ["@babel/preset-env", {
    useBuiltIns: "usage", // or "entry"
    corejs: 3,
  }]
]

Как упоминалось, здесь

При использовании core-js 3 параметр useBuiltIns: "entry" не только преобразует импорт import "core-js", но также и регенератор-runtime / runtime и все вложенные точки входа core-js.

Для получения дополнительной информации перейдите по ссылке официальной документации.

Кроме того, теперь нам не нужно импортировать core-js в каждый другой файл, в котором находится наш модный материал.

30.07.2019
  • Основан ли этот подход на ручном импорте полифилов для всего где-то используемого сахара, как упоминается здесь в блоках ввода / вывода? Потому что я всю жизнь не заставляю это работать в более тупых браузерах. 30.07.2019
  • @HeinHaraldsonBerg, может быть, ты еще чем-то занимаешься. Пожалуйста, заполните меня. Я пробовал этот подход в Internet Eplorer 11 (например, async await), и мне не пришлось вручную импортировать полифиллы в какие-либо файлы, в которых есть сладкое, как я упоминал ранее. Пакет corejs просто должен быть в зависимостях проекта, и теперь он будет обрабатывать все полифилы. 31.07.2019
  • Я ожидал, что он тоже будет переносить такие вещи, как толстые стрелы, но может я ошибаюсь? Потому что даже если я укажу targets.ie = "11", сахар и синтаксис, например жирные стрелки, все равно будут присутствовать в собранном пакете. 31.07.2019

    • 2

    В компоненты, в которые добавлены ваши модные вещи, добавляются

    import "@babel/polyfill";

    По крайней мере, это то, что мне пришлось делать с Babel 7, Webpack 4 и React. Я знаю, что в документации сказано иное, но я не видел примеров, которые работали бы с моим стеком.

    29.03.2019
    Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..