ES6标准入门(第 3 版)
23.5 ES6模块的转码
阅读(

ECMAScript 6 简介

let 和 const 命令

变量的解构赋值

字符串的扩展

正则的扩展

数值的扩展

函数的扩展

数组的扩展

对象的扩展

Symbol

Set 和 Map 数据结构

Proxy

Reflect对象

Promise对象

Iterator 和 for...of 循环

Generator函数语法

Generator函数的异步应用

async函数

Class的基本语法

Class的继承

Decorator

ES6模块

加载ES6模块

浏览器加载ES6模块

ES6模块与 CommonJS 模块的差异

Node 加载ES6模块

循环加载ES6模块

ES6模块的转码

浏览器目前还不支持 ES6模块,为了现在就能使用,可以将转为 ES5 的写法。除了 Babel 可以用来转码之外,还有以下两个方法,也可以用来转码。

ES6 module transpiler

ES6 module transpiler是 square 公司开源的一个转码器,可以将 ES6模块转为 CommonJS模块或 AMD 模块的写法,从而在浏览器中使用。

首先,安装这个转码器。

$ npm install -g es6-module-transpiler

然后,使用compile-modules convert命令,将 ES6模块文件转码。

$ compile-modules convert file1.js file2.js

-o参数可以指定转码后的文件名。

$ compile-modules convert -o out.js file1.js

SystemJS

另一种解决方法是使用SystemJS。它是一个垫片库(polyfill),可以在浏览器内加载 ES6模块、AMD 模块和 CommonJS模块,将其转为 ES5 格式。它在后台调用的是 Google 的 Traceur 转码器。

使用时,先在网页内载入system.js文件。

<script src="system.js"></script>

然后,使用System.import方法加载模块文件。

<script>
  System.import('./app.js');
</script>

上面代码中的./app,指的是当前目录下的 app.js 文件。它可以是 ES6模块文件,System.import会自动将其转码。

需要注意的是,System.import使用异步加载,返回一个 Promise 对象,可以针对这个对象编程。下面是一个模块文件。

// app/es6-file.js:

export class q {
  constructor() {
    this.es6 = 'hello';
  }
}

然后,在网页内加载这个模块文件。

<script>

System.import('app/es6-file').then(function(m) {
  console.log(new m.q().es6); // hello
});

</script>

上面代码中,System.import方法返回的是一个 Promise 对象,所以可以用then方法指定回调函数。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验