建站
咨詢
售后
建站咨詢
新聞中心
閱讀完本文后，你將了解 esno 項(xiàng)目是如何執(zhí)行 TS 文件。此外，你還會(huì)了解如何劫持 Node.js 的 require 函數(shù)、如何為 ES Module 的 import 語(yǔ)句添加鉤子及如何自定義 https 加載器，以支持 import React from "https://esm.sh/react" 導(dǎo)入方式。
創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、魯山網(wǎng)絡(luò)推廣、成都小程序開(kāi)發(fā)、魯山網(wǎng)絡(luò)營(yíng)銷、魯山企業(yè)策劃、魯山品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供魯山建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com
esno 是什么
esno 是基于 esbuild 的 TS/ESNext node 運(yùn)行時(shí)。該庫(kù)會(huì)針對(duì)不同的模塊化標(biāo)準(zhǔn)，采用不同的方案：
- esno - Node in CJS mode - by esbuild-register
- esmo - Node in ESM mode - by esbuild-node-loader
使用 esno 的方式很簡(jiǎn)單，你可以以全局或局部的方式來(lái)安裝它：
全局安裝
$ npm i -g esno
在安裝成功后，你就可以通過(guò)以下方式來(lái)直接執(zhí)行 TS 文件：
$ esno index.ts
$ esmo index.ts
局部安裝
$ npm i esno
而對(duì)于局部安裝的方式來(lái)說(shuō)，一般情況下，我們會(huì)以 npm scripts 的方式來(lái)使用它：
{
"scripts": {
"start": "esno index.ts"
},
"dependencies": {
"esno": "0.14.0"
}
}
esno 是如何工作的
在開(kāi)始分析 esno 的工作原理之前，我們先來(lái)熟悉一下該項(xiàng)目：
├── LICENSE
├── README.md
├── esmo.mjs
├── esno.js
├── package.json
├── pnpm-lock.yaml
├── publish.ts
└── tsconfig.json
觀察以上的項(xiàng)目結(jié)構(gòu)可知，該項(xiàng)目并不會(huì)復(fù)雜。在項(xiàng)目根目錄下的 package.json 文件中，我們看到了前面介紹的 esno 和 esmo 命令。
{
"bin": {
"esno": "esno.js",
"esmo": "esmo.mjs"
},
}
此外，在 package.json 的 scripts 字段中，我們發(fā)現(xiàn)了 release 命令。顧名思義，該命令用來(lái)發(fā)布版本。
{
"scripts": {
"release": "npx bumpp --tag --commit --push && node esmo.mjs publish.ts"
},
}
需要注意的是，在 publish.ts 文件中，使用到了 2021 年度 Github 上最耀眼的項(xiàng)目 zx，利用該項(xiàng)目我們可以輕松地編寫(xiě)命令行腳本。寫(xiě)作本文時(shí)，它的 Star 數(shù)已經(jīng)高達(dá) 27.5K，強(qiáng)烈推薦感興趣的小伙伴關(guān)注一下該項(xiàng)目。
簡(jiǎn)單介紹了 esno 項(xiàng)目之后，接下來(lái)我們來(lái)分析 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)
由以上代碼可知，當(dāng)執(zhí)行 esno index.ts 命令后，會(huì)通過(guò) spawnSync 來(lái)啟動(dòng) Node.js 程序執(zhí)行腳本。需要注意的是，在執(zhí)行時(shí)使用了 -r 選項(xiàng)，該選項(xiàng)的作用是預(yù)加載模塊：
-r, --require = ... module to preload (option can be repeated)
這里預(yù)加載的模塊是 esbuild-register，該模塊就是 esno 命令執(zhí)行 TS 文件的幕后英雄。
esbuild-register 是什么
esbuild-register 是一個(gè)基于 esbuild 來(lái)轉(zhuǎn)換 JSX、TS 和 esnext 特性的工具。你可以通過(guò)以下多種方式來(lái)安裝它：
$ npm i esbuild esbuild-register -D
# Or Yarn
$ yarn add esbuild esbuild-register --dev
# Or pnpm
$ pnpm add esbuild esbuild-register -D
在成功安裝該模塊之后，就可以在命令行中，直接通過(guò) node 應(yīng)用程序來(lái)執(zhí)行 ts 文件：
$ node -r esbuild-register file.ts
-r, --require = ... module to preload (option can be repeated)
-r 用于指定預(yù)加載的文件，即在執(zhí)行 file.ts 文件前，提前加載 esbuild-register 模塊
它將會(huì)使用 tsconfig.json 中的 jsxFactory,jsxFragmentFactory 和 target 配置項(xiàng)來(lái)執(zhí)行轉(zhuǎn)換操作。
esbuild-register 不僅可以在命令行中使用，而且還可以通過(guò) API 的方式進(jìn)行使用：
const { register } = require('esbuild-register/dist/node')
const { unregister } = register({
// ...options
})
// Unregister the require hook if you don't need it anymore
unregister()
了解完 esbuild-register 的基本使用之后，接下來(lái)我們來(lái)分析它內(nèi)部是如何工作的。
esbuild-register 是如何工作的
esbuild-register 內(nèi)部利用了 pirates 這個(gè)庫(kù)來(lái)劫持 Node.js 的 require 函數(shù)，從而讓你可以在命令行中，直接執(zhí)行 ts 文件。下面我們來(lái)看一下 esbuild-register 模塊中定義的 register 函數(shù)：
// 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()
},
}
}
觀察以上的代碼可知，在 register 函數(shù)內(nèi)部是利用 esbuild 模塊提供的 transformSync API 來(lái)實(shí)現(xiàn) ts -> js 代碼的轉(zhuǎn)換。其實(shí)最關(guān)鍵的環(huán)節(jié)，還是通過(guò)調(diào)用 pirates 這個(gè)庫(kù)提供的 addHook 函數(shù)來(lái)注冊(cè)編譯 ts 文件的鉤子。那么 addHook 函數(shù)內(nèi)部到底做了哪些處理呢?下面我們來(lái)看一下它的實(shí)現(xiàn)：
// 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) => {
// 獲取已注冊(cè)的loader，若未找到，則默認(rèn)使用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) {
// 這里需要恢復(fù)成原來(lái)的_compile函數(shù)，否則會(huì)出現(xiàn)死循環(huán)
mod._compile = compile;
// 在編譯前先執(zhí)行用戶自定義的hook函數(shù)
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);
};
});
}
其實(shí) addHook 函數(shù)的實(shí)現(xiàn)并不會(huì)復(fù)雜，該函數(shù)內(nèi)部就是通過(guò)替換 mod._compile 方法來(lái)實(shí)現(xiàn)鉤子的功能。即在調(diào)用原始的 mod._compile 方法進(jìn)行編譯前，會(huì)先調(diào)用 hook(code, filename)函數(shù)來(lái)執(zhí)行用戶自定義的 hook 函數(shù)，從而對(duì)代碼進(jìn)行預(yù)處理。
而對(duì)于 esbuild-register 庫(kù)中的 register 函數(shù)來(lái)說(shuō)，當(dāng) hook 函數(shù)執(zhí)行時(shí)，就會(huì)調(diào)用該函數(shù)內(nèi)部定義的 compile 函數(shù)來(lái)編譯 ts 代碼，然后再調(diào)用mod._compile 方法編譯生成的 js 代碼。
關(guān)于 esbuild-register 和 pirates 這兩個(gè)庫(kù)的內(nèi)容就先介紹到這里，如果你想詳細(xì)了解 pirates 這個(gè)庫(kù)是如何工作的，可以閱讀 如何為 Node.js 的 require 函數(shù)添加鉤子? 這篇文章。
現(xiàn)在我們已經(jīng)分析完 esno.js 文件，接下來(lái)我們來(lái)分析 esmo.mjs 文件。
esmo 是如何工作的
esmo 命令對(duì)應(yīng)的是 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)
})
由以上代碼可知，當(dāng)使用 node 應(yīng)用程序執(zhí)行 ES Module 文件時(shí)，會(huì)通過(guò) --loader 選項(xiàng)來(lái)指定自定義的 ES Module 加載器。
--loader, --experimental-loader = ... use the specified module as a custom loader
需要注意的是，通過(guò) --loader 選項(xiàng)指定的自定義加載器只適用于 ES Module 的 import 調(diào)用，并不適用于 CommonJS 的 require 調(diào)用。
那么自定義加載器有什么作用呢?在當(dāng)前最新的 Node.js v17.4.0 版本中，還不支持以 https://開(kāi)頭的說(shuō)明符。我們可以在自定義加載器中，利用 Node.js 提供的鉤子機(jī)制，讓 Node.js 可以使用import 導(dǎo)入以 https:// 協(xié)議開(kāi)頭的 ES 模塊。
在分析如何自定義 https 資源加載器前，我們需要先介紹一下 import 說(shuō)明符的概念。
import 說(shuō)明符
import 語(yǔ)句的說(shuō)明符是 from 關(guān)鍵字之后的字符串，例如 import { sep } from 'path' 中的 'path'。說(shuō)明符也用于 export from 語(yǔ)句，并作為import() 表達(dá)式的參數(shù)。
分享題目：又一個(gè)基于Esbuild的神器！
文章來(lái)源：http://m.5511xx.com/article/cojoopg.html
