es6转es5的转码器babel的安装与使用

1、babel是转码器，把es6代码转换成es5代码；因为es6代码的浏览器兼容性差，而es5的浏览器兼容性好。
2、安装命令行转码工具：npm install --global babel-cli ,查看是否安装成功：babel --version

3、创建js文件，用es6编码
4、配置.babelrc,存放在项目的根目录下，该文件用来设置转码规则和插件，基本格式如下：

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

presets字段设定转码规则，将es2015规则加入.babelrc

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

5、安装es2015的转码器，在项目中安装:npm install --save-dev babel-preset-es2015

6、转码

1 文件转码

# 转码结果写入文件
mkdir dist1
# --out-file 或 -o参数指定输出文件
babel src/example.js --out-file dist1/compiled.js
# 或者
babel src/example.js -o dist1/compiled.js

文件夹转码

# 整个目录转码
mkdir dist2
# --out-dir 或 -d 参数指定输出目录
babel src --out-dir dist2
# 或者
babel src -d dist2

es6转es5的转码器babel的安装与使用相关推荐

ES6转ES5 Traceur转码器
Traceur允许将ES6代码直接插入网页.首先,必须在网页头部加载Traceur库文件. <script src="https://google.github.io/traceur- ...
ES6新特性之转码器(UmiJS入门)
转码器 Babel (babeljs.io)是一个广为使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而在浏览器或其他环境执行 . Google 公司的 Traceur 转码器 C ...
ES6学习（一）— Babel转码器的使用和配置
ES6学习(一)- Babel转码器的使用和配置 Babel转码器 Babel是一个广泛使用的ES6转码器,可以将ES6代码转化为ES5代码从而在老版本的浏览器进行. 这意味着,你可以使用ES6的方式 ...
ES6转码(编译)工具——Babel转码器、Traceur转码器
当ES6不兼容时,需要用到转码工具 1.Babel转码器: Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行. 这意味着,你可以用ES6的方式编写程序,又不用 ...
常见的ES6转码(编译)工具——Babel转码器、Traceur转码器
在浏览器里面如何使用? 现在ES6的使用也是一个新趋势,下面就来讲解转码的常见方法当ES6不兼容时,需要用到转码工具 1.Babel转码器: Babel是一个广泛使用的ES6转码器,可以将ES6代码 ...
Babel转码器（ES6）
一.Babel介绍 Babel(babeljs.io/)是一个广为使用的ES6转码器,可以将ES6代码转为ES5代码,从而在浏览器或其他环境执行.也就意味着可以用ES6的方式编写程序,从而不用担心现有 ...
es6 babel转码器安装配置
es6 babel转码器安装配置例如:桌面上新建个文件夹es6,文件夹里新建一个文件es6.js. 打开小黑窗进入文件夹.(windows要以管理员的方式打开cmd) 1.先全局安装babel-cl ...
es6 Babel 转码器对修饰器的支持
Babel 转码器对修饰器的支持目前,Babel 转码器已经支持 Decorator. 首先,安装babel-core和babel-plugin-transform-decorators.由于后者包 ...
项目中配置Babel转码器的详细教程
先简单说一下Babel吧 Babel是一个ES6转码器,可以将ES6代码转为ES5代码此篇教程是在学习阮老师的<ES6标准入门>时,不会npm的学习总结在阮老师的教程上具体补充,通过以 ...

es6转es5的转码器babel的安装与使用

es6转es5的转码器babel的安装与使用相关推荐

最新文章

热门文章