基於 node | templa-cli 製作專案模板

語言: CN / TW / HK

在專案開發中,使用 vue-cli 可快速進行建立專案,vue-cli 為我們提供了多種選項(router,eslint),便於我們在不同的專案中運用不同的配置。

在開發一些專案的同時,配置(eslint,tsconfig.json...)的複用率也很高,同時代碼也應該可以進行復用。

這篇文章主要介紹如何使用 node 工具,和 templa-cli 這個庫,快速的製作一個動態模板工具,那我們事不宜遲。

前言

這篇文章主要以實踐為主,你可能還需要掌握以下知識。

製作模板

這裡我們以一個 koa 專案模板為例子,目錄結構為以下

~~~ - template - routes - app.js - package.json ~~~

templa-cli 文件為例,檔案假如要過濾,則使用 ^...$ 包含,裡面使用 qs 的解析規則,檔案內的內容使用 ejs 模板編譯,字尾新增 .ejs

~~~ - template - routes^includes=router$ - app.js.ejs - package.json.ejs ~~~

~~~js // app.js.ejs const Koa = require('koa') const bodyParser = require('koa-bodyparser') const consola = require('consola') <% if (includes.includes('router')) { %> const router require('./routes') <% } -%> // 建立 app 應用物件 const app = new Koa()

// 監聽埠號, 啟動伺服器 app.listen(3001, () => consola.success('伺服器啟動成功, 地址: http://localhost:3001/'))

app // 請求體引數處理 .use(bodyParser) <% if (includes.includes('router')) { %> // 路由請求 .use(router.routes()) // 路由錯誤處理 .use(router.allowedMethods()) <% } -%> ~~~

生成邏輯

有了模板之後,我們使用 templa-cli 提供的 API 方法,傳入 options 與 includes 建立一個模板。

~~~js const { createTemplate } require('templa-cli')

createTemplate({ // 輸入模板路徑 input: 'template', // 輸出模板路徑 output: 'out-template', // 模板的配置,傳入 name options: { name: "project name" }, // 模板擁有什麼功能 includes: ['router'] }) ~~~

到這裡,你就能看到 out-template 的模板是我們編譯後的模板了。

編寫命令

我們在繼續編寫 bin 中的指令碼,這裡會用到兩個庫

~~~json // package.json { "bin": { "my-cli": "bin/index.js" } } ~~~ ~~~js // bin/index.js

!/usr/bin/env node

cosnt cac = require('cac') const { Confirm } = require('enquirer') const cli = cac('templa-cli')

// 註冊 create 命令,接收一個專案名稱值 cli.command('create ') .action(async (name) => { const includes = [] // 詢問是否需要路由, 是則新增路由 const prompt = new Confirm({ name: 'router', message: '是否建立路由?' }); if (await prompt.run()) { includes.push('router') } // 建立模板,到 name 中 createTemplate({ input: 'template', output: name, options: { name }, includes }) }) ~~~

總結

這裡我們使用了 templa-cli 製作了一個簡易的 cli 工具,可以足夠應付一些簡單的專案模板。

但實際上 vue-cli 並沒有這麼簡單,他還包含了對依賴的版本管理,這做起來也會使得 cli 更加複雜。

其實命令列詢問者不單單隻有 enquirer 這個工具,市面上還有很多這類工具,例如 Inquirer、prompts,可以根據自己的情況而定。

最後,templa-cli 是一個簡單的動態模板腳手架工具,如果覺得好用可以點個 star,成為支援我的動力!

blog:https://tuimao233.gitee.io/mao-blog/ github:https://github.com/TuiMao233