怎么用 Node.js 輔助 imgcook 自動(dòng)生成依賴？下面本篇文章就來(lái)給大家介紹一下生成方法，有一定的參考價(jià)值，希望對(duì)大家有所幫助！

imgcook 在淘寶內(nèi)部版本提供了類似依賴管理的功能，用于在 imgcook 編輯器編寫函數(shù)時(shí)引入其他依賴包，比如 axios、underscore、@rax/video 等。

不過(guò)從使用體驗(yàn)上，還是較為繁瑣，因?yàn)榫庉嬈鞑](méi)有讓大家形成像在 package.json 聲明依賴的習(xí)慣，而且因?yàn)榫庉嬈魇?GUI 界面，所以從每個(gè)函數(shù)打開(kāi)代碼，并查看依賴的操作是比較繁瑣的，這就導(dǎo)致每次開(kāi)發(fā)完一個(gè) imgcook 模塊后，如果依賴了其他包（大部分情況下都需要），就需要一個(gè)個(gè)打開(kāi)函數(shù)并確認(rèn)版本號(hào)，并在依賴管理中添加，這在我使用的過(guò)程中，往往是一次痛苦的過(guò)程。

如何解決

imgcook 提供了 Schema 源碼開(kāi)發(fā)模式，通過(guò)在編輯器中直接修改模塊協(xié)議（Schema）就能替代 GUI 的操作步驟，然后通過(guò)搜索 dependencies，我發(fā)現(xiàn)依賴管理功能是通過(guò)協(xié)議中的 imgcook.dependencies 實(shí)現(xiàn)的：

{   "alias": "Axios",      "packageRax1": "axios",   "versionRax1": "^0.24.0",   "packageRaxEagle": "axios",      "versionRaxEagle": "^0.24.0",      "checkDepence": true  }

由于函數(shù)的代碼也存在協(xié)議中，那么是不是只需通過(guò)處理原協(xié)議文檔，掃描出對(duì)應(yīng)的依賴并保存到節(jié)點(diǎn)中，再點(diǎn)擊“保存”就可以看到依賴管理中的包列表被更新了。

實(shí)現(xiàn)功能

為此我在 @imgcook/cli 中實(shí)現(xiàn)了拉取模塊協(xié)議內(nèi)容的功能，具體 Pull Request 有：imgcook/imgcook-cli#12 和 imgcook/imgcook-cli#15，可以通過(guò)命令行工具拉取對(duì)應(yīng)模塊的協(xié)議（Schema）如下：

$ imgcook pull <id> -o json

執(zhí)行后會(huì)把模塊協(xié)議內(nèi)容輸出到命令行中的 stdout。

有了這個(gè)功能后，就可以實(shí)現(xiàn)一些命令行工具，基于 Unix Pipeline 程序，與 imgcook-cli 的數(shù)據(jù)源形成協(xié)作，舉個(gè)例子，通過(guò) imgcook pull 輸出的 JSON 并不易讀，那么不妨寫一個(gè) imgcook-prettyprint 來(lái)美化輸出結(jié)果，代碼實(shí)現(xiàn)如下：

#!/usr/bin/env node  let originJson = '';  process.stdin.on('data', (buf) => {      originJson += buf.toString('utf8');    });  process.stdin.on('end', () => {      const origin = JSON.parse(originJson);      console.log(JSON.stringify(origin, null, 2));  });

上面的程序通過(guò) process.stdin 接收管線（Pipeline）上游的數(shù)據(jù)，即 imgcook 模塊協(xié)議內(nèi)容，然后在 end 事件中解析并美化輸出，運(yùn)行如下命令：

$ imgcook pull <id> -o json | imgcook-prettyprint

就能看到美化后的輸出結(jié)果了，這就是一個(gè) Unix Pipeline 程序的簡(jiǎn)單示例。

接下來(lái)就來(lái)看下如何通過(guò)這種方式，完成依賴的自動(dòng)生成。與上面例子類似，我們?cè)賱?chuàng)建一個(gè)文件 ckdeps：

#!/usr/bin/env node  let originJson = '';  process.stdin.on('data', (buf) => {      originJson += buf.toString('utf8');    });  process.stdin.on('end', () => {      transform();  });   async function transform() {      const origin = JSON.parse(originJson);      const funcs = origin.imgcook?.functions || [];      if (funcs.length === 0) {          process.stdout.write(originJson);          return;      }      console.log(JSON.stringify(origin));  }

通過(guò) origin.imgcook.functions，可以獲取到函數(shù)的代碼內(nèi)容，比如：

{      "content": "export default function mounted() {nn}",      "name": "mounted",      "type": "lifeCycles"  }

那么接下來(lái)就是通過(guò)解析 content，獲取到代碼中的 import 語(yǔ)句，再生成對(duì)應(yīng)的依賴對(duì)象到 origin.imgcook.dependencies 中，那么我們需要引用 @swc/core 來(lái)解析 JavaScript 代碼：

