Конфигурационный файл Babel Подробности записи Babelrc

JavaScript React.js Webpack Babel

Что такое Вавилон

Официальное объяснение — это компилятор синтаксиса JavaScript следующего поколения.

Поскольку это стандарт следующего поколения Javascript, браузеры будут иметь проблемы с совместимостью из-за разных версий, и нельзя будет использовать новые методы JavaScript, но в настоящее время мы выступаем за использование новейшего синтаксического сахара при разработке проектов, который может не только сократить код. Кроме того, новые функции, такие как async и await, также решают механизм написания обратного вызова и снижают стоимость обслуживания кода.

Так родился Babel, который позволяет использовать большинство новых стандартных методов JavaScript, а затем компилирует их в код, совместимый с большинством основных браузеров. В инженерной структуре проекта файл .babelrc обычно используется для упаковки и сжатия с помощью веб-пакета путем настройки некоторых параметров. Так же я узнал из интернета, что способы написания разные, да и параметры тоже сильно отличаются, поэтому я реорганизовал документ и подробно представил значение каждого пункта конфигурации, чтобы четко понимать как им пользоваться.

Следующая конфигурация в основном предназначена для метода записи webpack3+.

Babel Translator

В конфигурационном файле .babelrc в основном настраиваются пресеты и плагины, поэтому разные трансляторы имеют разные элементы конфигурации, которые можно условно разделить на следующие три элемента:

1. Экранирование синтаксиса. В основном он компилирует последний синтаксический сахар javascript и не отвечает за перевод недавно добавленных API и глобальных объектов javascript. Например, let/const может быть скомпилирован, но include/Object.assign и т. д. не могут быть скомпилированы. Обычно используемые пакеты переводчиков: babel-preset-env, babel-preset-es2015, babel-preset-es2016, babel-preset-es2017, babel-preset-latest и т. д. В реальной разработке вы можете использовать babel-preset-env только для замены остальных, но его также необходимо использовать вместе с производственной спецификацией javascirpt, которая также официально рекомендуется.

{
  "presets": ["env", {
      "modules": false
    }],
    "stage-2"
}

2. Заплатка бегунка. Он в основном отвечает за перевод недавно добавленных API и глобальных объектов javascript.Например, плагин babel-plugin-transform-runtime может компилировать Object.assign, а также может вводить babel-polyfill для дальнейшего обеспечения совместимости в браузерах для использование включает. Object.assign будет скомпилирован в следующий код:

__WEBPACK_IMPORTED_MODULE_1_babel_runtime_core_js_object_assign___default()

3. jsx и плагины потока, этот тип транспилятора используется для перевода синтаксиса JSX и удаления объявлений типов. Вы будете использовать его при использовании Rect. Имя транспилятора — babel-preset-react

Создать пресеты

В основном используется при установке плагина babel-preset-xx через npm, например, через npm install babel-preset-stage-2 babel-preset-env --save-dev Установка, будет следующая конфигурация.

{
  "presets": [
    ["env", options],
    "stage-2"
  ]
}
конфигурация этапа 2

Babel в основном предоставляет следующие escape-пакеты, в скобках указаны элементы конфигурации соответствующего файла конфигурации.

babel-preset-stage-0(stage-0) 
babel-preset-stage-1(stage-1) 
babel-preset-stage-2(stage-2) 
babel-preset-stage-3(stage-3)

Включены транспиляторы на разных стадиях.В дополнение ко всем функциям пресета-этапа-1, транслятор пресета-этапа-0 также добавляет плагин transform-do-expressions и плагин transform-function-bind. Переводчик stage-1 включает в себя все функции предустановки stage-2 с некоторыми дополнительными функциями.

Введение в настройку параметров

Официально рекомендуется использовать babel-preset-env для замены установки некоторых пакетов плагинов (es2015-arrow-functions, es2015-block-scoped-functions и т. д.), и есть следующая информация о конфигурации, представляющая несколько часто используемые,

Дополнительные сведения о настройке см. на официальном сайте https://babeljs.io/docs/plugins/preset-env/.

{
    "targets": {
        "chrome": 52,
        "browsers": ["last 2 versions", "safari 7"],
        "node":"6.10"
    }
    "modules": false
}

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

target.node компилирует версию узла

модули обычно имеют значение false, потому что по умолчанию поддерживается спецификация CommonJS, и есть другие параметры конфигурации: "amd" | "umd" | "systemjs" | "commonjs", systemjs Я не знаю, что такое спецификация , amd, umd и commonjs относительно знакомы, а спецификации написания кратко перечислены ниже.

Спецификация кода amd больше используется в ng1, в основном для внедрения зависимостей:

define(['jquery'], function ($) {
    //    方法
    function myFunc(){};
 
    //    暴露公共方法
    return myFunc;
})

Спецификация commonjs также является спецификацией, уважаемой в среде узла:

var $ = require('jquery');
//    方法
function myFunc(){};
 
