Подробное объяснение базового использования babel

Что такое babel?

Babel - это мощный многофункциональный компилятор js, перейдите сюдаОфициальный сайт

Установить babel

npm install -g babel-cli 
npm install --save-dev babel-cli

Конфигурационный файл babel

表示 через .babelrc

{
 "presets": [ ],
 "plugins": [ ]
}

Presets используются для хранения некоторых предустановок

Plugins используются для хранения некоторых плагинов　

Простое использование командной строки

Мы можем использовать параметр -o (--out-file) для компиляции одного файла

babel es6.js -o es5.js / babel es6 --out-file es5.js

Если мы хотим компилировать весь каталог -d (--out-dir) параметр

babel src -d build / babel src --out-dir build

Предустановки

Теперь у нас есть一段 кода es6, который мы хотим компилировать с помощью babel, и в настоящее время компилированный код几乎是 дословно скопирован

es6.js

var add = (a,b) =>{
 console.log(a+b)
}
add(1,2)

Мы можем установить babel-preset-es2015 для анализа синтаксиса es2015

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

Затем через конфигурацию файла .babelrc

{
 "presets": ["es2015"]
}

Таким образом, мы можем выполнить анализ синтаксиса ES2015. В конце через конфигурацию package.json в scripts

"scripts": {
 "build" : "babel src -d build -w"
 }

Далее напрямую в командной строке

npm run build

Плагин

В Babel есть множество плагинов, например, как преобразовать следующий фрагмент кода в формат UMD?

var add = (a,b) =>{
 console.log(a+b)
}
add(1,2)

Сначала найти соответствующий плагин babel-plugin-transform-es2015-modules-umd, установить плагин

npm install --save-dev babel-plugin-transform-es2015-modules-umd

В конфигурации включить

{
 "presets":["es2015"],
 "plugins":["transform-es2015-modules-umd"]
}

Затем после компиляции мы получим то, что хотели.

(function (global, factory) {
 if (typeof define === "function" && define.amd) {
 define(["module", "exports"], factory);
 } else if (typeof exports !== "undefined") {
 factory(module, exports);
 } else {
 var mod = {
  exports: {}
 };
 factory(mod, mod.exports);
 global.sum = mod.exports;
 }
})(this, function (module, exports) {
 "use strict";
 Object.defineProperty(exports, "__esModule", {
 value: true
 });
 var sum = function sum(a, b) {
 return a + b;
 };
 exports.default = sum;
 module.exports = exports["default"];
});

Интеграция gulp

babel можно использовать отдельно, а также комбинировать с инструментами для 构建 (gulp webpack и т.д.)

Сначала загрузите gulp и соответствующий плагин babel

npm install gulp gulp-babel --save-dev

Создайте gulp конфигурацию gulpfile.js

const gulp = require('gulp')
const babel = require('gulp-babel')
gulp.task('babel', ()=>{
 return gulp.src('src/**/*.js')
  .pipe(babel())  
  .pipe(gulp.dest('dist'))
}
gulp.task('default', ['babel'])

Настройте scripts в package.json

"scripts": {
 "dev": ".\node_modules\.bin\gulp"
 }

В конце выполнения команды

npm run dev

Вот весь контент этой статьи, надеюсь, что содержимое статьи поможет вам в изучении или работе, также希望大家多多支持呐喊教程！

Объявление: содержимое этой статьи взято из Интернета, авторские права принадлежат их законным владельцам, содержимое предоставлено пользователями Интернета, веб-сайт не имеет права собственности, не был отредактирован вручную и не несет ответственности за связанные с этим法律责任. Если вы обнаружите материалы,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма замените # на @) для сообщения о нарушении и предоставьте соответствующие доказательства. При подтверждении факта нарушения, сайт незамедлительно удалят涉嫌侵权的内容.