const swc = require('@swc/core');   await Promise.all(funcs.map(async ({ content }) => {      const ast = await swc.parse(content);    	// the module AST(Abstract Syntax Tree)  }));

獲取到 ast 后，就能通過(guò)代碼獲取 import 語(yǔ)句的信息了，不過(guò)由于 ast 比較復(fù)雜，@swc/core 提供了專用的遍歷機(jī)制如下：

const { Visitor } = require('@swc/core/visitor');   /**    * 用于保存通過(guò)函數(shù)解析， 獲得的依賴對(duì)象列表    */  const liveDependencies = [];   /**  * 定義訪問(wèn)器  */  class ImportsExtractor extends Visitor {      visitImportDeclaration(node) {          let alias = 'Default';          liveDependencies.push({              alias,              packageRax1: node.source.value,              versionRax1: '',              packageRaxEagle: node.source.value,              versionRaxEagle: '',              checkDepence: true,          });          return node;      }  }   // 使用方式  const importsExtractor = new ImportsExtractor();  importsExtractor.visitModule(ast);

類 ImportsExtractor 繼承自 @swc/core/visitor 的 Visitor，由于是要遍歷 import 聲明語(yǔ)句，它的語(yǔ)法類型名稱是 ImportDeclaration，因此只需要實(shí)現(xiàn) visitImportDeclaration(node) 方法，即可在方法內(nèi)獲得所有的 import 語(yǔ)句，再按照對(duì)應(yīng)節(jié)點(diǎn)的結(jié)構(gòu)轉(zhuǎn)換成依賴對(duì)象并更新就好。定義好抽取器后，剩下的事情就是把 ast 喂給抽取器，這樣就能把模塊所有的依賴都收集起來(lái)，用于后面依賴的生成。

從上面的代碼可以看到，版本號(hào)目前使用了空字符串，這會(huì)導(dǎo)致我們?nèi)绻聟f(xié)議內(nèi)容，依賴的版本信息會(huì)丟失，因此我們需要定義一種獲取版本的方法。

由于前端的依賴都是存儲(chǔ)在 NPM Registry 上的，因此我們可以通過(guò) HTTP 接口來(lái)獲取版本，比如：

const axios = require('axios');  async function fillVersions(dep) {      const pkgJson = await axios.get(`https://registry.npmjs.org/${dep.packageRax1}`, { type: 'json' });      if (pkgJson.data['dist-tags']) {          const latestVersion = pkgJson.data['dist-tags'].latest;          dep.versionRax1 = `^${latestVersion}`;          dep.versionRaxEagle = `^${latestVersion}`;     }     return dep;  }

我們按照 https://registry.npmjs.org/${packageName} 的規(guī)則，就能拿到存儲(chǔ)在 Registry 中的包信息，然后 data['dist-tags'].latest 代表的是 latest 標(biāo)簽對(duì)應(yīng)的版本，簡(jiǎn)單來(lái)說(shuō)就是當(dāng)前包的最新版本，然后再基于這個(gè)版本號(hào)增加一個(gè) ^ 版本前綴即可（你也可以按照自己的訴求修改最終的版本以及 NPM Registry）。

最后一步，就是把我們從函數(shù)代碼中抓取的依賴信息更新，并輸出出來(lái)：

async function transform() {      // ...      origin.imgcook.dependencies = newDeps;      console.log(JSON.stringify(origin));  }

然后通過(guò)運(yùn)行：

$ imgcook pull <id> -o json | ckdeps  > { ..., "dependencies": [{ ...<updated dependencies> }] }

然后，開(kāi)發(fā)者只需要把輸出的 JSON 拷貝到編輯器中保存。哦，等等，在編輯器中并不能直接使用 JSON 保存，而是需要使用 ECMAScript Module 的方式（export default { ... }），那這樣是不是意味著每次都需要手動(dòng)編輯一下呢，答案是否，Unix Pipeline 的思路非常利于解決這種流程問(wèn)題，我們只需要再新建一個(gè)節(jié)點(diǎn)腳本 imgcook-save 即可：

#!/usr/bin/env node  let originJson = '';  process.stdin.on('data', (buf) => {     originJson += buf.toString('utf8');   });  process.stdin.on('end', () => {     transform();  });   async function transform() {      const origin = JSON.parse(originJson);     console.log(`export default ${JSON.stringify(origin, null, 2)}`); }

最后完整的命令是：

$ imgcook pull <id> -o json | ckdeps | imgcook-save  > export default {   ... }

這樣，我們就可以直接拷貝內(nèi)容到編輯器。

效果體驗(yàn)

比如，我在喔其中一個(gè)項(xiàng)目的 created 函數(shù)中增加了 axios 的依賴，關(guān)閉窗口后點(diǎn)擊保存（確保 Schema 保存），然后通過(guò)命令：

$ imgcook pull <id> -o json | ckdeps -f | imgcook-save

然后在編輯器中打開(kāi) Schema 編輯，復(fù)制生成的內(nèi)容并保存，然后打開(kāi)“依賴管理”可以看到：

通過(guò)解析生成的代碼已經(jīng)更新到依賴面板了，這下終于可以解放雙手，去做其他的事情了。

One more thing?

是不是這樣就結(jié)束了呢？在 macOS 中，提供了 pbcopy 命令，可以復(fù)制 stdin 到剪貼板，那么跟 imgcook 的例子結(jié)合一下：

$ imgcook pull <id> -o json | ckdeps | imgcook-save | pbcopy

這樣就省掉了自己拷貝的工作，命令執(zhí)行完直接打開(kāi)編輯器 ?V 即可。

最后的最后，我要升華一下主題，在 @imgcook/cli 支持了輸出 JSON 文本的功能后，就意味著 imgcook 接入了 Unix Pipeline 的生態(tài)，通過(guò)這種方式，我們可以在這個(gè)過(guò)程中構(gòu)建很多有趣實(shí)用的工具，并與很多 Unix 工具協(xié)作使用（比如 bpcopy、grep、cat、sort 等）。

本文只是通過(guò)依賴的自動(dòng)生成為例，使用 Unix Pipeline 的方式，驗(yàn)證了其可行性以及和 imgcook 編輯器配合使用的體驗(yàn)，目前來(lái)說(shuō)，我可以通過(guò)這種方式，彌補(bǔ)不少編輯器上的體驗(yàn)缺失，讓我更方便地使用 imgcook 的核心功能。