babel6 入门-配置安装使用_byKL

babel6 入门

什么是babel

• Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。

• 因为es6比es5的代码更为适合编写程序,但是因为历史的原因,现在普遍的浏览器并不支持es6代码(普遍支持es5),即如果你写es6代码之后,在浏览器上运行出错,因为浏览器的javascript解析器无法解析es6代码

配置好webstorm的es6语法支持

因为默认webstorm并不支持es6语法,所以需要改改配置

Preferences > Languages & Frameworks > JavaScript

至此编写es6的js已经不会出现一大片红色报错了,但是这个只是语法支持,并不能实际运行在一般浏览器上,因为目前大部分浏览器都不支持es6的语法,所以需要babel进行转换.

配置好babel6的编译器和插件

安装npm

npm安装可以参考其他文章,例如:https://segmentfault.com/a/1190000008463706

安装babel

在mac下,需要sudo,全局安装npm模块babel-cli

sudo npm install -g babel-cli

1. babel会比较常用,所以使用全局方式安装

2. Babel提供babel-cli工具，用于命令行转码。

3. babel有很多工具,但是我们目前只取其一,方便学习理解,也不容易混乱

安装结果如下:

/usr/local/bin/babel-doctor -> /usr/local/lib/node_modules/babel-cli/bin/babel-doctor.js
/usr/local/bin/babel-node -> /usr/local/lib/node_modules/babel-cli/bin/babel-node.js
/usr/local/bin/babel -> /usr/local/lib/node_modules/babel-cli/bin/babel.js
/usr/local/bin/babel-external-helpers -> /usr/local/lib/node_modules/babel-cli/bin/babel-external-helpers.js

> fsevents@1.1.1 install /usr/local/lib/node_modules/babel-cli/node_modules/fsevents
> node install

[fsevents] Success: "/usr/local/lib/node_modules/babel-cli/node_modules/fsevents/lib/binding/Release/node-v48-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
/usr/local/lib

安装babel转为es5的插件babel-preset-es2015

sudo npm install -g babel-preset-es2015

安装结果如下:

/usr/local/lib
└─┬ babel-preset-es2015@6.22.0 
  ├─┬ babel-plugin-check-es2015-constants@6.22.0 
  │ └─┬ babel-runtime@6.23.0 
  │   ├── core-js@2.4.1 
  │   └── regenerator-runtime@0.10.3 
  ├── babel-plugin-transform-es2015-arrow-functions@6.22.0 
  ├── babel-plugin-transform-es2015-block-scoped-functions@6.22.0 
  ├─┬ babel-plugin-transform-es2015-block-scoping@6.23.0 
  │ ├─┬ babel-template@6.23.0 
  │ │ └── babylon@6.16.1 
  │ ├─┬ babel-traverse@6.23.1 
  │ │ ├─┬ babel-code-frame@6.22.0 
  │ │ │ ├─┬ chalk@1.1.3 
  │ │ │ │ ├── ansi-styles@2.2.1 
 ................
 

配置babel使用这个插件,要在项目根目录创建一个.babelrc,因为Babel的配置文件是.babelrc,所有babel的配置都会在这里,而babel也会通过读取这个文件的配置来进行使用.

以下是我的项目目录:

tree -L 1 -a
.
├── .babelrc  //babel配置文件在项目根目录
├── index.html
├── index.js
├── lib
├── node_modules // npm的模块的存放目录
└── package.json //npm的package.json,相当于npm的配置文件

创建好.babelrc ,并且配置好下面的配置:

{
//preset 就是预设的意思
  "presets": ["es2015"] //里面就只有一个配置项,因为我们现在只简单使用,并且只使用一个插件,就是babel-preset-es2015
}

Babel 6不再默认支持ES 2015，ES 2015，React，stage等都需要在.babelrc文件中进行配置一个preset来实现预配置,babel主要是通过npm install babel-preset-env 这个插件来实现这个预配置的,而且默认安装babel-cli的时候已经装好了,所以可以直接使用presets,参考:http://babeljs.io/docs/plugins/preset-env/
babel-preset-es2015插件只是负责转换es6的语法为es5,但是一些api功能是没办法转换的,那时候要使用babel-polyfill,但那个是后话

使用babel6和es6

关于babel命令行的用法已经有很多人写过了,这里不再阐述,只是随便看看就好了,改用的时候再查

以下是ruan大哥的样例

# 转码结果输出到标准输出
$ 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

现在是配置webstorm上的babel并且配置好自动执行babel

1.Preferences > Tools > File watchers点击“+”按钮添加babel的watcher,其实就是一个文件监听器,监听变化,自动处理

    File Type：配置该监听器监听的文件类型,这里只编译js文件
    
    Scope：配置该监听器的监听范围，可自定义新的范围，也可以使用Preferences > Appearance & Behavior > 
    Scopes 设置,这里只监听这个project的目录
    
    Program：babel的安装位置,这里我使用全局安装的babel,所以是/usr/local开头的
    
    Arguments：命令执行参数，参见[Babel CLI](https://babeljs.io/docs/usage/cli/),但是这里webstorm一般已经帮我们配置起码能够使用的参数了,暂时无需调整
    
    Output paths to refresh: 这里是babel编译输出的目录,默认webstorm帮我们配置好了会输出source.map并且会在项目的上一层目录创建一个dist目录并且将编译好的文件输出到那里,例如下面的例子

   配置项细则需要参考官网:[https://blog.jetbrains.com/webstorm/2015/05/ecmascript-6-in-webstorm-transpiling/](https://blog.jetbrains.com/webstorm/2015/05/ecmascript-6-in-webstorm-transpiling/)

2.配置成功后,当你修改的es6的js文件会自动编译出es5的文件

ls -1 dist/demo 
index.js
index.js.map

我的项目架构现在是:这个就是webstorm默认帮我配置好的
├── dist
│   └── demo
│       ├── index.js
│       └── index.js.map
└── demo
    ├── .babelrc
    ├── index.html
    ├── index.js
    ├── lib
    ├── node_modules
    └── package.json

然后在你的index.html网页文件调用这个index.js即可

<script src="../dist/demo/index.js"></script>

备注:

1. 关于webstorm上babel编译后出现的source.map会引起webstorm的browser烦人的警告问题,需要在配置项里面勾选Allow unsigned requests配置

2. 关于source.map文件怎么用,参考http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html,这里也只是大概了解一下下就好了,主要配置是//@ sourceMappingURL=jquery.min.map,能够知道的是,使用这个source.map的话,可以知道编译前后的代码,从而可以调试,编译前是es6但是实际浏览器运行的是编译后的es5,两种代码不一样,如果没有source.map的话,很难进行调试的

参考引用:

1. Page '....js.map' requested without authorization, you can copy URL and open it in browser to trust it. WebStorm + FireBug

2. Babel 入门教程

3. ECMAScript 6 in WebStorm: Transpiling

4. WebStorm ES6 语法支持设置