如何開發乙個腳手架cli工具

腳手架工具，是能夠切實提高開發效率的一種方式，個人完成的乙個簡單的腳手架工具，叫做vue-wd-cli。

它僅僅做了非常簡單的幾件事：

基本使用如下：

step1：載入全域性安裝包

npm install -g vue-wd-cli

step2：初始化乙個專案

vuewd init helloworld

其中，helloworld是專案名。

step3：寫入專案描述和作者資訊

step4：啟動專案

cd helloworld

npm install && npm start

1、做技術沉澱，在這個過程中，我們沉澱了這些東西：

統一的專案結構，我們一般分為views（頁面層）、components（元件層）、services（服務層）、styles（公用樣式庫）、store（資料管理層）、router（路由層）、utils（工具層）。

針對不同端（pc、mobile）整合不同的庫，除了常用的包（vue、vuex、axios、vue-router、core-js），pc端我們選用了element-ui、moment、crypto-js等常用庫；mobile端我們選用了vant、qs等常用庫。

整合了常用的全域性style、包括兩個css檔案：reset.css和common.css，其中reset.css用於清除某些標籤的預設行為。common.css是自己作為開發人員，使用度最高的樣式類，比如居中、清除浮動等等。

其他預設的一些配置：比如介面**、eslint規則、readme.md檔案、gitignore、editorconfig等等功能。這些東西，在日常開發，都是固定的格式，個人都有做整合。

2、工作效率的提公升

對於企業而言，使用腳手架，能夠把上面的一些髒活，累活，提前給弄好了，讓我們把關注的重點集中到業務開發上。

在這個工具包之前，有幾個npm包，要關注一下

nodejs內建了對命令列操作的支援，node工程下 package.json 中的 bin 字段可以定義命令名和關聯的執行檔案。

"bin": ,

當把這個包發布到npm上，可以直接執行vuewd命令，這個命令會執行index.js檔案。

這個命令提供了自動的解析命令和引數，合併多選項，處理短參等等功能。

可以編寫.command 為你的最高層命令指定子命令。

可以編寫.action 對你的子命令進行相應處理。

const program = require('commander');
program.version('1.0.0', '-v, --version')
.command('init ')
.action((name) => )

具體中文文件：

這個node包，可以在node的命令列，詢問相關的答案。可供我們後續的使用。

inquirer.prompt([,,
]).then((answers) => )

const download = require('download-git-repo');
const template = '';
// 這是乙個github位址
download(template, name, , (err) => )

核心點有兩個：

1、配置package.json的bin屬性。

, "author": "", "license": "isc", "bin": , "dependencies":

}

這樣發布的node包，在全域性安裝之後，就會有vuewd命令。

2、這個vuewd對應的index.js檔案

#!/usr/bin/env node
/** * created by mapbar_front on 2020-02-17.
*/const fs = require('fs');
const program = require('commander');
const download = require('download-git-repo');
const handlebars = require('handlebars');
const inquirer = require('inquirer');
const ora = require('ora');
const chalk = require('chalk');
const symbols = require('log-symbols');
program.version('1.0.0', '-v, --version')
.command('init ')
.action((name) => ,
,]).then((answers) => , (err) => else/package.json`;
const meta = 
if(fs.existssync(filename))
console.log(symbols.success, chalk.green('專案初始化完成'));}})
})}else
})program.parse(process.ar**);

在模板選型上，我這邊分為了mobile和pc兩種型別。

pc：mobile：

建立乙個angular腳手架

angular 需要 node.js 版本 10.9.0 或更高版本。要檢查你的版本，請在終端控制台視窗中執行 node v 要檢查你是否安裝了 npm 客戶端，請在終端控制台視窗中執行 npm v 第 1 步安裝 angular cli npm install g angular cli第 ...

利用腳手架工具搭建乙個新的react專案

2.提交專案 2.1 git init 提交本地倉庫 2.2 git add 2.3 git commit m 提交注釋 3.對配置檔案進行暴露，配置webpack npm run eject 沒有提交git add 則無法使用這個命令，會報錯執行完這個命令之後，config裡可以看見配置檔案，相...

如何開發乙個腳手架cli工具

推薦乙個react腳手架工具

建立乙個angular腳手架

利用腳手架工具搭建乙個新的react專案

相關推薦