深圳幻海软件技术有限公司 欢迎您！
更多

又一个基于 Esbuild 的神器！

2023-02-28

node ts esno
Node.js并不支持直接执行TS文件，如果要执行TS文件的话，我们就可以借助ts-node这个库。相信有些小伙伴在工作中也用过这个库，关于ts-node这个库的相关内容我就不展开介绍了，因为本文的主角是由antfu大佬开源的esno项目，接下来我将带大家一起来揭开这个项目背后的秘密。阅读完本文后，

Node.js 并不支持直接执行 TS 文件，如果要执行 TS 文件的话，我们就可以借助 ts-node 这个库。相信有些小伙伴在工作中也用过这个库，关于 ts-node 这个库的相关内容我就不展开介绍了，因为本文的主角是由 antfu 大佬开源的 esno 项目，接下来我将带大家一起来揭开这个项目背后的秘密。

阅读完本文后，你将了解 esno 项目是如何执行 TS 文件。此外，你还会了解如何劫持 Node.js 的 require 函数、如何为 ES Module 的 import 语句添加钩子及如何自定义 https 加载器，以支持 import React from "https://esm.sh/react" 导入方式。

esno 是什么

esno 是基于 esbuild 的 TS/ESNext node 运行时。该库会针对不同的模块化标准，采用不同的方案：

  • esno - Node in CJS mode - by esbuild-register
  • esmo - Node in ESM mode - by esbuild-node-loader

使用 esno 的方式很简单，你可以以全局或局部的方式来安装它：

全局安装

$ npm i -g esno

  • 1.

在安装成功后，你就可以通过以下方式来直接执行 TS 文件：

$ esno index.ts
$ esmo index.ts

  • 1.
  • 2.

局部安装

$ npm i esno

  • 1.

而对于局部安装的方式来说，一般情况下，我们会以 npm scripts 的方式来使用它：

