项目中配置Babel转码器的详细教程

先简单说一下Babel吧

Babel是一个ES6转码器，可以将ES6代码转为ES5代码

此篇教程是在学习阮老师的《ES6标准入门》时，不是特别懂npm的学习总结

比较适合没有用过npm的同学吧。

在阮老师的教程上具体补充，通过以下几个步骤，即可在项目中直接安装Babel转码器，一行命令即可进行ES6转码

第一步：创建package.json

package.json 文件是一个描述文件，主要有以下3个作用：

1.描述项目依赖了哪些包

2.可以使用“语义化版本规则”指明项目依赖包的版本，表明接受更新的程度

3.与其他开发者分享

另外，package.json中，至少要有两部分内容

"name"与"version"

这里只是简单介绍，有兴趣继续深入的话看看文尾的链接吧

现在我们来创建一个package.json

1.打开cmd进入项目文件，输入 "npm init" 项目下安装package.json

运行命令后会让你配置各个部分

name与version处直接回车的话就默认按文件名和1.0.0的版本号配置咯，其他配置可以直接回车到最后

完成后，文件夹中就会出现一个package.json

第二步：创建Babel的配置文件.babelrc

.babelrc文件用于设置 转码规则和 插件，基本规则：

{

    "presets":[ ],

    "plugins":[ ]

}

因为window下不可以直接创建空文件名的文件，所以我们用另存为的方式创建这个配置文件

新建文本输入配置：

然后 另存为（注意保存类型改为所有文件）

“新建文本文档.txt"也就可以删掉啦，后面配置时用NotePad打开就好

第三步：安装规则集，设置.babelrc

上一步已经创建好.babelrc了，接下来我们安装规则集

preset字段设定转码规则，官方给了我们多个规则集，以下是安装命令

//最新转码规则

npm install --save-dev babel-preset-latest

//react 转码规则

npm install --save-dev babel-preset-react

//不同阶段语法提案的转码规则（4选1）

npm install --save-dev babel-preset-stage-0

npm install --save-dev babel-preset-stage-1

npm install --save-dev babel-preset-stage-2

npm install --save-dev babel-preset-stage-3

输入

npm install --save-dev babel-preset-latest

npm install --save-dev babel-preset-react

在 4选1中选 npm install --save-dev babel-preset-stage-2

。。。。安装中。。。。。

安装完成！

安装完成后我们可以在 package.json中安装的包

现在让我们来 设置 .babelrc吧，如下图

第四步：项目中安装babel-cli,再改写package.json

安装babel-cli前，我们先创建一个存放js的文件夹吧，放等会用来转换的js脚本，我把它命名为jsFolder

现在，输入 npm install --save-dev babel-cli安装babel-cli

然后改写package.json：在scripts中加入

    "build": "babel src -d lib"

src：放置原js的文件夹路径

lib：放置转换后js的文件路径（没有的话会自动创建）

按照创建的jsFolder，我们这样子写

ok！保存退出，现在我们可以一个命令转换了

开始测试！

先在jsFolder中创建一个ES6代码，我们用阮老师的例子

然后cmd中输入 npm run build

到lib中看看

嗯，然后就转换完成了，就算jsFolder中有多个js命令，或者项目扔给其他伙伴，直接一个命令就可以完成转换啦

参考资料：

      《ES6标准入门（第3版）》

       npm 与 package.json 快速入门教程：https://blog.csdn.net/u011240877/article/details/76582670#packagejson-%E5%A6%82%E4%BD%95%E5%88%9B%E5        BB%BA