各个配置文件,入门教程学习笔记

By admin in 4858美高梅 on 2019年4月10日

  Babel是3个javascript编写翻译器,能够将ES六和换代的js语法转换来ES伍的,使代码在较老的浏览器里也能不荒谬运转。

Babel是一个大规模运用的转码器,能够将ES6代码转为ES五代码,从而在现有条件举行。

用命令,能够查阅你正在使用的Node环境对ES六的支撑程度。

Babel是贰个常见使用的转码器,能够将ES6代码转为ES伍代码,从而在现有条件举办。

一、安装

合法手册传送门

https://github.com/thejameskyle/babel-handbook/blob/master/translations/zh-Hans/user-handbook.md

不建议进行全局安装,那样可以有限协助各样品种独立环境。

$ npm install -g es-checker$ es-checker=========================================Passes 24 feature DectationsYour runtime supports 57% of ECMAScript 6=========================================

4858美高梅 1

npm install --save-dev babel-loader babel-core babel-preset-env

1.安装

大局安装

npm install -g babel
npm install -g babel-cli

1些安装

npm install  --save-dev babel
npm install --save-dev babel-cli

babel6之后 分离为多少个包
babel-cli
命令行
babel-core
node api 以及 require hook
babel-polyfill
提供es2015的环境

转车为ES伍等须求设置插件,依据必要设置

# 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

行使上边包车型大巴一声令下,可以查阅Node全体已经达成的ES6特性。

那象征,你能够明日就用 ES陆编写程序,而不用担心现有条件是还是不是支持。上边是一个例证。

二、在webpack.config.js中配置module

2.使用

$ node --v8-options | grep harmony --harmony_typeof --harmony_scoping --harmony_modules --harmony_symbols --harmony_proxies --harmony_collections --harmony_observation --harmony_generators --harmony_iteration --harmony_numeric_literals --harmony_strings --harmony_arrays --harmony_maths --harmony
// 转码前
input.map(item => item + 1);

// 转码后
input.map(function (item) {
 return item + 1;
});
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader'
    }
  ]
}

二.一命令行转化js文件:

babel es6.js  --presets es2015

转码结果输出到命令行

Babel转码器

各个配置文件,入门教程学习笔记。上面的原始代码用了箭头函数,这么些天性还从未赢得广大扶助,Babel将其转为普通函数,就能在存活的JavaScript环境进行了。

三、新建.babelrc配置文件

二.二转码结果写入3个文本

# 转码结果写入一个文件
# --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是1个科学普及通机械化采煤取的ES陆转码器,能够将ES陆代码转为ES五代码,从而在存活条件进行。那意味着,你能够用ES陆的秘籍编写程序,又不用顾虑现有条件是不是扶助。上面是一个事例。

一、配置文件.babelrc

  如下是vue-cli自动生成的babel配置。即使要配置plugins,须要npm
install对应插件和重视。

二.3在品种中能够透过修改 package.json 文件

{
  "name": "my-project",
  "version": "1.0.0",
  "devDependencies": {
    "babel-cli": "^6.0.0"
  }
}

于今,大家不直接从命令行运维 Babel 了,取而代之大家将把运转命令写在 npm
scripts 里,那样能够采用 Babel 的地头版本。
只需将 “scripts” 字段添加到你的 package.json 文件内同时把 babel 命令写成
build 字段。.

{
    "name": "my-project",
    "version": "1.0.0",
+   "scripts": {
+     "build": "babel src -d lib"
+   },
    "devDependencies": {
      "babel-cli": "^6.0.0"
    }
  }

现今可以在巅峰里运营:

npm run build

这将以与从前一样的艺术运营 Babel,但那1遍大家运用的是本土副本。

// 转码前input.map(item => item + 1);// 转码后input.map(function  { return item + 1;});

Babel的布局文件是.babelrc,存放在档次的根目录下。使用Babel的率先步,便是计划这些文件。

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"]
}

叁.配置.babelrc配置文件

Babel的配置文件是.babelrc,存放在项指标根目录下。使用Babel的率先步,就是安顿这几个文件。
该公文用来设置转码规则和插件,基本格式如下。

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

接下来,将这个规则插手.babelrc。

  {
    "presets": [
      "es2015",
      "react",
      "stage-2"
    ],
    "plugins": []
  }

计划文件.babelrc

该文件用来安装转码规则和插件,基本格式如下。

四、polyfill:完整模拟ES201伍+ 

4.babel-polyfill

