关于ES6学习中Babel安装及配置

Babel有全局安装和项目安装，推荐项目安装

1. 首先创建一个项目文件夹

   在此文件夹目录下打开cmd（如果不知道怎么打开可以百度）

2. 在cmd中输入npm init --yes

   执行init命令时传递–yes参数表示不用询问我们，可以使用npm提供的默认值来配置package.json文件

   此时在文件夹中生成一个package.json文件，文件内容如下：

   {
    "name": "es6",
    "version": "1.0.0",
   "description": "",
    "main": "index.js",
     "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
     },
   "keywords": [],
    "author": "",
     "license": "ISC"
   }
   

3. 在cmd中输入以下两行命令安装Babel
   npm install babel-cli@6 --save-dev
   npm install babel-preset-env --save-dev

   –save-dev参数会将所安装的包作为开发依赖添加到package.json文件中，@符号指明了包的特定版本。使用@6则是告诉npm安装babel-cli的6.x版本中最新的一个

   官方提供的规则集如下，你可以根据自己的项目进行选择

   ES2015转码规则
   $ npm install --save-dev babel-preset-es2015
   react转码规则
   $ npm install --save-dev babel-preset-react
   ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
   $ 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

   执行此操作只后package.json文件中会增加如下代码：

   "devDependencies": {
   	"babel-cli": "^6.26.0",
   	"babel-preset-env": "^1.7.0"
   }
   

4. 配置文件.babelrc

   在项目根目录下新建配置文件.babelrc（需要用代码编辑器打开项目文件后添加，也可以不打开编辑器直接在文件夹里添加，但是有点麻烦，自己去查），往里面添加如下代码：

   {
    	"presets": [
       "env"
   	]
   }
   

5. 在package.json文件的script属性中添加如下内容

   "scripts": {
    	"build": "babel src --out-dir dist"
   }
   

   babel-cli提供的babel命令行工具可以获取src目录下的全部内容，将它们编译成目标输出格式，并将结果保存到dist目录中，并且保留文件的原始目录结构。
   script对象中列举的所有命令都可以通过npm run name执行

   常用的命令如下：

   #转码结果输出到标准输出
   $ babel example.js
   #转码结果写入一个文件
   #–out-file 或 -o 参数指定输出文件
   $ babel example.js --out-file compiled.js
   #或者
   $ babel example.js -o compiled.js
   #整个目录转码
   #–out-dir 或 -d 参数指定输出目录
   $ babel src --out-dir lib
   #或者
   $ babel src -d lib
   #-s 参数生成source map文件
   $ babel src -d lib -s

6. 测试一下
   在根目录下创建一个src文件夹，在此文件夹下创建一个js文件，并在其中写入测试代码，例如：

   var ts = value => value * 2
   console.log(ts(3))
   

   在cmd或常用的终端中输入npm run build
   编译成功后即可看到项目文件中多了一个dist文件夹，并在此文件夹下生成了对应的js文件
   打开文件就能够看到转译的ES5代码了

本文部分拓展参考链接：https://blog.csdn.net/PanRuiFang/article/details/103897161
部分参考尼古拉斯 •贝瓦夸的《深入理解JavaScript特性》