babel Basische Verwendung und Detailanalyse

Was ist babel?

Babel ist ein leistungsstarkes vielseitiges JS-Compiler - Klicken Sie hier einWebseite

Babel installieren

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

Babel-Konfigurationsdatei

durch .babelrc dargestellt

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

presets zum Speichern einiger Voreinstellungen

plugins zum Speichern einiger Plugins　

einfache Verwendung der Kommandozeile

Wir können -o (--out-file) Parameter verwenden, um eine Datei zu kompilieren

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

Wenn wir den gesamten Verzeichnis kompilieren möchten -d (}--out-dir) Parameter

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

Präsetz

Jetzt haben wir einen es6Code, wir möchten das Babel verwenden, um diesen Code zu kompilieren, im Moment ist der kompilierte Code fast vollständig kopiert worden

es6.js

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

Wir können Babel installieren-preset-es2015um es zu parsen2015Syntax

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

Dann durch die Konfiguration der Datei .babelrc

{
 "presets": ["es"2015"]
}

So können wir die für es2015Die Syntax wurde geparst. Schließlich durch die Konfiguration von package.json scripts

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

Gehen Sie einfach in der Befehlszeile

npm run build

Plugin

In Babel gibt es viele, viele Plugins, zum Beispiel wie können wir den folgenden Code in die Form umwandeln, um umd zu machen??

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

Zunächst finden Sie das entsprechende Plugin babel-plugin-transform-es2015-modules-umd, installieren Sie dieses Plugin

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

In der Konfiguration einführen

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

Dann ist das das, was wir haben, nach der Kompilierung

(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) {
 "strict";
 Object.defineProperty(exports, "__esModule", {
 Wert: wahr
 });
 var sum = function sum(a, b) {
 return a + b;
 }
 exports.default = sum;
 module.exports = exports["default"];
});

集成gulp

babel可以单独使用，也可以配合构建工具（gulp、webpack等）进行集成

首先需要下载gulp和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'])

配置package.json中的scripts

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

最后执行命令

npm run dev

以上就是本文的全部内容，希望本文的内容对大家的学习或工作能带来一定的帮助，同时也希望多多支持呐喊教程！

声明：本文内容来源于网络，版权归原作者所有。内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#oldtoolbag.com（在发送邮件时，请将#替换为@进行举报，并提供相关证据。一经查实，本站将立即删除涉嫌侵权内容。）