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安装能够参考其余文章,例如:http://www.javashuo.com/article/p-rxloxfzx-kp.html

安装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 语法支持设置