Babel初体验

原文地址：→传送门

写在前面

如今es6很流行，尽管各大浏览器都还不能支持它的新特性，可是小伙伴们仍是很中意它呀，因而小小的学习的一下

Babel

这里咱们不介绍es6相关内容，只是说下入坑前奏，记录下如何使用babel来对es6进行转码~

1.准备一个项目（文件夹）

进入到你的项目根目录下，使用下面命令初始化生成一个package.json文件

npm init

2.安装babel
使用下面命令安装全局babel-cli
npm install --global babel-cli

3.设置转码规则并安装插件
安装相关插件：

# 最新转码规则
$ npm install --save-dev babel-preset-latest

# react 转码规则
$ npm install --save-dev babel-preset-react

如今根目录下新建一个.babelrc文件并添加以下内容：

{
    "presets":[
        "latest",
        "react",
    ],
    "plugins": []
}

新建一个src文件用于放ES6的代码，再新建一个lib文件用于存放转码后的代码，而后在src文件中新建一个index.js文件，里面放点es6的代码

let [x, y, z] = new Set(['a', 'b', 'c']);
console.log(x);
console.log(y);
console.log(z);

这时候输入下面的命令就能够直接对index.js进行转码了额~

babel src/index.js --out-file lib/index.js
或
babel src/index.js -o lib/index.js

同时也能够使用 --watch或-w 对转码文件进行监测文件内容的变化：

babel src/index.js --watch -o lib/index.js
babel src/index.js -w -o lib/index.js

可是，若是src中有多个文件的话，上面这样就很繁琐，接下来要使用babel的命令来对文件夹下的.es六、.js等全部文件进行转码:

babel src -d lib

同时可将这行命令配置到package.json中的scripts中：

"scripts": {
    "compile":"babel src -d lib"
  },

下一次则直接使用npm run compile便可完成编译。

也能够使用watch对文件夹进行监测:

"scripts": {
    "compile": "babel src -d lib",
    "watch-compile": "babel src -d lib --watch"
  },

使用npm run watch-compile命令就只有执行一次，就能够开开心心写ES6了~