babel转码器

cnpm安装插件出现的问题

Installing object-visit@^1.0.0platform unsupported [email protected] › [email protected] › fsevents@^1.0.0 Package require os(darwin) not compatible with your platform(win32)
[fsevents@^1.0.0] optional install error: Package require os(darwin) not compatible with your platform(win32)

上面说 object-visit@^1.0.0 不兼容win32位系统，其实是因为 [email protected] 安装的过程中，它的依赖插件 object-visit@^1.0.0 下载失败，因此重新rebuild即可：

cnpm rebuild object-visit@^1.0.0
cnpm install

babel开始使用

1.babel能够将ES6（ES-2015），ES7(ES-2016)，ES8(ES-2017)的语法编译为ES5语法运行在不支持ES6以上语法的浏览器上；

//转码前
（x=>x*2)(3)
//转码后
function(x){
  return x*2;
}(3);

2.babel的配置文件，根目录新建一个配置文件 .babelrc ；

"presets": [
   "latest",
   "env",
   "stage-2"],
"plugins": []

presets：babel插件集合的预设，包含某一部分的插件plugin,执行顺序（逆序执行）；

# 最新的转码规则
npm install --save-dev babel-presets-latest
# es2015的转码规则
npm install --save-dev babel-presets-es2015 
# react 转码规则
npm install --save-dev babel-presets-react
# env 包含es2015 es2016 es2017的所有语法编译,并且可以根据运行平台自行选择编译版本
npm install --save-dev babel-presets-evn

# 不同阶段语法提案的转码规则（共有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    #候选-完成规范和浏览器初步实现

plugins： babel的插件，在6.x版本之后babel必需要配合插件来进行工作；
3.命令行转码 babel-cli工具

babel-cli 安装到项目目录中
cnpm install --save-dev babel-cli

基本用法：

# 转码之后写入compiled.js文件
babel mian.js -o compiled.js

# 整个目录转码，放入build目录下面
babel src -d build 

# 生成source map文件,会在main.js文件下生成mian.js.map文件
babel src -d build -s

改写package.json文件，运行npm run build即可；

"scripts": {
  "build": "babel src -d lib -s"
}

4.build-node命令，是build-cli自带个一个命令，提供一个支持 ES6 的 REPL 环境

#直接运行es6语法代码
build-node
> ((x)=>x+2)(2）
4

#直接执行es6.js
build-node es6.js
4

5.babel-register
babel-register模块改写require命令，为它加上一个钩子。此后，每当使用require加载.js、.jsx、.es和.es6后缀名的文件，就会先用 Babel 进行转码；

cnpm install --save-dev babel-register

使用的时候必须先加载babel-register模块，同时只对引入的模块进行同步转码，并不会对当前的模块转码，所以一般用于开发模式；
6.babel-core
如果某些代码需要调用 Babel 的 API 进行转码，就要使用babel-core模块。

cnpm install --save-dev babel-core

7.babel-polyfill
Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码；
举例来说，ES6 在Array对象上新增了Array.from方法。Babel 就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。
在脚本头部引入babel-polyfill模块

cnpm install --save-dev babel-polyfill