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 相关文章推荐
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
Vue.js中数据绑定的语法教程
Jun 02 Javascript
让mocha支持ES6模块的方法实现
Jan 14 Javascript
vue制作抓娃娃机的示例代码
Apr 17 Javascript
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
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
第十二节 类的自动加载 [12]
2006/10/09 PHP
js表格分页实现代码
2009/09/18 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
JavaScript实现继承的4种方法总结
2014/10/16 Javascript
Java File类的常用方法总结
2015/03/18 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
javascript实现日历效果
2019/06/17 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
python matplotlib画图实例代码分享
2017/12/27 Python
win7下python3.6安装配置方法图文教程
2018/07/31 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
工商治理实习生的自我评价分享
2014/02/20 职场文书
大学军训感言400字
2014/03/11 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
二手房购房意向书
2015/05/09 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
mysql数据库入门第一步之创建表
2021/05/14 MySQL
HTML+JS实现在线朗读器
2022/02/15 Javascript
Python利用capstone实现反汇编
2022/04/06 Python