//    暴露公共方法（一个）
module.exports = myFunc;
{% endcodeblock %}
>umd规范，兼容amd以及commonjs规范，目前在第三方插件编写使用比较多：
{% codeblock lang:javascript %}
(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS之类的
        module.exports = factory(require('jquery'));
    } else {
        // 浏览器全局变量(root 即 window)
        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) {
    //    方法
    function myFunc(){};
 
    //    暴露公共方法
    return myFunc;
}));

Плагины

Элементы конфигурации подключаемых модулей аналогичны предустановленным элементам конфигурации. Они должны быть настроены с соответствующими подключаемыми модулями Babel. Вы можете настроить подключаемые модули в соответствии с одним требованием. Например, в начале дней у нас будут следующие конфигурации:

{
  "plugins": [
    "check-es2015-constants",
    "es2015-arrow-functions",
    "es2015-block-scoped-functions",
    // ...
  ]
}

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

{
  "presets": [
    "es2015"
  ]
}

Здесь в основном представлены два общих плагина, а именно babel-plugin-transform-runtime и babel-plugin-syntax-dynamic-import.

Базовый код конфигурации выглядит следующим образом:

{
  "plugins": [
    "syntax-dynamic-import",["transform-runtime"]
  ]
}

transform-runtime

Чтобы решить проблему недостаточной компиляции глобальных объектов или методов глобальных объектов, появился плагин transform-runtime, но он преобразует только синтаксис es6, а не новый API. Проблемы совместимости также можно обойти, используя babel-polyfill, если вам нужно преобразовать новый API.

Скомпилируйте фрагменты кода Object.assign, configure и unconfigured, скомпилированные webpack, следующим образом:

// 未设置代码片段：
__webpack_require__("ez/6");
var aaa = 1;

function fna() {
  var dd = 33333;
  var cc = Object.assign({ key: 2 });
  var xx = String.prototype.repeat.call('b', 3);
  if ("foobar".String.prototype.includes("foo")) {
    var vv = 1;
  }

  return dd;
}

// 设置代码片段：
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_babel_runtime_core_js_object_assign___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_babel_runtime_core_js_object_assign__);

__webpack_require__("ez/6");
var aaa = 1;

function fna() {
  var dd = 33333;
  var cc = __WEBPACK_IMPORTED_MODULE_1_babel_runtime_core_js_object_assign___default()({ key: 2 });
  var xx = String.prototype.repeat.call('b', 3);
  if ("foobar".String.prototype.includes("foo")) {
    var vv = 1;
  }

  return dd;
}

Класс определения класса будет скомпилирован, а фрагменты кода, скомпилированные webpack с конфигурацией и без нее, будут следующими:

// 未设置代码片段：
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Canvas = function Canvas(height, width) {
  _classCallCheck(this, Canvas);

  this.height = height;
  this.width = width;
};

var Canvas2 = function Canvas2(height, width) {
  _classCallCheck(this, Canvas2);

  this.height = height;
  this.width = width;
};

// 设置代码片段：
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck__);

var Canvas = function Canvas(height, width) {
  __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck___default()(this, Canvas);

  this.height = height;
  this.width = width;
};

var Canvas2 = function Canvas2(height, width) {
  __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck___default()(this, Canvas2);

  this.height = height;
  this.width = width;
};

Функция генератора также имеет тот же эффект компиляции, что и выше.В настоящее время эта функция используется в небольших проектах в проекте.В основном вместо обещания используется, и используется асинхронное ожидание, поэтому эта функция не тестировалась.

Чиновник сказал, что обещание также будет скомпилировано, но фактический результат теста не имеет никакого значения.

После финального теста упаковки webpack, после введения элемента конфигурации transform-runtime, размер упакованного файла записи js немного увеличится, что не так официально, так как может уменьшить размер файла.

Эффект ненастроенной окончательной упаковки:

Окончательный эффект упаковки после настройки:

Хотя размер файла увеличится, это решит некоторые проблемы совместимости.В то же время, из примера тестового кода, приведенного выше, после использования transform-runtime определение внутренних глобальных функций может быть уменьшено, что соблюдается со структурной точки зрения. вид Модульная идея вебпака, поэтому все же рекомендуется использовать этот плагин.

syntax-dynamic-import

Этот плагин в основном решает проблему динамического импорта модулей.

function nDate() {
  import('moment').then(function(moment) {
    console.log(moment.default().format());
  }).catch(function(err) {
    console.log('Failed to load moment', err);
  });
}

nDate();

