Babel 转码器 § es6转换es5

Babel 转码器 § es6转换es5 实时转码 /  Repl  -babel-node / babel-register(自动转码引入babel-register模块)

配置文件.babelrc

一、Babel 的配置文件是.babelrc，存放在项目的根目录下。使用 Babel 的第一步，就是配置这个文件。

该文件用来设置转码规则和插件，基本格式以下。

{ "presets": [], "plugins": [] } 

二、presets字段设定转码规则，官方提供如下的规则集，你能够根据须要安装。

# 最新转码规则（必须） $ npm install --save-dev babel-preset-latest # react 转码规则（必须） $ npm install --save-dev babel-preset-react # 不一样阶段语法提案的转码规则（共有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": [ "latest", "react", "stage-2" ], "plugins": [] } 

注意，如下全部 Babel工具和模块的使用，都必须先写好.babelrc。

 

命令行转码babel-cli

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

它的安装命令以下。

$ npm install --global babel-cli 

二、基本用法以下。

# 转码结果输出到标准输出 $ babel example.js # 转码结果写入一个文件 # --out-file 或 -o 参数指定输出文件 $ babel index.js --out-file indexEs5.js //能够将指定的es6的文件转码成es5的新文件 index.js 是es6的文件语法 indexEs5.js 是转换后的es5语法
# 或者 babel index.js --watch --out-file indexEs5.js //能够时刻的监听index.js中的变化而后 转换成实时的转换成es5的语法到 inedxEs5.js 文件中 # 或者 $ babel index.js -o indexEs5.js # 整个目录转码 # --out-dir 或 -d 参数指定输出目录 $ babel src --out-dir lib # 或者 $ babel src -d lib # -s 参数生成source map文件 $ babel src -d lib -s 

三、上面代码是在全局环境下，进行 Babel 转码。这意味着，若是项目要运行，全局环境必须有 Babel，也就是说项目产生了对环境的依赖。另外一方面，这样作也没法支持不一样项目使用不一样版本的 Babel。

一个解决办法是将babel-cli安装在项目之中。

# 安装 $ npm install --save-dev babel-cli

四、咱们还能够配置package.json让咱们每次转换的时候 不用每次都写 “转换文件” 和 “被转换文件”

而后，改写package.json。

{  // ... "devDependencies": { "babel-cli": "^6.0.0" }, "scripts": { "es6-es5": "babel index.js --out-file indexEs5.js" }, } 

转码的时候，就执行下面的命令。

$ npm run es6-es5

babel-node

一、babel-cli工具自带一个babel-node命令，提供一个支持ES6的REPL环境。它支持Node的REPL环境的全部功能，并且能够直接运行ES6代码。

它不用单独安装，而是随babel-cli一块儿安装。而后，执行babel-node就进入REPL环境。

$ babel-node > (x => x * 2)(1) 2 

二、babel-node命令能够直接运行ES6脚本。将上面的代码放入脚本文件es6.js，而后直接运行。

$ babel-node es6.js 2 

三、babel-node也能够安装在项目中。

$ npm install --save-dev babel-cli 

四、而后，改写package.json。

{ "scripts": { "script-name": "babel-node script.js" } } 

上面代码中，使用babel-node替代node，这样script.js自己就不用作任何转码处理。

 

babel-register

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

$ npm install --save-dev babel-register 

使用时，必须首先加载babel-register。

require("babel-register"); require("./index.js"); 

而后，就不须要手动对index.js转码了。

须要注意的是，babel-register只会对require命令加载的文件转码，而不会对当前文件转码。另外，因为它是实时转码，因此只适合在开发环境使用。

　　第一步：index.js 入口文件 引入babel-register   引入转换文件 num.js   num这个模块是一个求和功能的模块

 第二步：编写es6求和功能模块

 

　　第三步：node的repl环境运行index.js文件