在浏览器中使用 JavaScript 模块

背景

Chrome 61 支持了在浏览器中使用 ES6 模块。Safari 10.1 上半年也已经支持了

用法

<script type="module" src="module-entry.js"></script>
<script nomodule type="text/javascript" src="nomodule.js"></script>

支持 ES6 模块的浏览器会根据 <script> 标签上的 type="module" 来加载 ES6 模块;而忽略带有 nomodule<script> 标签。不支持的浏览器则会忽略 type="module"<script> 标签,忽略 <script> 标签上的 nomodule 的属性。

使用浏览器原生对 ES6 模块的支持特性,可以享受模块级别的缓存这一优势。

在模块中引入其他模块时,需要添加 .js 后缀。模块中可以使用 exportimport 关键字。

// module-entry.js
// `.js` is required.
import name from './base.js';
console.log(name);
// base.js
export default 'base';
export const count = 1;

查看例子

可见规范的落实对前端发展有这举足轻重的作用。在前端现有能力范畴内,我们做了再多的优化,能做到的比起在浏览器和操作系统的改动带来的优化也要小很多。因此,作为前端开发只关注现有 API 和框架的话,能做的就很少了。

前端主要关注两点:用户体验和研发效率。其他所有问题都可以被归到以上两个问题的范畴内。兼容性是由不同的客户端导致的,客户端的升级是为了提升用户体验。真正能够提升用户体验和研发效率的是增加新的特性。

参考资料