{
  "scripts": {
    "start": "esno index.ts"
  },
  "dependencies": {
    "esno": "0.14.0"
  }
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

esno 是如何工作的

在开始分析 esno 的工作原理之前，我们先来熟悉一下该项目：

├── LICENSE
├── README.md
├── esmo.mjs
├── esno.js
├── package.json
├── pnpm-lock.yaml
├── publish.ts
└── tsconfig.json

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

观察以上的项目结构可知，该项目并不会复杂。在项目根目录下的 package.json 文件中，我们看到了前面介绍的 esno 和 esmo 命令。

{
  "bin": {
    "esno": "esno.js",
    "esmo": "esmo.mjs"
  },
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

此外，在 package.json 的 scripts 字段中，我们发现了 release 命令。顾名思义，该命令用来发布版本。

{
  "scripts": {
    "release": "npx bumpp --tag --commit --push && node esmo.mjs publish.ts"
  },
}  

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

需要注意的是，在 publish.ts 文件中，使用到了 2021 年度 Github 上最耀眼的项目 zx，利用该项目我们可以轻松地编写命令行脚本。写作本文时，它的 Star 数已经高达 27.5K，强烈推荐感兴趣的小伙伴关注一下该项目。

简单介绍了 esno 项目之后，接下来我们来分析 esno.js 文件：

#!/usr/bin/env node

const spawn = require('cross-spawn')
const spawnSync = spawn.sync

const register = require.resolve('esbuild-register')

const argv = process.argv.slice(2)

process.exit(spawnSync('node', ['-r', register, ...argv], 
  { stdio: 'inherit' }).status)

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

由以上代码可知，当执行 esno index.ts 命令后，会通过 spawnSync 来启动 Node.js 程序执行脚本。需要注意的是，在执行时使用了 -r 选项，该选项的作用是预加载模块：

-r, --require = ... module to preload (option can be repeated)

  • 1.

这里预加载的模块是 esbuild-register，该模块就是 esno 命令执行 TS 文件的幕后英雄。

esbuild-register 是什么

esbuild-register 是一个基于 esbuild 来转换 JSX、TS 和 esnext 特性的工具。你可以通过以下多种方式来安装它：

$ npm i esbuild esbuild-register -D
# Or Yarn
$ yarn add esbuild esbuild-register --dev
# Or pnpm
$ pnpm add esbuild esbuild-register -D

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

在成功安装该模块之后，就可以在命令行中，直接通过 node 应用程序来执行 ts 文件：

$ node -r esbuild-register file.ts

  • 1.

-r, --require = ... module to preload (option can be repeated)

-r 用于指定预加载的文件，即在执行 file.ts 文件前，提前加载 esbuild-register 模块

它将会使用 tsconfig.json 中的 jsxFactory,jsxFragmentFactory 和 target 配置项来执行转换操作。

esbuild-register 不仅可以在命令行中使用，而且还可以通过 API 的方式进行使用：

const { register } = require('esbuild-register/dist/node')

const { unregister } = register({
  // ...options
})

// Unregister the require hook if you don't need it anymore
unregister()

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

了解完 esbuild-register 的基本使用之后，接下来我们来分析它内部是如何工作的。

esbuild-register 是如何工作的

esbuild-register 内部利用了 pirates 这个库来劫持 Node.js 的 require 函数，从而让你可以在命令行中，直接执行 ts 文件。下面我们来看一下 esbuild-register 模块中定义的 register 函数：

// esbuild-register/src/node.ts
import { transformSync, TransformOptions } from 'esbuild'
import { addHook } from 'pirates'

export function register(esbuildOptions: RegisterOptions = {}) {
  const {
    extensions = DEFAULT_EXTENSIONS,
    hookIgnoreNodeModules = true,
    hookMatcher,
    ...overrides
  } = esbuildOptions

  // 利用 transformSync 
  const compile: COMPILE = function compile(code, filename, format) {
    const dir = dirname(filename)
    const options = getOptions(dir)
    format = format ?? inferPackageFormat(dir, filename)

    const {
      code: js,
      warnings,
      map: jsSourceMap,
    } = transformSync(code, {
      sourcefile: filename,
      sourcemap: 'both',
      loader: getLoader(filename),
      target: options.target,
      jsxFactory: options.jsxFactory,
      jsxFragment: options.jsxFragment,
      format,
      ...overrides,
    })
 // 省略部分代码
  }

  const revert = addHook(compile, {
    exts: extensions,
    ignoreNodeModules: hookIgnoreNodeModules,
    matcher: hookMatcher,
  })

  return {
    unregister() {
      revert()
    },
  }
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.

观察以上的代码可知，在 register 函数内部是利用 esbuild 模块提供的 transformSync API 来实现 ts -> js 代码的转换。其实最关键的环节，还是通过调用 pirates 这个库提供的 addHook 函数来注册编译 ts 文件的钩子。那么 addHook 函数内部到底做了哪些处理呢?下面我们来看一下它的实现：

// pirates-4.0.5/src/index.js
export function addHook(hook, opts = {}) {
  let reverted = false;
  const loaders = []; // 存放新的loader
  const oldLoaders = []; // 存放旧的loader
  let exts;

  const originalJSLoader = Module._extensions['.js']; // 原始的JS Loader 
  // 省略部分代码
  exts.forEach((ext) => {
    // 获取已注册的loader，若未找到，则默认使用JS Loader
    const oldLoader = Module._extensions[ext] || originalJSLoader;
    oldLoaders[ext] = Module._extensions[ext];

    loaders[ext] = Module._extensions[ext] = function newLoader(
   mod, filename) {
      let compile;
      if (!reverted) {
        if (shouldCompile(filename, exts, matcher, ignoreNodeModules)) {
          compile = mod._compile;
          mod._compile = function _compile(code) {
            // 这里需要恢复成原来的_compile函数，否则会出现死循环
            mod._compile = compile;
            // 在编译前先执行用户自定义的hook函数
            const newCode = hook(code, filename);
            if (typeof newCode !== 'string') {
              throw new Error(HOOK_RETURNED_NOTHING_ERROR_MESSAGE);
            }

            return mod._compile(newCode, filename);
          };
        }
      }

       oldLoader(mod, filename);
     };
  });
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.

其实 addHook 函数的实现并不会复杂，该函数内部就是通过替换 mod._compile 方法来实现钩子的功能。即在调用原始的 mod._compile 方法进行编译前，会先调用 hook(code, filename)函数来执行用户自定义的 hook 函数，从而对代码进行预处理。

而对于 esbuild-register 库中的 register 函数来说，当 hook 函数执行时，就会调用该函数内部定义的 compile 函数来编译 ts 代码，然后再调用mod._compile 方法编译生成的 js 代码。

关于 esbuild-register 和 pirates 这两个库的内容就先介绍到这里，如果你想详细了解 pirates 这个库是如何工作的，可以阅读 如何为 Node.js 的 require 函数添加钩子? 这篇文章。

现在我们已经分析完 esno.js 文件，接下来我们来分析 esmo.mjs 文件。

esmo 是如何工作的

esmo 命令对应的是 esmo.mjs 文件：

#!/usr/bin/env node

import spawn from 'cross-spawn'
import { resolve } from 'import-meta-resolve'
const spawnSync = spawn.sync

const argv = process.argv.slice(2)
resolve('esbuild-node-loader', import.meta.url).then((path) => {
  process.exit(spawnSync('node', ['--loader', path, ...argv], 
 { stdio: 'inherit' }).status)
})

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

由以上代码可知，当使用 node 应用程序执行 ES Module 文件时，会通过 --loader 选项来指定自定义的 ES Module 加载器。

--loader, --experimental-loader = ... use the specified module as a custom loader

  • 1.

需要注意的是，通过 --loader 选项指定的自定义加载器只适用于 ES Module 的 import 调用，并不适用于 CommonJS 的 require 调用。

那么自定义加载器有什么作用呢?在当前最新的 Node.js v17.4.0 版本中，还不支持以 https://开头的说明符。我们可以在自定义加载器中，利用 Node.js 提供的钩子机制，让 Node.js 可以使用import 导入以 https:// 协议开头的 ES 模块。

在分析如何自定义 https 资源加载器前，我们需要先介绍一下 import 说明符的概念。

import 说明符

import 语句的说明符是 from 关键字之后的字符串，例如 import { sep } from 'path' 中的 'path'。说明符也用于 export from 语句，并作为import() 表达式的参数。

如何两天时间上线一款AI应用？
用自己的编程语言实现了一个网站（增强版）