在Nodejs或浏览器运行ESM代码

发布网友 发布时间：2024-09-17 03:27

我来回答

共1个回答

热心网友 时间：2024-11-01 18:03

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

CommonJs可以动态加载语句，代码发生在运行时

CommonJs导出值是拷贝,不好排查引起变量污染

ESM是静态的，代码发生在编译时

ESM导出是引用值之前都存在映射关系，并且值都是可读的，不能修改。参考聊聊什么是CommonJs和EsModule及它们的区别

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

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

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

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

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

在Nodejs版本较低的情况，我们可以利用一些工具，工具的使用形式有几种，一种是ModuleLoader，另一种是CommandLine（简称为cli）。

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

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

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

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

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

Nodeverison13.2.0起开始正式支持ESModules特性

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

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

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

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

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

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