码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript 学习笔记-- ES6学习(一)介绍以及Babel的使用

时间:2016-12-20 00:33:32      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:学习笔记   转码   react   file   build   介绍   reg   下一代   uil   

本文摘自阮一峰老师的《ECMAScript 6入门》,原文地址:http://es6.ruanyifeng.com/#docs/intro

 

ECMAScript 6 是一个泛指,含义是5.1版本后的JavaScript的下一代标准,涵盖了ES2015, ES2016, ES2017等。

Babel转码器是一个广泛使用的ES6转码器,可以将ES6转码为ES5。

 

配置文件:.babelrc

配置文件基本格式:

// .babelrc
{ “presets”: [],
"plugins": [], }

使用babel先要安装规则集,安装完后加入到配置文件中。官方的规则集如下:

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

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

# ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个 
$ npm install --save-dev babel-preset-stage-0 
 $ npm install --save-dev babel-preset-stage-1 
 $ npm install --save-dev babel-preset-stage-2 
 $ npm install --save-dev babel-preset-stage-3
// .babelrc
{
"presets": [ "es2015", "react", "stage-2" ], "plugins": [] }

 

babel-ci 模块

babel-ci模块是在命令行中使用babel, 使用babel命令可以直接对文件进行转码,对于项目来说,可以直接将其写在package.json中,然后将命令放在scripts 中。

安装命令如下:

$ npm install --global-cli

 

基本用法如下:

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

在项目中装载和使用babel-cli:

# 安装
$ npm install --save-dev babel-cli
// package.json
{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"
  },
}

 

babel-register 模块

babel-register模块改写require命令,为它加上一个钩子,此后,每当使用require加载.js, .jsx, 和.es6后缀名的文件,就会先用Babel进行转码:

$ npm install --save-dev babel-register
require("babel-register");
require("./index.js");

注意: babel-register只会对require命令加载的文件转码,而不会对当前文件转码。

 

Babel可以用于浏览器环境,不过从6.0版本开始,不再直接提供浏览器版本,而是要用构建工具构建出来。

babel 和browserify 配合使用:

{   
  "browserify": 
  {     
    "transform": [["babelify", { "presets": ["es2015"] }]]   
  } 
}

 

JavaScript 学习笔记-- ES6学习(一)介绍以及Babel的使用

标签:学习笔记   转码   react   file   build   介绍   reg   下一代   uil   

原文地址:http://www.cnblogs.com/JacobQiao/p/6200811.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!