本篇內(nèi)容介紹了“Node.js + imgcook如何自動(dòng)生成依賴”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)公司是網(wǎng)站建設(shè)專家,致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營(yíng)銷，專業(yè)領(lǐng)域包括成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、電商網(wǎng)站制作開發(fā)、小程序設(shè)計(jì)、微信營(yíng)銷、系統(tǒng)平臺(tái)開發(fā)，與其他網(wǎng)站設(shè)計(jì)及系統(tǒng)開發(fā)公司不同，我們的整合解決方案結(jié)合了恒基網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗(yàn)和互聯(lián)網(wǎng)整合營(yíng)銷的理念，并將策略和執(zhí)行緊密結(jié)合，且不斷評(píng)估并優(yōu)化我們的方案，為客戶提供全方位的互聯(lián)網(wǎng)品牌整合方案！

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

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

如何解決

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

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

由于函數(shù)的代碼也存在協(xié)議中，那么是不是只需通過處理原協(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，可以通過命令行工具拉取對(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è)例子，通過 imgcook pull 輸出的 JSON 并不易讀，那么不妨寫一個(gè) imgcook-prettyprint 來美化輸出結(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)); 
});

上面的程序通過 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)單示例。

接下來就來看下如何通過這種方式，完成依賴的自動(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)); 
}

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

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

那么接下來就是通過解析 content，獲取到代碼中的 import 語(yǔ)句，再生成對(duì)應(yīng)的依賴對(duì)象到 origin.imgcook.dependencies 中，那么我們需要引用 @swc/core 來解析 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 后，就能通過代碼獲取 import 語(yǔ)句的信息了，不過由于 ast 比較復(fù)雜，@swc/core 提供了專用的遍歷機(jī)制如下：

const { Visitor } = require('@swc/core/visitor'); 

/**  
 * 用于保存通過函數(shù)解析， 獲得的依賴對(duì)象列表  
 */ 
const liveDependencies = []; 

/**  * 定義訪問器  */ 
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 喂給抽取器，這樣就能把模塊所有的依賴都收集起來，用于后面依賴的生成。

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

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

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)單來說就是當(dāng)前包的最新版本，然后再基于這個(gè)版本號(hào)增加一個(gè) ^ 版本前綴即可（你也可以按照自己的訴求修改最終的版本以及 NPM Registry）。

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

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

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

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

然后，開發(fā)者只需要把輸出的 JSON 拷貝到編輯器中保存。哦，等等，在編輯器中并不能直接使用 JSON 保存，而是需要使用 ECMAScript Module 的方式（export default { ... }），那這樣是不是意味著每次都需要手動(dòng)編輯一下呢，答案是否，Unix Pipeline 的思路非常利于解決這種流程問題，我們只需要再新建一個(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 保存），然后通過命令：

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

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

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

One more thing?

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

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

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

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

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

“Node.js + imgcook如何自動(dòng)生成依賴”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

網(wǎng)頁(yè)名稱：Node.js+imgcook如何自動(dòng)生成依賴
URL地址：http://www.rwnh.cn/article44/gcgehe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、網(wǎng)站收錄、網(wǎng)站排名、網(wǎng)站營(yíng)銷、小程序開發(fā)、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)