до свидания, вавилон-пресет-2015

Node.js внешний интерфейс JavaScript Babel

Я думаю, что многие одноклассники, как и я, каждый раз, когда они используют Babel, обязательно выбирают пресет ES2015.

Однако совсем недавно, если вы снова установите babel-preset-es2015

npm install --save-dev babel-preset-es2015

Вы найдете следующее устаревшее предупреждение (весёлый текст):

babel-preset-es2015@6.24.1: Мы очень 😸 рады, что вы пытаетесь использовать синтаксис ES2015, но вместо того, чтобы делать больше ежегодных пресетов 😭 , у Babel теперь есть лучший пресет, который мы рекомендуем вам использовать: npm install Вавилон-предустановка-окружение --save-dev.preset-env без опций скомпилирует ES2015+ до ES5 так же, как и использование всех предустановок вместе, и, таким образом, более перспективен.Это также позволяет вам ориентироваться на определенные браузеры, чтобы Babel мог выполнять меньше работы и вы можете отправить нативную версию ES2015+ пользователю 😎 Мы также находимся в процессе выпуска v7, поэтому, пожалуйста, дайтеhttp://babeljs.io/blog/2017/09/12/planning-for-7.0прочитайте и помогите протестировать его в бета-версии Большое спасибо за использование Babel 🙏, пожалуйста, дайте нам подписку на Twitter @babeljs для получения новостей о Babel, присоединяйтесьhttp://slack.babeljs.io for discussion/development and help support the project at opencollective.com/babel

Да, в третьем квартале 2017 года мы окончательно попрощаемся с пресетом ES2015.

Итак, вы можете спросить, переходим ли мы на ES2017? Это не так, babel-preset-es2017 просто добавляет некоторые функции и по-прежнему требует установки ES2015. Ну, не будем об этом, ответ-

привет Babel-пресет-env

Официальный сайт Babel анонсировал пресеты ES2015/ES2016/ES2017 и т.д. ES20xx эпохи отказались от всех (устарели) в сентябре, замененыbabel-preset-env, и обещает, что это будет решение, ориентированное на будущее.

В прошлом Вавилонbabel-preset-es2015помещатьbabel/babelподдерживается в основном репозитории, а babel-preset-envНезависимый как проект первого уровня, что в какой-то мере также показывает, насколько официальные представители Babel придают этому пресету и имеют долгосрочный план.

Как мигрировать

Чтобы сэкономить ваше время чтения, я сначала дам, как обновитьПростая версия:

Сначала удалите оригинальный пресет, затем установите babel-preset-env:

npm uninstall --save-dev babel-preset-es2015
npm install --save-dev babel-preset-env

Затем измените «env» с «es2015» в вашем файле .babelrc:

{
  "presets": [ "env" ],
  ...
}

Что ж, поздравляю, это так просто, вы уже можете идти в ногу с ES2015+!

Сделайте еще один шаг вперед

В официальном описании babel-preset-env упоминается, что это пресет, который может «автоматически» решать, какие плагины и полифилы загружать.Поскольку он называется «env», разработчик должен решить, в какой цели компиляции находится. , операционная среда.

вариант целей

Укажите совместимые типы и версии браузеров через цели (используяai/browserslistсинтаксис запроса):

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

Другими словами, вы можете уменьшить объем кода плагинов и полифилов, указав более высокую версию браузера, и напрямую использовать новые функции собственного ES6, что особенно подходит для Electron и мобильных приложений или тех приложений интрасети, для которых указан браузер. программа. Например, если в браузере установлена ​​более поздняя версия Chrome, встроенные классы, такие как Promise, Map и Set, не будут полифиллированы, а новые грамматики, такие как class, не будут переведены Babel, а класс ES6 вместо него будет использоваться тот, что поставляется с V8.

Если вы разрабатываете приложения Node.js, вы также можете указать версию Node:

