利用 std/esm 在 Node.js 开发中使用 ES Modules 整理自ES Modules in Node Today!,从属于笔者的现代 JavaScript 开发:语法基础与实践技巧系列中的模块化与构建章节。本文主要介绍了如何利用 std/esm 第三方库在 Node.js 应用中顺滑地使用 ES Modules 语法。
利用 std/esm 在 Node.js 开发中使用 ES Modules
随着主流浏览器逐步开始支持 ES Modules 标准,越来越多的目光投注于 Node.js 对于 ESM 的支持实现上;目前 Node.js 使用 CommonJS 作为官方的模块解决方案,虽然内置的模块方案促进了 Node.js 的流行,但是也为引入新的 ES Modules 造成了一定的阻碍。CommonJS 与 ES Modules 模块标准的对比如下:
// CJS
const a = require("./a")
module.exports = { a, b: 2 }
// ESM
import a from "./a"
export default { a, b: 2 }
鉴于 CommonJS 并不兼容于 ES Modules,Node.js 打算引入 .mjs
(Modular JavaScript)文件扩展来指明模块解析规则;这个有点类似于目前对于 JSON 文件的解析,如果我们指明了载入 .json
格式文件,Node.js 会自动调用 JSON.parse
方法。Node.js 拟计划在 2020 年发布的 9.x 版本中引入内置的 ESM 支持,详细的 Node.js 中 ESM 实现规范查看 Node.js 官方文档 ES Module Interoperability;而目前主流的办法即是采用 Rollup、Webpack 这样的构建工具或者 Babel 这样的转化工具来进行代码转化。
而近日正式发布的 @std/esm 为我们提供了高性能的 Node.js 中 CommonJS 与 ES Modules 模块间调用,其能够作用于 Node.js 4.x 以上版本;它能够顺滑地集成到现有的 Webpack、Babel 环境中,并且支持不同模块使用不同的依赖版本。不同于目前的解决方案需要是发布编译之后的 CommonJS 格式的文件,[@std/esm] 能够以最小的代价的、按需转化的、动态缓存的方式来进行源代码转化,其基本命令行中的使用方式如下所示:
> require('@std/esm')
@std/esm enabled
> import path from 'path';
undefined
> path.join("Hello","World");
'Hello/World'
[@std/esm] 除了会自动识别 .mjs
扩展的文件之外,它还支持任何包含 import/export
、Dynamic import、file URI scheme 等语句的文件,典型的用例如下:
// 首先安装依赖
npm i --save @std/esm
// index.js
import hello from "./main.js";
hello();
// main.js
import thing from "./constants.js";
export default function hello() {
console.log(thing);
}
// constants.js
export default "Hello World!";
// 运行文件
node -r @std/esm index.js
// Hello World!
笔者在自己尝试的时候发现 @std/esm 还存在些 Bug,对于缓存代码的处理也并不完善,目前并不建议直接用于生产环境,但是有所了解还是不错的。@std/esm 官方给出的与 Node.js 9 以及 CommonJS 模块的加载时间对比如下,可以发现还是很接近于内建的解决方案性能的:
- Loading CJS equivs was ~0.28 milliseconds per module
- Loading built-in ESM was ~0.51 milliseconds per module
- First
@std/esm
no cache run was ~1.56 milliseconds per module - Secondary
@std/esm
cached runs were ~0.54 milliseconds per module
延伸阅读
- 更多 Node.js 相关资料参考 这里
- 多个提高Node.js应用吞吐量的小优化技巧介绍
- JavaScript 语法树与代码转化
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。