babel6 入门-设置装置运用_byKL

2019年8月31日 141次阅读 来源: 线上猛如虎

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,实在就是一个文件监听器,监听变化,自动处置惩罚
《babel6 入门-设置装置运用_byKL》

    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 语法支撑设置

    原文作者：线上猛如虎
    原文地址: https://segmentfault.com/a/1190000008467323
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