babel基本使用详解


Posted in Javascript onFebruary 17, 2017

什么是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 和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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
动态更新highcharts数据的实现方法
May 28 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 Javascript
jquery实现加载更多"转圈圈"效果(示例代码)
Nov 09 jQuery
JS及JQuery对Html内容编码,Html转义
Feb 17 #Javascript
canvas 实现中国象棋
Feb 17 #Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 #Javascript
js实现横向拖拽导航条功能
Feb 17 #Javascript
js转换对象为xml
Feb 17 #Javascript
EsLint入门学习教程
Feb 17 #Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 #Javascript
You might like
用PHP实现WEB动态网页静态
2006/10/09 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
js select常用操作控制代码
2010/03/16 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
vue-cli中的webpack配置详解
2017/09/25 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
js实现随机圆与矩形功能
2020/10/29 Javascript
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
python logging设置level失败的解决方法
2020/02/19 Python
Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例
2020/03/04 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
应用化学专业职业生涯规划书
2013/12/31 职场文书
决心书标准格式
2014/03/11 职场文书
党员公开承诺事项
2014/03/25 职场文书
工作检讨书大全
2015/01/26 职场文书
辛德勒的名单观后感
2015/06/03 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书