前端

babel基本使用详解_javascript技巧_脚本之家

17 3月 , 2020  

什么是babel?

babel是贰个苍劲的多用场js编写翻译器 点击步入官方网址

安装babel

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

babel配置文件

通过.babelrc来表示

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

presets用来存放在一些预设

plugins用来寄存在一些插件

命令行的总结利用

大家得以经过 -o 参数来编写翻译三个文书

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

举个例子大家想编写翻译整个目录 -d 参数

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

预设

这两天有一段es6的代码,我们想要使用babel来编写翻译这段代码,
近些日子以来通过编写翻译后的代码差不离是稳如泰山的复制了回复

var add =  =>{ console.log

大家得以设置babel-preset-es2014来深入剖判es二〇一五的语法

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

下一场通过配置.babelrc文件

{ "presets": ["es2015"]}

如此我们就足以拓宽对es2014语法剖判了。最后通过配备package.json的scripts

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

npm run build

插件

在babel中有过多浩大的插件,
举例我们要将上面一段代码调换来umd的款式,该如何是好呢?

var add =  =>{ console.log

首先找到呼应的插件babel-plugin-transform-es2016-modules-umd,安装该插件

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

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

下一场编写翻译后即是大家想要的了

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

集成gulp

babel能够独自使用, 也得以协作打造筑工程具实行结合

第一要下载gulp 和gulp对应的babel插件

npm install gulp gulp-babel --save-dev

创建gulp配置gulpfile.js

const gulp = requireconst babel = requiregulp.task=>{ return gulp.src .pipe .pipegulp.task('default' , ['babel'])

配置下package.json中的scripts

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

npm run dev

如上正是本文的全体内容,希望本文的原委对大家的读书也许职业能拉动一定的支持,同期也期望多多照管脚本之家!


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图