Babel暗中同意只转换新的JavaScript句法(syntax),而不转移新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的艺术(比如Object.assign)都不会转码。
举例来说来说,ES陆在Array对象上增加产量了Array.from方法。Babel就不会转码这些方法。若是想让那个法子运转,必须使用babel-polyfill,为当前环境提供一个垫子。
Babel暗许不转码的API极度多,详细清单能够查阅babel-plugin-transform-runtime
模块的definitions.js文件。
设置命令如下。

npm install --save babel-polyfill

下一场只须求在文件顶部导入 polyfill 就能够了:

import "babel-polyfill";

Babel的布局文件是.babelrc,存放在品种的根目录下。使用Babel的第2步,便是安顿那么些文件。

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

  Babel私下认可只转换新的JavaScript句法,而不更换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及部分定义在大局对象上的主意(比如Object.assign)都不会转码。倘使想让那个点子运转,就必要使用babel-polyfill,为日前条件提供七个垫子。

该公文用来设置转码规则和插件,基本格式如下。

presets字段设定转码规则,官方提供以下的规则集,你能够依照须要设置。

npm install --save babel-polyfill

{ "presets": [], "plugins": []}
# 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
// 方法一:在webpack中引用
module.exports = {
  entry: ["babel-polyfill", "./app/js"]
};

// 方法二:在js入口顶部引入
import "babel-polyfill";

presets字段设定转码规则,官方提供以下的规则集,你能够依据须要设置。

下一场,将这几个规则参加.babelrc

 

# ES2015转码规则$ npm install --save-dev babel-preset-es2015# react转码规则$ npm install --save-dev babel-preset-react# ES7不同阶段语法提案的转码规则,选装一个$ 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
 {
  "presets": [
   "es2015",
   "react",
   "stage-2"
  ],
  "plugins": []
 }

然后,将那几个规则加入.babelrc。

小心,以下有所Babel工具和模块的施用,都必须先写好.babelrc

{ "presets": [ "es2015", "react", "stage-2" ], "plugins": []}

2、命令行转码babel-cli

留意,以下有所Babel工具和模块的应用,都必须先写好.babelrc。

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

一声令下行转码babel-cli

它的装置命令如下。

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

$ npm install --global babel-cli

它的设置命令如下

骨干用法如下。

$ npm install --global babel-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转码。那表示,如若项目要运转,全局环境必须有Babel,约等于说项目产生了对环境的借助。另一方面,这样做也无力回天支撑分化档次选取不相同版本的Babel。

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

3个化解办法是将babel-cli设置在档次里面。

上边代码是在大局环境下,进行Babel转码。那意味着,如若项目要运维,全局环境必须有Babel,也正是说项目发生了对环境的依靠。另壹方面,那样做也惊惶失措支撑分裂品种接纳分歧版本的Babel。

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

二个解决办法是将babel-cli安装在品种里面。

然后,改写package.json。

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

然后,改写package.json。

转码的时候,就推行下边包车型客车授命。

