babel浅谈

babel是什么？

个人理解它是一种用途很多的javascript编译器，他把最新版的javascript编译成当下可以执行的版本，简言之，利用babel就可以让我们在当前的项目中随意的使用这些新最新的es6，甚至es7的语法。可以简单理解为是把各种javascript的语言统统转为浏览器可以认识（编译）的语言。

1.首先，要安装下node，新建一个文件夹，作为babel的文件，然后 npm init （相关信息直接一路回车，设置默认），最后生成package.json文件

2.编写.babelrc文件，这个是必须的，第一次没有配置，没有一点用，基本格式如下

{
“presets”: [], //设置转码规则
“plugins”: [] //设置插件
}
window下不允许直接右键创建没有文件名的文件，所以创建的使用命令行去创建，在当前目录下，使用命令行

type nul>.babelrc
就ok啦。
官方还提供了别的规则，使用直接安装，进行配置

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
然后呢，把安装好的规则写入.babelrc

{
“presets”: [
“es2015”
],
“plugins”: []
}

3、安装babel-cil工具，利用命令行转码，命令如下

全局安装

npm install --global babel-cli

在项目文件中安装

npm install --save-dev babel-cli
在全局安装babel-cli，意味着，如果项目要运行，全局环境必须要有babel，也就是说项目产生了对环境的依赖，并且这样做也无法支持不同项目使用不同版本的babel，所以官网强烈要求我们使用后一种安装方式，在项目中安装。
在项目中安装之后，需要改写一下package.json:

{
  //...略去了其他的内容
  "devDependencies": {
    "babel-cli": "^6.0.0"  //这里的版本号为安装的时候的版本号，一般安装的时候就会自动写入
  },
  "scripts": {
    "build": "babel src -d lib" 
    //编译整个 src 目录并将其输出到 lib 目录。这里的src指的是需要转换的目录，lib指的是输出的内容的存放目录
  },
}

注意 如果创建的目录文件名称不为src和lib，一定要替换，不然后续会报错。
转码的时候就执行

npm run build

我们还可以直接通过babel-cli直接去转码,直接转码的话，编写babelrc文件，再安装规则和cli就直接可以使用啦

转码结果输出到标准输出

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