babel的使用及安装配置教程

网络编程 2024/10/6 佚名

3 2 1

简介

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文件

文件夹截图

总结

以上所述是小编给大家介绍的babel的使用及安装配置教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

babel的使用

标签：

babel的使用

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“babel的使用及安装配置教程”

babel的使用及安装配置教程

暂无“babel的使用及安装配置教程”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

2024年10月06日

babel的使用及安装配置教程

babel的使用

Nodejs下使用gm圆形裁剪并合成图片的示例

vue-cli中的babel配置文件.babelrc实例详解

评论“babel的使用及安装配置教程”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接