资讯专栏INFORMATION COLUMN

babel6 入门-配置安装使用_byKL

qianfeng / 1648人阅读

摘要:入门什么是是一个广泛使用的转码器,可以将代码转为代码,从而在现有环境执行。

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

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

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

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即可

备注:

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

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

参考引用:

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

Babel 入门教程

ECMAScript 6 in WebStorm: Transpiling

WebStorm ES6 语法支持设置

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/81704.html

相关文章

  • 库,组件,框架 - 收藏集 - 掘金

    摘要:哈哈,我理解,架构就是骨架,如下图所示译年月个有趣的和库前端掘金我们创办的使命是让你及时的了解开发中最新最酷的趋势。 翻译 | 上手 Webpack ? 这篇就够了! - 掘金译者:小 boy (沪江前端开发工程师) 本文原创,转载请注明作者及出处。 原文地址:https://www.smashingmagazine.... JavaSrip... 读 Zepto 源码之代码结构 - ...

    tommego 评论0 收藏0
  • es6学习笔记-module_v1.0_byKL

    摘要:学习模块不是对象,而是通过命令显式指定输出的代码,输入时也采用静态命令的形式。的模块自动采用严格模式命令用于规定模块的对外接口,命令用于输入其他模块提供的功能。该文件内部的所有变量,外部无法获取。 es6 学习-module_v1.0 ES6模块不是对象,而是通过export命令显式指定输出的代码,输入时也采用静态命令的形式。 ES6的模块自动采用严格模式 export命令用于规定模...

    VishKozus 评论0 收藏0
  • 关于composer一些学习和理解_v1.0_byKL

    摘要:关于一些学习和理解不是一个包管理器。其中一些库依赖于其他库。范围通过使用比较操作符可以指定有效的版本范围。赋值运算符这对于遵循语义化版本号的项目非常有用。指定最低版本,但允许版本号的最后一位数字上升。 关于composer一些学习和理解 Composer 不是一个包管理器。是的,它涉及 packages 和 libraries,但它在每个项目的基础上进行管理,在你项目的某个目录中(例如...

    hedzr 评论0 收藏0
  • 关于laravel5的excel包maatwebsite/excel的使用笔记_v1.0_byKL

    摘要:关于的包的使用笔记关于安装官网已经很详细了不再描述关于导入导入的话只有几个小地方需要注意导入的时候会有产生一些的在循环遍历导入的数据的时候主动忽略关于中文或者乱码问题或者在配置文件在安装这个模块的文档有介绍怎么生成这个文件 关于laravel5的excel包maatwebsite/excel的使用笔记 关于安装 官网已经很详细了,不再描述.http://www.maatwebsite....

    MkkHou 评论0 收藏0
  • es6学习笔记-箭头函数_v1.0_byKL

    摘要:因为箭头函数本身没有所以不可以当作构造函数,也就是说,不可以使用命令,否则会抛出一个错误。箭头函数不可以使用对象,该对象在函数体内不存在。 es6学习笔记-箭头函数_v1.0 箭头函数使用方法 var f = v => v; //普通函数配合箭头函数写法,这里并且是传参的 //相当于 var f = function(v) { return v; }; /*-----------...

    lushan 评论0 收藏0

发表评论

0条评论

qianfeng

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<