Analisis ringkas tentang cara Node.js imgcook menjana kebergantungan secara automatik

Bagaimana untuk menggunakan Node.js untuk membantu imgcook menjana kebergantungan secara automatik? Artikel berikut akan memperkenalkan anda kepada kaedah penjanaan Ia mempunyai nilai rujukan tertentu dan saya harap ia akan membantu anda!

imgcook menyediakan fungsi seperti pengurusan pergantungan dalam versi dalaman Taobao, yang digunakan untuk memperkenalkan pakej pergantungan lain apabila menulis fungsi dalam editor imgcook, seperti axios, garis bawah , @rax/ video dll.

Namun, dari segi pengalaman pengguna, ia masih agak menyusahkan kerana editor tidak membenarkan semua orang membentuk tabiat mengisytiharkan kebergantungan dalam package.json, dan kerana editor ialah antara muka GUI , jadi agak sukar untuk membuka kod dari setiap fungsi dan menyemak kebergantungan Ini bermakna setiap kali selepas membangunkan modul imgcook, jika ia bergantung pada pakej lain (diperlukan dalam kebanyakan kes), anda perlu. bukanya satu demi satu Fungsi dan sahkan nombor versi, dan tambahkannya dalam pengurusan pergantungan, yang selalunya merupakan proses yang menyakitkan apabila saya menggunakannya.

Cara menyelesaikan

imgcook menyediakan mod pembangunan kod sumber Skema, yang boleh menggantikan langkah operasi GUI dengan mengubah suai terus protokol modul (Skema) dalam editor, dan kemudian melalui Mencari kebergantungan, saya mendapati bahawa fungsi pengurusan kebergantungan dilaksanakan melalui imgcook.dependencies dalam protokol:

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

Memandangkan kod fungsi itu juga wujud dalam protokol, adakah saya hanya perlu memproses dokumen protokol asal dan imbas keluar Kebergantungan yang sepadan disimpan ke nod, dan kemudian klik "Simpan" untuk melihat bahawa senarai pakej dalam pengurusan kebergantungan telah dikemas kini.

Fungsi pelaksanaan

Atas sebab ini, saya melaksanakan fungsi menarik kandungan protokol modul dalam @imgcook/cli Permintaan Tarik khusus ialah : imgcook/imgcook-cli#12 dan imgcook/imgcook-cli#15, anda boleh menggunakan alat baris arahan untuk menarik protokol (Skema) modul yang sepadan seperti berikut:

$ imgcook pull <id> -o json

Selepas pelaksanaan, kandungan protokol modul akan dikeluarkan kepada stdout dalam baris arahan.

Dengan fungsi ini, anda boleh melaksanakan beberapa alat baris arahan berdasarkan program Unix Pipeline untuk bekerjasama dengan sumber data imgcook-cli Sebagai contoh, output JSON melalui imgcook pull tidak mudah dibaca Anda juga boleh menulis imgcook-prettyprint untuk mencantikkan hasil keluaran Kod ini dilaksanakan seperti berikut:

#!/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)); 
});

Program di atas menerima data huluan saluran paip (Pipeline) melalui process.stdin, iaitu. ialah, kandungan protokol modul imgcook, dan kemudian dalam end Untuk menghuraikan dan mencantikkan output dalam acara, jalankan arahan berikut:

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

untuk melihat hasil output yang dipercantik Ini adalah contoh mudah program Unix Pipeline.

Seterusnya, mari kita lihat cara melengkapkan penjanaan automatik kebergantungan dengan cara ini. Sama seperti contoh di atas, kami mencipta fail ckdeps lain:

#!/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)); 
}

Melalui origin.imgcook.functions, anda boleh mendapatkan kandungan kod fungsi, seperti:

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

Kemudian langkah seterusnya ialah lulus Parse content, dapatkan pernyataan import dalam kod, dan kemudian jana objek bergantung yang sepadan ke dalam origin.imgcook.dependencies Kemudian kita perlu merujuk @swc/core untuk menghuraikan kod 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) 
}));