{
  "presets": [
    ["env", {
      "targets": {
        "node": "6.10"
      }
    }]
  ]
}
Для удобства вы также можете написать «node»: «current» напрямую, что будет автоматически использовать версию Node.js, которую вы сейчас используете для запуска Babel.
Также можно указать опцию браузера в target.

В настоящее время в целевых средах поддерживаются почти все основные среды выполнения, включая IE, Chrome, Firefox, Opera, Edge, Safari, iOS Safari, Android, Node и Electron и т. д.

вариант модулей

Как и в прошлом, этот параметр используется для указания модульного подхода с поддержкой AMD, UMD, SystemJS, CommonJS и т. д. Конечно, в эпоху Webpack 2/3 рекомендуется устанавливать для модулей значение false, то есть позволить Webpack обрабатывать модуляризацию.Благодаря своей функции TreeShaking он эффективно уменьшит размер упакованного JS-файла:

{
  "presets": [
    ["env", {
      modules: false,
      ...
    }]
  ]
}
Начиная с Webpack 2, поддержка Native Import включается автоматически, поэтому дополнительная настройка для Webpack не требуется, подробности см. в другом моем ответе.Генри Ли: Каковы преимущества модулей ECMAScript 6 по сравнению с require(...) CommonJS?

Опция useBuiltIns и Polyfill

Это вариант про Polyfill, который я лично считаю самым большим удобством после этой миграции.Конечно, вам еще нужно установить дополнительный babel-polyfill (да, вам больше не нужны дополнительные преобразования)

npm install babel-polyfill --save

Когда USeBuiltins имеет значение USAGE, Babel автоматически добавляет ссылки Babel-polyfill при использовании новой функции ES2015 + и является ссылкой для частичного уровня.

Например:

const promise = new Promise();
const map = new Map();

будет переведено на:

import "babel-polyfill/core-js/modules/es6.map";
import "babel-polyfill/core-js/modules/es6.promise";

var promise = new Promise();
var map = new Map();

Многие люди привыкли внедрять babel-polyfill в вендор сразу. Раньше это приводило к тому, что весь пакет babel-polyfill упаковывался в вендор, что теряло гибкость и облегчало разработку. Теперь вы можете установить useBuiltIns как запись, Babel автоматически оптимизирует:

Например:

поставщик.js:

import 'babel-polyfill';

index.js:

const promise = new Promise();
const map = new Map();

В конце концов vendor.js будет переведен на:

import "babel-polyfill/core-js/modules/es6.map";
import "babel-polyfill/core-js/modules/es6.promise";

как насчет этого? Разве это не супер «умно»!

До свидания, Babel-пресет-es2015

Теперь можно смело сказать, что пришло время попрощаться с babel-preset-es2015.

babel-preset-env в настоящее время активно обновляется. Дополнительные параметры babel-preset-env см.babel/babel-preset-env.

О колонке

Если вам понравилась эта статья, пожалуйста, подпишитесь на мою колонку«Внешний нулевой стек», давайте вместе поговорим о фронтенд-технологиях и фронтенд-инжиниринге.

«Внешний нулевой стек»После открытия рубрики последовательно были опубликованы две статьи. Мне очень повезло, что эти две статьи были выбраны друзьями и бизнесменами для рекомендации еженедельника. Добро пожаловать, чтобы продолжать обращать внимание.Нулевой стек моего внешнего интерфейса столбца - знай столбец.

Об авторе

Henry, работал в научно-исследовательском центре Alibaba в Нанкине, начал изучать компьютерное программирование в возрасте 10 лет и выиграл первый приз Молодежных информационных олимпиад в Цзянсу летом в старшей школе. В 2000 году начал самостоятельно изучать JavaScript и создание веб-страниц, а с 2006 года официально начал заниматься фронтенд-разработкой, занимается этим уже более 10 лет. До прихода в Alibaba он был менеджером по продуктам интеллектуальных транспортных больших данных в научно-исследовательском институте SAP China.

Гитхаб:MagicCube (Henry Li)

Категории