{ // ... "devDependencies": { "babel-cli": "^6.0.0" }, "scripts": { "build": "babel src -d lib" },}
$ npm run build

转码的时候,就实施下边包车型地铁一声令下。

三、babel-node

$ npm run build

babel-cli工具自带3个babel-node一声令下,提供一个帮助ES陆的REPL环境。它扶助Node的REPL环境的保有机能,而且能够直接运转ES陆代码。

babel-node

它不用单独安装,而是随babel-cli一头安装。然后,执行babel-node就进入PEPL环境。

babel-cli工具自带三个babel-node命令,提供一个援助ES陆的REPL环境。它帮助Node的REPL环境的兼具机能,而且能够一向运转ES6代码。

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

它不用单独安装,而是随babel-cli一起安装。然后,执行babel-node就进来REPL环境

babel-node命令可以间接运转ES6脚本。将上边的代码放入脚本文件es陆.js,然后直接运营。

$ babel-node> (x => x * 2)2
$ babel-node es6.js
2

babel-node命令能够一向运营ES陆脚本。将地点的代码放入脚本文件es陆.js,然后直接运营。

babel-node也足以安装在档次中。

$ babel-node es6.js2
$ npm install --save-dev babel-cli

babel-node也足以设置在项目中。

然后,改写package.json。

$ npm install --save-dev babel-cli
{
 "scripts": {
  "script-name": "babel-node script.js"
 }
}

然后,改写package.json。

地点代码中,使用babel-node代表node,那样script.js本人就绝不做别的转码处理。

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

四、babel-register

上面代码中,使用babel-node替代node,那样script.js自身就毫无做其余转码处理。

babel-register模块改写require命令,为它助长3个钩子。此后,每当使用require加载.js、.jsx、.es和.es陆后缀名的文本,就会先用Babel举办转码。

babel-register

$ npm install --save-dev babel-register

babel-register模块改写require命令,为它丰裕贰个钩子。此后,每当使用require加载.js、.jsx、.es和.es6后缀名的文件,就会先用贝布el进行转码。

利用时,必须首先加载babel-register。

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

运用时,必须首先加载babel-register。

接下来,就不需求手动对index.js转码了。

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

亟待小心的是,babel-register只会对require命令加载的公文转码,而不会对方今文件转码。此外,由于它是实时转码,所以只适合在付出条件使用。

接下来,就不须求手动对index.js转码了。

五、babel-core

急需专注的是,babel-register只会对require命令加载的文件转码,而不会对当下文件转码。其它,由于它是实时转码,所以只适合在付出环境使用。

假若某个代码必要调用Babel的API进行转码,就要动用babel-core模块。

babel-core

设置命令如下。

1旦有个别代码须要调用Babel的API进行转码,就要采用babel-core模块。

$ npm install babel-core --save

设置命令如下。

接下来,在档次中就足以调用babel-core。

$ npm install babel-core --save
var babel = require('babel-core');

// 字符串转码
babel.transform('code();', options);
// => { code, map, ast }

// 文件转码(异步)
babel.transformFile('filename.js', options, function(err, result) {
 result; // => { code, map, ast }
});

// 文件转码(同步)
babel.transformFileSync('filename.js', options);
// => { code, map, ast }

// Babel AST转码
babel.transformFromAst(ast, code, options);
// => { code, map, ast }

接下来,在项目中就能够调用babel-core。

配置对象options,能够参照官方文书档案。

var babel = require('babel-core');// 字符串转码babel.transform;', options);// => { code, map, ast }// 文件转码babel.transformFile('filename.js', options, function(err, result) { result; // => { code, map, ast }});// 文件转码babel.transformFileSync('filename.js', options);// => { code, map, ast }// Babel AST转码babel.transformFromAst(ast, code, options);// => { code, map, ast }配置对象options,可以参看官方文档http://babeljs.io/docs/usage/options/。

下边是3个事例。

下边是二个例证。

var es6Code = 'let x = n => n + 1';
var es5Code = require('babel-core')
 .transform(es6Code, {
  presets: ['es2015']
 })
 .code;
// '"use strict";\n\nvar x = function x(n) {\n return n + 1;\n};'
var es6Code = 'let x = n => n + 1';var es5Code = require('babel-core') .transform(es6Code, { presets: ['es2015'] }) .code;// '"use strict";\n\nvar x = function x {\n return n + 1;\n};'

上面代码中,transform方法的第一个参数是一个字符串,表示须求更换的ES陆代码,第3个参数是更换的布局对象。

上边代码中,transform方法的率先个参数是1个字符串,表示需求被转换的ES陆代码,第四个参数是更换的布置对象。

六、babel-polyfill

babel-polyfill

Babel暗中同意只转换新的JavaScript句法(syntax),而不转移新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些概念在大局对象上的方法(比如Object.assign)都不会转码。

贝布el暗许只转换新的JavaScript句法,而不转移新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些概念在大局对象上的艺术(比如Object.assign)都不会转码。

举例来说,ES陆在Array对象上增加产量了Array.from方法。Babel就不会转码那些主意。借使想让那个主意运转,必须使用babel-polyfill,为眼下条件提供贰个垫子。

比喻来说,ES六在Array对象上新增了Array.from方法。Babel就不会转码那几个点子。借使想让这些点子运维,必须选取babel-polyfill,为近期环境提供三个垫子。

设置命令如下。

安装命令如下。

$ npm install --save babel-polyfill
$ npm install --save babel-polyfill

下一场,在本子头部,出席如下1行代码。

下一场,在本子底部,插手如下壹行代码。

import 'babel-polyfill';
// 或者
require('babel-polyfill');

import ‘babel-polyfill’;//
可能require(‘babel-polyfill’);Babel暗许不转码的API格外多,详细清单能够查阅babel-plugin-transform-runtime模块的definitions.js文件。

Babel暗中同意不转码的API相当多,详细清单能够查看babel-plugin-transform-runtime模块的definitions.js文件。

浏览器环境

柒、浏览器环境

Babel也能够用于浏览器环境。可是,从Babel
陆.0开首,不再直接提供浏览器版本,而是要用构建筑工程具营造出来。就算你从未或不想采用营造筑工程具,能够由此设置五.x本子的babel-core模块获取。

Babel也足以用于浏览器环境。可是,从Babel
陆.0起初,不再直接提供浏览器版本,而是要用创设筑工程具营造出来。假使你未曾或不想选择创设筑工程具,可以由此设置5.x版本的babel-core模块获取。

$ npm install babel-core@5
$ npm install babel-core@old

运行方面包车型地铁下令未来,就足以在当前目录的node_modules/babel-core/子目录里面,找到babel的浏览器版本browser.js和browser.min.js。

运作方面包车型大巴一声令下以往,就足以在当前目录的node_modules/babel-core/子目录里面,找到babel的浏览器版本browser.js(未精简)和browser.min.js(已精简)。

下一场,将下边包车型大巴代码插入网页。

然后,将上边包车型地铁代码插入网页。

<script src="node_modules/babel-core/browser.js"></script><script type="text/babel">// Your ES6 code</script>
<script src="node_modules/babel-core/browser.js"></script>
<script type="text/babel">
// Your ES6 code
</script>

地点代码中,browser.js是Babel提供的转换器脚本,能够在浏览器运转。用户的ES六脚本放在script标签之中,可是要申明type=”text/babel”。

上边代码中,browser.js是Babel提供的转换器脚本,能够在浏览器运维。用户的ES陆脚本放在script标签之中,但是要注解type=”text/babel”。

另1种方法是应用babel-standalone模块提供的浏览器版本,将其插入网页。

另一种方式是运用babel-standalone模块提供的浏览器版本,将其插入网页。

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script><script type="text/babel">// Your ES6 code</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
<script type="text/babel">
// Your ES6 code
</script>

注意,网页中实时将ES六代码转为ES5,对品质会有震慑。生产条件亟待加载已经转码完结的脚本。

瞩目,网页中实时将ES六代码转为ES5,对质量会有影响。生产环境急需加载已经转码完结的本子。

上边是什么样将代码打包成浏览器能够利用的本子,以Babel同盟Browserify为例。首先,安装babelify模块。

上边是何等将代码打包成浏览器能够采用的本子,以Babel协作Browserify为例。首先,安装babelify模块。

$ npm install --save-dev babelify babel-preset-es2015
$ npm install --save-dev babelify babel-preset-es2015

接下来,再用命令行转换ES陆脚本。

下一场,再用命令行转换ES陆脚本。

$ browserify script.js -o bundle.js \ -t [ babelify --presets [ es2015 ] ]
$ browserify script.js -o bundle.js \
 -t [ babelify --presets [ es2015 react ] ]

地点代码将ES陆脚本script.js,转为bundle.js,浏览器直接加载后者就能够了。

地点代码将ES6脚本script.js,转为bundle.js,浏览器直接加载后者就能够了。

在package.json设置下边的代码,就不要每回命令行都输入参数了。

在package.json设置上边包车型地铁代码,就毫无每一趟命令行都输入参数了。

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

在线转换

八、在线转换

Babel提供2个REPL在线编写翻译器,能够在线将ES陆代码转为ES5代码。转换后的代码,可以直接当做ES5代码插入网页运维。

Babel提供七个REPL在线编写翻译器,能够在线将ES⑥代码转为ES5代码。转换后的代码,能够一贯作为ES5代码插入网页运转。

与其余工具的万分

玖、与别的工具的十分

众多工具需求Babel进行停放转码,那里举多个例子:ESLint和Mocha。

有的是工具要求Babel举办停放转码,那里举三个例证:ESLint和Mocha。

ESLint用于静态检查代码的语法清劲风骨,安装命令如下。

ESLint用以静态检查代码的语法和风格,安装命令如下。

$ npm install --save-dev eslint babel-eslint
$ npm install --save-dev eslint babel-eslint

然后,在档次根目录下,新建多少个配置文件.eslintrc,在里边加入parser字段。

下一场,在品种根目录下,新建一个布局文件.eslint,在其中插足parser字段。

{ "parser": "babel-eslint", "rules": { ... }}
{
 "parser": "babel-eslint",
 "rules": {
  ...
 }
}

4858美高梅 ,再在package.json之中,加入相应的scripts脚本。

再在package.json之中,参与相应的scripts脚本。

 { "name": "my-module", "scripts": { "lint": "eslint my-files.js" }, "devDependencies": { "babel-eslint": "...", "eslint": "..." } }
 {
  "name": "my-module",
  "scripts": {
   "lint": "eslint my-files.js"
  },
  "devDependencies": {
   "babel-eslint": "...",
   "eslint": "..."
  }
 }

Mocha则是一个测试框架,若是供给执行使用ES陆语法的测试脚本,能够修改package.json的scripts.test。

Mocha
则是七个测试框架,借使必要履行使用ES陆语法的测试脚本,能够修改package.json的scripts.test。

"scripts": { "test": "mocha --ui qunit --compilers js:babel-core/register"}
"scripts": {
 "test": "mocha --ui qunit --compilers js:babel-core/register"
}

上边命令中,–compilers参数钦定脚本的转码器,规定后缀名字为js的文书,都急需接纳babel-core/register先转码。

地点命令中,–compilers参数钦点脚本的转码器,规定后缀名叫js的文本,都急需使用babel-core/register先转码。

Traceur转码器

以上便是本文的全体内容,希望对咱们的学习抱有支持,也期望我们多多扶助脚本之家。

谷歌(Google)公司的Traceur转码器,也足以将ES六代码转为ES伍代码。

您或然感兴趣的稿子:

  • babel之配备文件.babelrc入门详解
  • 直接插入网页

Traceur允许将ES陆代码直接插入网页。首先,必须在网页底部加载Traceur库文件。

<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script><script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script><script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script><script type="module"> import './Greeter.js';</script>

地点代码中,一共有四个script标签。第三个是加载Traceur的库文件,第二个和第多少个是将以此库文件用于浏览器环境,第7个则是加载用户脚本,这几个剧本里面能够利用ES陆代码。

专注,第6个script标签的type属性的值是module,而不是text/javascript。这是Traceur编写翻译器识别ES6代码的标志,编写翻译器会自动将有所type=module的代码编写翻译为ES⑤,然后再交给浏览器执行。

除去引用外部ES6脚本,也足以一向在网页中放置ES六代码。

<script type="module"> class Calc { constructor(){ console.log('Calc constructor'); } add{ return a + b; } } var c = new Calc(); console.log(c.add;</script>

正规情况下,上面代码会在控制台打字与印刷出玖。

比方想对Traceur的一言一动有规范控制,能够运用上面参数配置的写法。

<script> // Create the System object window.System = new traceur.runtime.BrowserTraceurLoader(); // Set some experimental options var metadata = { traceurOptions: { experimental: true, properTailCalls: true, symbols: true, arrayComprehension: true, asyncFunctions: true, asyncGenerators: exponentiation, forOn: true, generatorComprehension: true } }; // Load your module System.import('./myModule.js', {metadata: metadata}).catch(function { console.error('Import failed', ex.stack || ex); });</script>

地点代码中,首先生成Traceur的大局对象window.System,然后System.import方法能够用来加载ES6模块。加载的时候,须要传入3个布局对象metadata,该目的的traceurOptions属性能够配备支持ES六作用。假使设为experimental:
true,就象征除了ES6以外,还支持部分试验性的新效率。

  • 在线转换

Traceur也提供1个在线编写翻译器,能够在线将ES陆代码转为ES伍代码。转换后的代码,可以直接作为ES五代码插入网页运营。

地点的例证转为ES5代码运营,便是底下那个样子。

<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script><script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script><script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script><script>$traceurRuntime.ModuleStore.getAnonymousModule(function() { "use strict"; var Calc = function Calc() { console.log('Calc constructor'); }; ($traceurRuntime.createClass)(Calc, {add: function { return a + b; }}, {}); var c = new Calc(); console.log(c.add; return {};});</script>
  • 指令行转换

作为命令行工具使用时,Traceur是几个Node的模块,首先须要用Npm安装。

$ npm install -g traceur

安装成功后,就能够在命令行下使用Traceur了。

Traceur直接运营es陆脚本文件,会在行业内部输出展现运转结果,以前边的calc.js为例。

$ traceur calc.jsCalc constructor9

一旦要将ES六脚本转为ES5保存,要使用下边包车型客车写法。

$ traceur --script calc.es6.js --out calc.es5.js

地点代码的–script选项表示钦命输入文件,–out选项表示钦定输出文件。

为了幸免有个别性子编写翻译不成事,最棒增进–experimental选项。

$ traceur --script calc.es6.js --out calc.es5.js --experimental

指令行下转换生成的文本,就足以一贯放到浏览器中运作。

  • Node.js环境的用法

Traceur的Node.js用法如下(假定已设置traceur模块)。

var traceur = require('traceur');var fs = require;// 将ES6脚本转为字符串var contents = fs.readFileSync('es6-file.js').toString();var result = traceur.compile(contents, { filename: 'es6-file.js', sourceMap: true, // 其他设置 modules: 'commonjs'});if (result.error) throw result.error;// result对象的js属性就是转换后的ES5代码fs.writeFileSync('out.js', result.js);// sourceMap属性对应map文件fs.writeFileSync('out.js.map', result.sourceMap);

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有