这次给大家带来babel的使用详解，babel使用的注意事项有哪些，下面就是实战案例，一起来看一下。
安装及配置
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文件
文件夹截图
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
JS仿经典传奇游戏
Webpack dev server热加载无效怎么处理
在ES6中子组件怎么调用父组件
以上就是babel的使用详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2781218.html