Если в элементе конфигурации .babelrc используется «стадия-2», этот плагин также можно отключить, а также поддерживается динамическое введение модулей.

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

  • Ошибка сборки модуля: SyntaxError: «импорт» и «экспорт» могут отображаться только на верхнем уровне или

  • Module build failed: SyntaxError: Unexpected token, expected {

Другие элементы конфигурации

ignore

Основная функция - указать, что эти коды не должны компилироваться

{
  "ignore":["./module/a.js"]
}

let, Object.assign, определения классов не компилируются, эффект компиляции следующий:

__webpack_require__("ez/6");
const aaa = 1;

function fna () {
  let dd = 33333
  let cc = Object.assign({key:2})
  let xx = String.prototype.repeat.call('b', 3)
  if ("foobar".String.prototype.includes("foo")) {
    let vv = 1
  }

  return dd
}

function fna2 () {
  return fna() + aaa + __WEBPACK_IMPORTED_MODULE_0__b__["a" /* default */]
}

class Canvas {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

class Canvas2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

minified

В основном задайте, сжимается ли он после компиляции, логический тип, если вы используете babel-cli для упаковки и компиляции файлов, этот элемент конфигурации может играть роль, но большинство из них по-прежнему полагаются на сторонние инструменты упаковки, такие как веб-пакет, поэтому этот параметр конфигурации обычно не нужно устанавливать, UglifyJsPlugin в плагине webpack выполняет сжатие.

comments

В полученном файле без комментариев, логический тип, плагин веб-пакета UglifyJsPlugin также интегрирует эту функциональность.

env

Базовая конфигурация выглядит следующим образом:

{
  "env": {
    // test 是提前设置的环境变量，如果没有设置BABEL_ENV则使用NODE_ENV，如果都没有设置默认就是development
    "test": {
      "presets": ["env", "stage-2"],
      // instanbul是一个用来测试转码后代码的工具
      "plugins": ["istanbul"]
    }
  }
}

Еще раз о совместимости

Babel по умолчанию преобразует только новый синтаксис JavaScript, а не новые API, такие как глобальные объекты, такие как Iterator, Generator, Set, Maps, Promise, и некоторые методы, определенные для глобальных объектов (например, Object.assign), не будут преобразованы. вы можете обратиться к модулю babel-plugin-transform-runtime для получения подробной информации.definitions.jsдокумент.

В основном это связано с проблемами совместимости браузера после компиляции babel.Как правило, transform-runtime и babel-polyfill используются вместе.Для последнего нужно только указать в файле записи проекта.

Конечно, при использовании Object.assign аналогичные функциональные возможности могут использоваться вместо библиотеки lodash, Promise и т.д., может использоваться альтернативный вариант Q.js, для этого может не потребоваться зависимый плагин, представленный выше, конкретные элементы могут быть расположены в соответствии с конкретными

Суммировать

Файл конфигурации .babelrc в основном состоит из пресетов и плагинов и используется вместе с webpack для обмена конфигурацией, которую мы обычно используем в проекте. Все вышеизложенное подытожено путем обучения, если что-то не так, я надеюсь указать.

Конфигурация, используемая для разработки проекта Vue, выглядит следующим образом:

{
  "presets": [
    ["env", {
      "modules": false
    }],
    "stage-2"
  ],
  // 下面指的是在生成的文件中，不产生注释
  "comments": false,
  "plugins": ["transform-runtime","syntax-dynamic-import"],
  "env": {
    // test 是提前设置的环境变量，如果没有设置BABEL_ENV则使用NODE_ENV，如果都没有设置默认就是development
    "test": {
      "presets": ["env", "stage-2"],
      // instanbul是一个用来测试转码后代码的工具
      "plugins": ["istanbul"]
    }
  }
}

Конфигурация, используемая для разработки реактивного проекта, выглядит следующим образом:

{
  "presets": [
    ["env", { "modules": false }],
    "stage-2",
    "react"
  ],
  "plugins": ["transform-runtime"],
  "comments": false,
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
}

18.11.2018 Дополнение к внедрению stage-x

stage-3 включает в себя следующие плагины:

  transform-async-to-generator поддерживает async/await

  transform-exponentiation-operator поддерживает синтаксический сахар оператора возведения в степень

stage-2 включает в себя все плагины stage-3, а также следующие плагины:

  syntax-trailing-function-commas поддерживает функцию завершающей запятой, э... очень безвкусно

  transform-object-reset-spread поддерживает деструктурирование назначения объектов

stage-1 включает в себя все плагины stage-2, а также следующие плагины:

  transform-class-constructor-call поддерживает конструкторы классов

Свойства преобразования-класса поддерживают статические свойства классов

  transform-decorators поддерживает шаблон декоратора es7, а именно @, что на самом деле является очень полезной функцией, и это хороший синтаксический сахар для HOC

  transform-export-extensions поддерживает метод экспорта

stage-0 включает в себя все плагины stage-1, а также следующие плагины:

  transform-do-expressions поддерживает запись if/else в jsx

  transform-function-bind поддерживает оператор :: для переключения контекста, аналогичный es5 bind   

10.12.2018 Дополнительное использование babel-plugin-syntax-dynamic-import

Спасибо @Daniel No.1 за поднятый вопрос.После тестирования при использовании webpack версии 4.20.2 и выше (другие версии выше 4 пока не тестировались) этот плагин не требуется, а конфигурация этапа 2 также не требуется. Можно поддерживать тот же импорт и динамический импорт. Для базового использования обратитесь к следующим примерам:

function nDate() {
  import('moment').then(function(moment) {
    console.log(moment.default().format());
  }).catch(function(err) {
    console.log('Failed to load moment', err);
  });
}

nDate();
Категории