您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

如何使用babel安装配置教程

2024/4/13 23:06:09发布20次查看
babel是一个广泛使用的转码器,可以将es6代码转化为es5代码,从而在现有环境执行。这篇文章主要介绍了babel的使用以及安装配置,需要的朋友可以参考下
简介
babel是一个广泛使用的转码器,可以将es6代码转化为es5代码,从而在现有环境执行,这意味着,你可以现在就用es6编写程序,而不用担心现有环境是否支持。
安装及配置
npm install babel-cli --save-dev 或者 cnpm install babel-cli --save-dev使用淘宝镜像安装会更快。
步骤:进入项目 ==>cnpm install babel-cli --save-dev
为什么不安装在全局
如果安装在全局,那意味着项目要运行,全局环境必须有bable,也就是说项目产生了对环境的依赖。另一方面,这样做也无法支持不同项目使用不同版本的babel。
设定转码规则
根目录下安装:cnpm install babel-preset-es2015 --save-dev
安装完成之后,再创建配置文件 .babelrc这个文件,得放在项目根目录下,它的基本格式是:
{ "presets":[], "plugins":[]}
presets字段设置的就是转码规则,plugins是设置的babel的插件。然后配置文件:
{ "presets":["es2015"]}
到这里,关于babel的基本配置就完成了。
实例演示:
在项目根目录下创建demo.js
let a = 5;const b = 10;let input = [1,2,3];input.map(item => item+1);
因为我们现在是将babel安装到了当前目录下,所以不能直接在终端中babel转换命令,得使用npm来运行,所以先在packge.json中编写
{ "devdependencies": { "babel-cli": "^6.26.0", "babel-preset-es2015": "^6.24.1" }, "scripts":{ "build":"babel demo.js" }}
进入根目录,npm run build运行,查看结果
也可以输出到指定的目录
{ "devdependencies": { "babel-cli": "^6.26.0", "babel-preset-es2015": "^6.24.1" }, "scripts":{ "build":"babel demo.js --out-file bunder.js" }}
进入根目录,npm run build运行,查看结果
这次会在根目录下找到被编译过的bunder.js文件
文件夹截图
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
es6中map、set与数组、对象的对比(详细教程)
利用angular如何实现变化检测
在vue-star中如何实现评星组件开发
以上就是如何使用babel安装配置教程的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product