您的位置:时时app平台注册网站 > web前端 > 《ECMAScript 6 入门》笔记1彩世界网址

《ECMAScript 6 入门》笔记1彩世界网址

2019-11-02 01:14
$ node --v8-options | grep harmony

直接插入网页

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

// 加载 Traceur 的库文件
<script src="http://www.zhikejy.com/uploads/allimg/191102/01145544N-0.jpg"></script>
// 第二个和第三个是将这个库文件用于浏览器环境
<script src="http://www.zhikejy.com/uploads/allimg/191102/0114554215-1.jpg"></script>
<script src="http://www.zhikejy.com/uploads/allimg/191102/01145530Y-2.jpg"></script>
// 加载用户脚本 type 属性的值是 module
<script type="module">
  import './Greeter.js';
</script>

// 编译器会自动将所有type=module的代码编译为 ES5,然后再交给浏览器执行。可在网页中放置 ES6 代码
<script type="module">
  class Calc {
    constructor() {
      console.log('Calc constructor');
    }
    add(a, b) {
      return a   b;
    }
  }
  var c = new Calc();
  console.log(c.add(4,5));
</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(ex) {
    console.error('Import failed', ex.stack || ex);
  });
</script>

首先生成 Traceur 的大局对象 window.System,然后 System.import 方法能够用来加载 ES6。加载的时候,供给传入一个配备对象 metadata,该指标的 traceurOptions 属性能够安顿扶持 ES6 作用。假若设为 experimental: true,就表示除了 ES6 以外,还扶助部分实验性的新功用

 

浏览器景况

Babel 也足以用于浏览器情状。可是,从 Babel 6.0 起初,不再直接提供浏览器版本,而是要用营造筑工程具营造出来。假设您从未或不想选用创设筑工程具,能够运用babel-standalone模块提供的浏览器版本,将其插入网页

// 注意,网页实时将 ES6 代码转为 ES5,对性能会有影响。生产环境需要加载已经转码完成的脚本
<script src="http://www.zhikejy.com/uploads/allimg/191102/0114551015-3.jpg"></script>
<script type="text/babel">
// Your ES6 code
</script>

怎么样将代码打包成浏览器能够应用的台本?

// 以 Babel 配合 Browserify 为例。首先,安装 babelify 模块
npm install --save-dev babelify babel-preset-latest
// 然后,再用命令行转换 ES6 脚本。将 ES6 脚本 script.js,转为 bundle.js,浏览器直接加载后者就可以了
browserify script.js -o bundle.js 
  -t [ babelify --presets [ latest ] ]
// 在package.json设置下面的代码,就不用每次命令行都输入参数了
{
  "browserify": {
    "transform": [["babelify", { "presets": ["latest"] }]]
  }
}

 

babel-polyfill

Babel 默许只调换新的 JavaScript 句法(syntax),而不改造新的 API。转换API 必得接收babel-polyfill

npm install --save babel-polyfill
// 脚本头部加入
import 'babel-polyfill';
// 或者
require('babel-polyfill');

Babel 暗中同意不转码的 API 相当多,查看

  

ES6 与 ECMAScript 2015 的关系

ES6 这么些词的原意,正是指 JavaScript 语言的下贰个版本。ES6 既是二个历史名词,也是三个泛指,含义是5.1版之后的 JavaScript 的后进标准,包含了ES2016、ES2016、ES2017之类,而ES二〇一五则是正统名称,特指该年公布的正经八百版本的语言专门的学业。

ECMAScript 6简介

ECMAScript 和 JavaScript 的关系

前面贰个是后世的尺码,后面一个是前者的后生可畏种达成(别的的 ECMAScript 方言还会有Jscript 和 ActionScript)。日常地方,这五个词是能够交流的

ECMAScript 标准怎么不叫 JavaScript 规范?
一是商标,Java 是 Sun 集团的商标,依照授权合同,只有 Netscape 公司能够合法地动用 JavaScript 那么些名字,且 JavaScript 本人也早已被 Netscape 公司注册为商标。
二是想彰显这门语言的制订者是 ECMA,不是 Netscape,那样便于保险那门语言的开放性和中立性。

