如何在网页中使用ECMAScript6模块

20 浏览
0 Comments

如何在网页中使用ECMAScript6模块

我现在非常兴奋地使用Babeljs通过ECMAScript 6功能。特别是,我很想开始使用新的模块功能使我的JavaScript代码更模块化。以下是我目前写的代码:

// ECMAScript 6 code - lib.js

export const sqrt = Math.sqrt;

export function square (x) {

return x * x;

}

export function diag (x, y) {

return sqrt(square(x) + square(y));

}

// ECMAScript 6 code - main.js

import { square, diag } from 'lib';

console.log(square(11));

console.log(diag(4, 3));

我知道我可以在命令行上通过Babel将这段代码从ES6转译为ES5:

babel lib.js > lib6to5.js

babel main.js > main6to5.js

但是我需要怎么在HTML中使用这段代码呢?

例如,这个index.html文件应该是什么样子的:

ECMAScript 6

谢谢。

0