在Nodejs或浏览器运行ESM代码

前言

经典面试题目就是《Common.js和ES module的区别》,这一题很多人都会熟练地背出答案。

Commonjs

  • CommonJs可以动态加载语句,代码发生在运行时
  • CommonJs导出值是拷贝, 不好排查引起变量污染

ES module(后续简称esm)

esm是JavaScript模块化的未来。因为它解决了变量污染,代码维护,代码依赖的问题。它让你的代码更加科学。这也是deno默认采用esm的原因。

回归正题,我们有什么方法在Nodejs或者浏览器直接运行esm代码,这是个有趣而又实际的问题。

如何在Nodejs环境允许

1.利用编译工具运行esm

最常见的方式是利用webpack等打包工具搭配babel使用。随着webpack和vue的大热,这些工具似乎成为了标配,但是webpack的缺点也很明显,它能让commonjs和esm的混写,导致代码存在一些写法不规范的情况,我相信这种情况是普遍出现在业务代码里面,也存在于antd3这样的知名第三方组件库中。

rollup则是基于ES6的语法规范进行编译,它的轻便小巧,非常适合npm库的打包。新兴的打包工具例如esbuildswc,也可以实现编译打包,即使速度越来越快,但是还是需要编译的过程。这些仓库很重要的一个特点就是使用esm语法。

以上这些工具都可以应用于esm语法编译,但是有很多项目不一定需要打包编译这样耗时的流程的,例如一些cli工具、简易微服务等,如何保证高效正确的运行esm代码呢?

2. 利用第三方库运行esm

在Nodejs版本较低的情况,我们可以利用一些工具,工具的使用形式有几种,一种是Module Loader,另一种是Command Line(简称为cli)。

Module Loader,这里介绍standard-things/esm,它可以preload第三方提供的esm包,从此,可以做到babelless, bundleless。你不需要使用大型编译工具也可以直接运行esm代码,使用方式如下。

node -r esm index.js

同样,egoist/esbuild-register这个库在esbuild的支持下,同样可以做到Module Loader的效果,利用esbuild的高性能特性,代码运行效率更高。

node -r esbuild-register index.js

Command Line,基于封装后的cli,不过是换一种形式进行模块的提前处理。babel-node直接利用它的babel语法优势来运行esm代码。由于babel本身还是js的实现,它的官方文档也表明了不建议在生产环境使用,会导致内存高占用的问题,这也是这一类工具的通病。

babel-node index.js

同样,esno可以直接在命令行运行esm代码。原理基于esbuild。在这里更推荐使用这种方式,鉴于esbuild是由go语言实现,能够较大程度解决内存高占用的问题,保证了一定的执行性能。

esno index.ts
esmo index.ts

这一类第三方仓库适合在低版本nodejs且非生产环境使用,它们的存在是为了便利性,而并非实用性和稳定性。怎么样才能高效地运行esm代码?

3.Native Nodejs运行esm

Node verison 13.2.0 起开始正式支持 ES Modules 特性

所以利用Native Nodejs环境运行esm代码是非常必要的,高版本的Nodejs提供了直接运行esm的功能,这里建议使用lts14版本。有两种方式运行esm代码:

第一种,package.json中填写type: "modules",表明模块的类型。此后,直接运行node index.js即可。

// pakage.json
{
  ...
  "type": "modules"
}

第二种,则是将文件名改成.mjs,标明该文件是esm代码。这两种方式最大的区别则是模块作用域。前者是包的作用域,它的声明是以package为维度。后者则是以文件为维度,不受限于包的作用域。

如何在浏览器运行esm

浏览器script type="module"兼容性

浏览器的情况有别于Nodejs环境,在大部分的新版本浏览器都支持esm的运行。esm 级别的代码编译和打包,可以有效地减少包的体积和资源传输速度。这也是为什么像 vite 这样的框架会采用现代浏览器的打包模式(外加legacy兼容模式)的原因。具体的原理是在 html 当中的 script 标签加入type="module" 则表明它引入的是esm代码,当旧浏览器没法支持esm的情况下,它会读取nomodule script中的地址,读取兼容版本的 js 代码。这样一来,可以有效地减少大部分浏览器加载的 js 体积,又保证了老浏览器的兼容性问题。

<script type="module" src="dist/index.js"></script>
<script nomodule src="dist/index.legacy.js"></script>

总结

如今Nodejs和浏览器环境都能对esm语法有了很好的 Native 支持。作为前端工程师的我们,应该要保持着技术的前瞻性,在写一个仓库的时候,我们要想到要用typescript,esm还是common.js呢?为什么我们不选择比较新的 js 运行环境,迎接Javascript的第三个时代,参考《ESM Import与Bundleless》

参考资料

2020年我们可以在Node中使用ES Modules了吗

推荐阅读更多精彩内容