Node 是 JavaScript 的服务器运维情状(runtime)。

babel-register

babel-register模块改写require命令,为它丰裕二个钩子。今后,每当使用require加载.js、.jsx、.es和.es6后缀名的文书,就能够先用Babel实行转码

npm install --save-dev babel-register
// 使用时,必须首先加载babel-register。然后,就不需要手动对index.js转码
require("babel-register");
require("./index.js");

babel-register只会对require命令加载的文本转码,而不会对当前文件转码。其它,由于它是实时转码,所以只相符在付出情形使用

 

安排进度

各大浏览器的最新版本,对 ES6 的支撑情状

// 查看 Node 已经实现的 ES6 特性。
node --v8-options | grep harmony

拜访 ruanyf.github.io/es-checker,能够旁观你的浏览器协理 ES6 的品位

// 安装阮一峰老师插件 ES-Checker
npm install -g es-checker
es-checker

=========================================
Passes 24 feature Dectations
Your runtime supports 57% of ECMAScript 6
=========================================

应用上面包车型地铁授命,能够查看 Node 已经达成的 ES6 个性。

Babel 转码器

Babel 是二个广阔接收的 ES6 转码器,能够将 ES6 代码转为 ES5 代码,进而在现成条件实行

// 转码前
input.map(item => item   1);

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

2011年 ECMAScript 5.1版发布
二〇一六年7月布告 《ECMAScript 2015正规》(简单称谓 ES2016) ES6 的首先个版本
二〇一五年1月发表 小幅度修正的《ECMAScript 二〇一六专门的工作》(简称ES2014),这几个本子能够充任是 ES6.1 版,因为两岸的异样非常的小(只新扩张了数组实例的includes方法和指数运算符)
2017年6月发布 ES2017 标准
ES6 既是三个历史名词,也是三个泛指,含义是5.1版之后的 JavaScript 的后生标准,包涵了ES二零一四、ES二〇一五、ES2017等等,而ES二零一四则是职业名称,特指该年发表的正统版本的语言专门的学业。本书中涉嫌 ES6 的地点,常常是指 ES二〇一六 规范,但有时候也是泛指“下一代 JavaScript 语言”。

Node 碰着的用法

var traceur = require('traceur');
var fs = require('fs');

// 将 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);

各大浏览器的时尚版本,对 ES6 的支撑能够查看kangax.github.io/es5-compat-table/es6/

在线调换

Babel 提供一个REPL在线编写翻译器,能够在线将 ES6 代码转为 ES5 代码。转换后的代码,能够直接充作 ES5 代码插入网页运维

Babel 粤语网 · Babel:下一代 JavaScript 语法的编写翻译器

Babel 提供一个REPL在线编写翻译器,可以在线将 ES6 代码转为 ES5 代码。

Babel 转码器  将ES6 代码转为 ES5 代码,进而在现存条件举行。那意味着,你可以用 ES6 的法门编写程序,又不用担忧现存条件是不是支持。

babel-cli 命令行转码
babel-node命令 babel-cli工具自带,提供四个支撑ES6的REPL(交互式解释器)意况。它扶植Node的REPL蒙受的享有机能,何况能够平昔运转ES6代码。

babel-register模块改写require命令,为它助长多个钩子。从此,每当使用require加载.js、.jsx、.es和.es6后缀名的公文,就能够先用Babel进行转码。
babel-core模块 调用 Babel 的 API 进行转码
babel-polyfill,转码的 API, Babel暗中认可只调换新的JavaScript句法(syntax),而不转变新的API

 

Traceur谷歌集团的转码器,也能够将 ES6 代码转为 ES5 代码。

 

 

命令行转变

// 作为命令行工具使用时,Traceur 是一个 Node 的模块,首先需要用 Npm 安装
npm install -g traceur

// 运行 ES6 脚本文件,会在标准输出显示运行结果
$ traceur calc.js
Calc constructor
9

