Babel
Официальное введение: Преобразование кода JavaScript ECMAScript 2015 и более поздних версий в код JavaScript старой версии браузера или обратно совместимой версии в среде.
Короче говоря, это преобразование несовместимого кода JavaScript в совместимый исполняемый код JavaScript.
Функция:
Преобразование синтаксиса
Добавьте некоторые функции полифилла совместимости
Преобразование исходного кода и т. д.
Простой предварительный просмотр конфигурации:
{
"plugins": [], // 插件配置
"presets": [] // 预设配置
}
// 这里 .babelrc 配置的
// 官网建议用 module 的形式来配置，bable.config.js
const presets = []
const plugins = []
module.exports = { presets, plugins }
Введение в конфигурацию:
Предустановки: представляет собой сборник плагина определенного типа, включая все функции определенного типа плагина.
Плагин: код, преобразованный в браузер, может выполнять код.
Составить порядок выполнения:
1. Выполнить все плагины в плагинах
2. Плагины плагинов компилируются по порядку
3. Все плагины плагинов выполняются, и пресеты выполняются.
4. пресеты пресеты выполняются в обратном порядке. (выполнять с последнего)
5, полная компиляция.
1, введение основного плагина
babel-preset-es2015 (коллекция плагинов ES2015/ES6)
Преобразование кода JavaScript ES2015 (es6) в код JavaScript, совместимый с браузером
стрелочные функции: стрелочные функции
block-scoped-functions : способ именования функций изменен на форму присваивания
блок-область: пусть для var
классы: преобразование класса es6
Вычисляемые свойства: Преобразование имен свойств, таких как: var obj = {['x'+a]: 1}
деструктурирование : преобразование деструктора
дубликаты ключей: оптимизация атрибутов
for-of: преобразование for of
имя_функции : оптимизировать имя функции
InstanceOF: Instance Offration
литералы : различные типы оптимизации репликации
новая цель: наследование расширяет преобразование
объект-супер: супер трансформация
Параметры: params, (a=1,b=2)=>{} , преобразование параметра по умолчанию
сокращенные свойства: преобразование свойств объекта {a,b} => {a:a,b:b}
распространение : преобразование расширенного атрибута {...другое}
sticky-regex : оптимизация регулярных выражений, созданная с помощью нового регулярного выражения
шаблонные литералы: строковые шаблоны
typeof-symbol : преобразование символов
unicode-regex : конвертировать обычные совпадающие строки в юникод
babel-preset-es2016 (коллекция плагинов ES2016/ES7)
Преобразование кода JavaScript ES2016 (es7) в код, совместимый с браузером
оператор возведения в степень : преобразование возведения в степень x **= 3 , третья степень x
babel-preset-es2017 (коллекция плагинов ES2017/es8)
Преобразование кода ES2017 (es8)
async-to-generator: преобразование async/await в функцию генератора
babel-preset-stage-x (коллекция плагинов ES2018/stage)
Преобразование кода в стадии стадии
async-generator-function: преобразование асинхронных функций
dotall-regex : оптимизация точечного регулярного выражения
object-rest-spread : оптимизация структуры анализа
option-catch-binding: catch плюс, наконец, оптимизация
unicode-свойство-regex
Модули
модули-amd/модули-commonjs/модули-systemjs/модули-umd
Преобразование различных экспортных значений x по умолчанию в различные формы модуля amd / commonjs / systemjs / umd
Экспериментальный (экспериментальная фаза)
class-properties: статическое преобразование свойств класса
декораторы : преобразования декораторов
do-выражения
export-default-from : оптимизация экспорта
export-namespace-from : оптимизация экспорта
function-bind : преобразование функции привязки, obj::fun => fun.bind(obj) ::obj.fun => obj.fun(obj)
функция отправлена
логические операторы присваивания
нулевой-объединяющий-оператор
Числовой разделитель
необязательная цепочка
оператор трубопровода
Throw-выражения
БытьМинификация (Вавилон-минимизация)
Используйте сжатие кода для оптимизации пресетов плагинов
...
Здесь вы можете перейти на официальный сайт, чтобы проверить...
babel-preset-react (коллекция реакций)
Релевантная компиляция и преобразование реакции...
Преобразование jsx и элемента
Просто добавьте реагирующие пресеты напрямую.
Другие плагины
jscript: именование строгого режима
object-assign : назначить конверсию
регенератор: преобразование функции генератора
object-set-prototype-of-to-assign : преобразование setPrototype
время выполнения
2. Знакомство с основными пресетами
@ Babel / Preset-Dev
умная предустановка.
Автоматически определяйте плагины и полифиллы babel на основе браузеров и сред выполнения.
Без какой-либо настройки, то же, что и babel-preset-latest (используется с es2015/es2016/es2017).
{
"presets": [ "dev" ]
}
Конфигурация и ее подробное объяснение:
{
"presets": [
[
'@babel/preset-env',
{
'target':{
"browser":["ie>=8","chrome>=62"],
"node":"8.9.0",
"safari":"tp"
},
"modules":false,
"debug":true,
"uglify":true
"useBuiltIns":true
}
]
]
}
target : описывает поддерживаемую/целевую среду, которую вы настроили для своего проекта.
browsers: поддержка браузера, вернет список поддерживаемых браузеров. будет перезаписан target.ie
[ 'ie>=8' ] среда, поддерживающая ie8
"по умолчанию" по умолчанию
node : укажите среду узла, и вы можете указать версию
сафари: версия сафари
модули: включить es6 в другие модули
отладка: включить ли console.log
include/exclude: функции плагина, которые должны быть включены/функции плагина, которые не включены
uglify : сжать код
использоватьВстроенные:
False : ссылка на все babel-polyfills, добавление записи babel-polyfill в webpack:
.entry:['babel-polyfill', 'index.js'] , ссылаться на все полифиллы, объем становится больше
true : в справочной части, в соответствии с настроенной средой Preset-env, обратитесь к polyfill ,
Для ссылки на babel-polyfill в файле ввода
@babel/preset-react
Это некоторые коллекции, связанные с реакцией
Представление не требуется, вам нужно зайти на официальный сайт, чтобы просмотреть его самостоятельно.
Stage-x
Предварительная тяга ..
Эта коллекция плагинов не существует в коллекции preset-env, поэтому на нее нужно ссылаться....
3. Метод, совместимый с Babel-polyfill
Предварительная установка Babel преобразует только новый синтаксис Javascript, а не новый API.
Например: Генератор/Набор/Карта и т.д.
Это означает, что в коде, преобразованном в вавилон, все еще есть несовместимые коды.
принцип:
Babel-folyfill заключается в изменении прототипа глобального объекта, добавлении несовместимых методов API или изменении несовместимых методов API.
Применение:
1. Добавьте вверху входного файла:
require('@babel-polyfill');
import '@babel-polyfill'
2. Добавить в вебпак
{
entry:['@babel-polyfill','./app.js']
}Добавьте его в файл конфигурации webpack.
3. Ссылка непосредственно в html перед упаковкой js-файлов
4. Плагин времени выполнения преобразования
Снова преобразуйте код, преобразованный babel, чтобы разрешить несовместимые глобальные API, такие как babel-polyfill.
В отличие от babel-polyfill он не добавляет/не изменяет глобальные объекты.
Это специальная обработка несовместимых методов, то есть добавление вспомогательных методов, чтобы сделать их совместимыми.
Когда требуется совместимое преобразование, на него ссылаются на среду выполнения преобразования.
transform-runtime зависит от babel-runtime, и все вспомогательные методы относятся к babel-runtime.
Функции:
Не загрязняет глобальные переменные, потому что глобальные объекты не изменяются
Невозможно изменить экземпляр, поэтому некоторые методы не могут быть реализованы.
["transform-runtime", {
"corejs":false,
"helpers": false,
"polyfill": false,
"regenerator": true,
"moduleName": "babel-runtime"
}]
helpers : использовать ли @babel-runtime/helpers вместо внутренних помощников
coresjs: следует ли заменить такие методы, как Map/Set, вспомогательными методами в @babel-runtime/corejs
polyfill : использовать ли вспомогательные функции @babel-runtime вместо полифилов
regenerator: использовать ли вспомогательные функции вместо асинхронных/генераторных функций
moduleName : имя ссылки
5, @ вавилонский регистр
Используйте @babel-register для регистрации всего текущего кода, который необходимо перекодировать.
var fs = require('fs');
var babelConfig = JSON.parse(fs.readFileSync('./.babelrc'));
require('babel-register')(babelConfig);
Очевидно, что здесь можно передать файл конфигурации .babelrc для настройки транскодирования.
Просто нужно добавить в файл записи.
Таким образом, на стороне узла можно реализовать транскодирование Babel.
6. инструменты
babel-parser: парсер babel для разбора Javascript/jsx/Typescript/flow и другого кода
babel-core: основной файл babel, используемый для транскодирования.
Babel-генератор: преобразование кода, исходный код и код преобразования
babel-code-frame : сопоставление транскодирования, такое как позиция преобразования кода
babel-helpers : вспомогательные методы
babel-runtime: предоставляет несколько вспомогательных методов для столбцов, похожих на полифилл.
...
Инструмент командной строки @bable/babel-cli
Он используется для компиляции файлов из командной строки и может выполнять такие операции, как настройка и вывод.
Применение:
babel input.js -options
// 编译 input.js 文件
Конфигурация:
-o : выходной путь
-W: контролировать файлы компиляции, компилировать в реальном времени
-s : выходная исходная карта, которую можно интровертировать
-d : при компиляции каталога -d печатает каталог
--ignore : файлы для игнорирования
--plugins : использовать плагины, разделенные ,
--presets : использовать пресеты, разделенные ,
--config-file : использовать путь к файлу .babelrc
Детали конфигурации .babelrc
Преобразования конфигурации играют три разные роли в Babel:
1. Конфигурация экранирования синтаксиса. Preset-env/stage-x в основном используется для экранирования синтаксиса es,
2. Конфигурация, используемая для патча, то есть конфигурация полифилла. Преимущественно преобразование времени выполнения.
3. Конфигурация под разные фреймворки, такие как: jsx/flow react и т.д.
пример:
{
"presets":[
"react",
["env",{...}],
"stage-0"
],
"plugins":[
"pluginName",
["transform-runtime",{...}]
],
"ignore":["path",'file'],
"miniied":boolean,
"comments":boolean,
"env":{
"test":{
"presets":[],
"plugins":[]
}
},
...
}
Основная конфигурация
пресеты: пресеты, набор плагинов, выполняемых в обратном порядке
Плагины: Плагины, сначала запустите плагины, затем запустите пресеты и выполните их последовательно.
ignore : файлы для игнорирования
уменьшите: уменьшите код
: common : нужны ли комментарии
env : установить разные среды, применить разные конфигурации, значение конфигурации: BABEL_ENV, если значение NODE_ENV не используется, по умолчанию используется разработка.
Остальные можно посмотреть на официальном сайте...
Общие пресеты
env : предустановлено для замены es2015/es2016/es2017. Внедряйте плагины в соответствии со средой
реагировать : коллекция плагинов для реагирования
реакция-оптимизация: оптимизация кода реакции, например, удаление propsType для сокращения производства вышеуказанного кода.
stage-x : Коллекция надстроек кода плагинов.
поток : коллекция плагинов потока
minify : набор оптимизаций кода
typescript : коллекция плагинов для машинописи
Общие плагины
transform-async-to-generator : плагин async/await для асинхронных функций
transform-decorators-legacy : Плагин декоратора
синтаксис-динамический-импорт: импорт () плагин
transform-runtime: вспомогательный плагин для ployfill
transform-object-rest-spread : для слияния var test = {a:1,b2};var t = {...test,n:1}
transform-funciton-bind : используется для компиляции obj::fun => fun.bind(obj)
transform-es2015-modules-commonjs: модуль es6 используется в узле
woo woo woo.cn blog on.com/Пойдем вместе/Боюсь/96…
мой блог : XiaoLong's Blog
Блог Пак заикается: https://www.cnblogs.com/jiebba