untuk mendapatkan ast Selepas itu, anda boleh mendapatkan maklumat penyata import melalui kod Namun, kerana ast lebih rumit, @swc/core menyediakan mekanisme traversal khusus seperti berikut:

<.>Kelas

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

/**  
 * 用于保存通过函数解析， 获得的依赖对象列表  
 */ 
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);

diwarisi daripada @swc/core /visitor

, kerana ia perlu melintasi pernyataan pengisytiharan import, nama jenis sintaksnya ialah ImportsExtractor, jadi anda hanya perlu melaksanakan kaedah Visitor untuk mendapatkan semua penyataan import dalam kaedah, dan kemudian ikuti nod yang sepadan Hanya tukar struktur menjadi objek bergantung dan kemas kini. Selepas mentakrifkan pengekstrak, satu-satunya perkara yang tinggal ialah menyuap ast kepada pengekstrak, supaya semua kebergantungan modul boleh dikumpulkan untuk penjanaan kebergantungan seterusnya. ImportDeclarationvisitImportDeclaration(node)Seperti yang anda lihat daripada kod di atas, nombor versi pada masa ini menggunakan rentetan kosong, yang akan menyebabkan maklumat versi bergantung hilang jika kami mengemas kini kandungan protokol, jadi kami perlu menentukan kaedah untuk mendapatkan versi.

Memandangkan kebergantungan bahagian hadapan semuanya disimpan pada Pendaftaran NPM, kami boleh mendapatkan versi melalui antara muka HTTP, seperti:

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} 的规则，就能拿到存储在 Registry 中的包信息，然后 data['dist-tags'].latest 代表的是 latest 标签对应的版本，简单来说就是当前包的最新版本，然后再基于这个版本号增加一个 ^ 版本前缀即可（你也可以按照自己的诉求修改最终的版本以及 NPM Registry）。

最后一步，就是把我们从函数代码中抓取的依赖信息更新，并输出出来：

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

然后通过运行：

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

然后，开发者只需要把输出的 JSON 拷贝到编辑器中保存。哦，等等，在编辑器中并不能直接使用 JSON 保存，而是需要使用 ECMAScript Module 的方式（export default { ... }），那这样是不是意味着每次都需要手动编辑一下呢，答案是否，Unix Pipeline 的思路非常利于解决这种流程问题，我们只需要再新建一个节点脚本 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 {   ... }

这样，我们就可以直接拷贝内容到编辑器。

效果体验

比如，我在喔其中一个项目的 created 函数中增加了 axios 的依赖，关闭窗口后点击保存（确保 Schema 保存），然后通过命令：

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

然后在编辑器中打开 Schema 编辑，复制生成的内容并保存，然后打开“依赖管理”可以看到：

通过解析生成的代码已经更新到依赖面板了，这下终于可以解放双手，去做其他的事情了。

One more thing?

是不是这样就结束了呢？在 macOS 中，提供了 pbcopy 命令，可以复制 stdin 到剪贴板，那么跟 imgcook 的例子结合一下：

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

这样就省掉了自己拷贝的工作，命令执行完直接打开编辑器 ⌘V 即可。

最后的最后，我要升华一下主题，在 @imgcook/cli 支持了输出 JSON 文本的功能后，就意味着 imgcook 接入了 Unix Pipeline 的生态，通过这种方式，我们可以在这个过程中构建很多有趣实用的工具，并与很多 Unix 工具协作使用（比如 bpcopy、grep、cat、sort 等）。

本文只是通过依赖的自动生成为例，使用 Unix Pipeline 的方式，验证了其可行性以及和 imgcook 编辑器配合使用的体验，目前来说，我可以通过这种方式，弥补不少编辑器上的体验缺失，让我更方便地使用 imgcook 的核心功能。

更多node相关知识，请访问：nodejs 教程！！

Atas ialah kandungan terperinci Analisis ringkas tentang cara Node.js imgcook menjana kebergantungan secara automatik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!