// 将 ES6 脚本转为 ES5 保存
// --script选项表示指定输入文件,--out选项表示指定输出文件
traceur --script calc.es6.js --out calc.es5.js

// 为了防止有些特性编译不成功,最好加上--experimental选项
$ traceur --script calc.es6.js --out calc.es5.js --experimental

babel-core

一些代码要求调用 贝布el 的 API 进行转码,将要选取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 }
// 配置对象options http://babeljs.io/docs/usage/options/

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

安插文件.babelrc

Babel 的布局文件是.babelrc,寄存在类型的根目录下

{
 // presets字段设定转码规则
  "presets": [],
  "plugins": []
}

// 官方提供以下的规则集,你可以根据需要安装
// 最新转码规则
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。所有 Babel工具和模块的使用,都必须先写好.babelrc
 {
    "presets": [
      "latest",
      "react",
      "stage-2"
    ],
    "plugins": []
  }

ECMAScript 的历史

在线转换

Traceur 也提供一个在线编译器

Traceur 转码器

Google 公司的Traceur转码器,也能够将 ES6 代码转为 ES5 代码。

语法议案的准予流程

任何人都能够向规范委员会(又称 TC39 委员会)议事原案,须求改进语言职业。当前的兼具议事原案,能够在 TC39 的官方网站查看

  • 生龙活虎种新的语法从议事原案到成为正规规范,须要阅历三个阶段
    • Stage 0 - Strawman(体现阶段)
    • Stage 1 - Proposal(征采意见阶段)
    • Stage 2 - Draft(草案阶段)
    • Stage 3 - Candidate(候选人阶段)
    • Stage 4 - Finished(定案阶段)

与别的工具的合营

数不完工具必要 贝布el 实行停放转码,这里举多少个例子:ESLint 和 Mocha

// 1. ESLint 用于静态检查代码的语法和风格,安装命令如下
npm install --save-dev eslint babel-eslint

// 2. 在项目根目录下,新建一个配置文件.eslintrc,在其中加入parser字段
{
  "parser": "babel-eslint",
  "rules": {
    ...
  }
}

// 3. 在package.json之中,加入相应的scripts脚本
{
    "name": "my-module",
    "scripts": {
      "lint": "eslint my-files.js"
    },
    "devDependencies": {
      "babel-eslint": "...",
      "eslint": "..."
    }
  }

// Mocha 则是一个测试框架,如果需要执行使用 ES6 语法的测试脚本,可以修改 package.json 的 scripts.test
//命令中,--compilers 参数指定脚本的转码器,规定后缀名为 js 的文件,都需要使用 babel-core/register 先转码
"scripts": {
  "test": "mocha --ui qunit --compilers js:babel-core/register"
}

babel-node

babel-cli工具自带贰个babel-node命令,提供三个扶植ES6的REPL意况(Read-Eval-Print-Loop REPL 读取-推行-输出循环)

// 不用单独安装,而是随babel-cli一起安装
babel-node
> (x => x * 2)(1)
2
// 可以直接运行ES6脚本
babel-node es6.js
// babel-node也可以安装在项目中
npm install --save-dev babel-cli
// 改写 package.json
{
  "scripts": {
    "script-name": "babel-node script.js"
  }
}

一声令下行转码babel-cli

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

$ npm install --global babel-cli

// 基本用法如下。全局环境下,进行 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

不等档案的次序选用分裂版本的 Babel 解决办法?

// 1. 将babel-cli安装在项目之中
npm install --save-dev babel-cli
// 2. 改写package.json
{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"
  },
}
// 3. 转码命令
npm run build

ECMAScript 6.0(以下简单的称呼 ES6)是 JavaScript 语言的子弟标准,已经在二〇一四年11月规范公布了。它的目的,是驱动 JavaScript 语言能够用来编排复杂的重型应用程序,成为公司级开垦语言

本文由时时app平台注册网站发布于web前端,转载请注明出处:《ECMAScript 6 入门》笔记1彩世界网址

关键词: