從0搭建vue3組件庫: 如何完整搭建一個前端腳手架?-有解無憂

相信大家在前端開發中都使用過很多前端腳手架，如vue-cli，create-vite，create-vue等；本篇文章將會為大家詳細介紹這些前端腳手架是如何實作的，并且從零實作一個create-kitty腳手架發布到npm上，

pnpm搭建Monorepo環境

使用pnpm管理對專案進行管理是非常方便的，極大的解決了多個包在本地除錯繁瑣的問題，

什么是Monorepo？

就是指在一個大的專案倉庫中，管理多個模塊/包（package），這種型別的專案大都在專案根目錄下有一個packages檔案夾，分多個專案管理，大概結構如下：

-- packages
  -- pkg1
    --package.json
  -- pkg2
    --package.json
--package.json

簡單來說就是單倉庫多專案

目前很多我們熟知的專案都是采用這種模式，如Vant，ElementUI，Vue3等，打造一個Monorepo環境的工具有很多，如：lerna、pnpm、yarn等，這里我們將使用pnpm來開發我們的腳手架create-kitty，

使用pnpm

安裝

首先新建檔案夾kitty-ui;然后執行

npm install pnpm -g

初始化package.json

pnpm init

新建組態檔 .npmrc

shamefully-hoist = true

這里簡單說下為什么要配置shamefully-hoist，

如果某些工具僅在根目錄的node_modules時才有效，可以將其設定為true來提升那些不在根目錄的node_modules，就是將你安裝的依賴包的依賴包的依賴包的...都放到同一級別（扁平化），說白了就是不設定為true有些包就有可能會出問題，

monorepo的實作

接下就是pnpm如何實作monorepo的了，

為了我們各個專案之間能夠互相參考我們要在根目錄下新建一個pnpm-workspace.yaml檔案將我們的包關聯起來

packages:
    - 'packages/**'

這樣就能將我們專案下的packages目錄下的所有包關聯起來了，當然如果你想關聯更多目錄你只需要往里面添加即可，根據上面的目錄結構很顯然你在根目錄下新packages檔案夾，packages檔案夾新建create-kitty以及測驗用的cli-demo檔案夾，并分別執行pnpm init，

腳手架簡單實作

在create-kitty的package.json中新增bin屬性然后指向index.js，這里去掉了main屬性，因為我們開發的不是工具包，

{
  "name": "create-kitty",
  "version": "1.0.0",
  "description": "",
  "bin": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

當然，bin也支持物件格式，讓腳手架可以使用多個命令

"bin": {
    "create-kitty": "index.js",
    "create-app": "index.js"
  },

新建create-kitty/index.js作為腳手架入口

#! /usr/bin/env node

console.log("hello kitty")

注意cli入口檔案需要加#! /usr/bin/env node指定腳本的解釋程式為node，否則會報錯

本地測驗腳手架

來到測驗包cli-demo檔案夾下直安裝create-kitty

pnpm add create-kitty

然后就會發現cli-demo下的package出現依賴,同時加上scripts

{
  "name": "cli-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "create-kitty": "create-kitty"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "create-kitty": "workspace:^1.0.0"
  }
}

然后執行pnpm run create-kitty

說明

當我們上線的時候可以直接執行npm create kitty或者npm init kitty，它們其實就是執行npx create-kitty

決議用戶輸入引數

一般腳手架都會根據用戶輸入不同命令來做出不同操作，比如用戶輸入kitty-ui -v提示版本號，kitty-ui -h顯示幫助資訊等，而實作這些基本原理就是process.argv

將create-kitty下的入口檔案index.js修改為

#! /usr/bin/env node

console.log(process.argv);

然后執行這個檔案并帶幾個引數

然后會發現用戶傳的引數在process.argv陣列的第二位以后，這樣我們就可以根據用戶輸入不同引數做不同操作了，但是這樣很不方便，所以我們可以使用框架來解決，

使用第三方庫決議引數

首先安裝command-line-args庫

pnpm add command-line-args -S

接下來看它是如何獲取用戶輸入引數的

#! /usr/bin/env node
import commandLineArgs from 'command-line-args';

//配置命令引數
const optionDefinitions = [
  { name: 'version', alias: 'v', type: Boolean },
  { name: 'arg1', type: String },
  { name: 'arg2', type: Number },
];
const options = commandLineArgs(optionDefinitions);
console.log(options);

注意這里使用了es6的語法,所以需要將package.json中的type指定為module

接下來實戰一些,檢測用戶輸入--help指令,然后我們輸出一個幫助的配置，

首先安裝command-line-usage

pnpm add command-line-usage -S

首先引入commandLineUsage,然后寫個配置

import commandLineUsage from 'command-line-usage';
//幫助內容
const helpSections = [
  {
    header: 'create-kitty',
    content: '一個快速生成組件庫搭建環境的腳手架',
  },
  {
    header: 'Options',
    optionList: [
      {
        name: 'version',
        typeLabel: '{underline boolean}',
        description: '版本號',
      },
      {
        name: 'arg1',
        typeLabel: '{underline string}',
        description: '引數1',
      },
      {
        name: 'arg2',
        typeLabel: '{underline number}',
        description: '引數2',
      },
    ],
  },
];

在command-line-args中配置個help命令,當獲取到help的時候直接列印

const optionDefinitions = [
  { name: 'help', alias: 'h', type: Boolean },
  { name: 'version', alias: 'v', type: Boolean },
  { name: 'arg1', type: String },
  { name: 'arg2', type: Number },
];
const options = commandLineArgs(optionDefinitions);
if (options.help) console.log(commandLineUsage(helpSections))

但是這樣好像不太好看??，這里可以借助chalk工具給列印加個顏色

pnpm add chalk -S

我比較喜歡綠色,所以讓控制臺輸出綠色的字體

import chalk from 'chalk';

...

if (options.help) console.log(chalk.green(commandLineUsage(helpSections)))

當然它還有很多用法,感興趣可以自己去研究，到這里關于用戶引數決議部分差不多就結束了,下面介紹如何實作互動式命令

互動式命令

當我們使用腳手架時,有些會提示我們輸入專案名稱和選擇模板等,比如執行npm create vite的時候

如果只是簡單互動可以通過node自帶的process.stdin或者readline模塊實作，比如用readline實作一個簡單的互動式命令

import readline from 'readline'
...

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});
rl.question('你是誰?', function (anwser) {
  console.log(`我是${anwser}`);
  //添加close事件，不然不會結束
  rl.close();
});

但是這里并不打算用原生的互動,而是使用prompts工具實作，首先安裝

pnpm add prompts -S

然后模擬一個互動式表單,其中又輸入文字,密碼,單選,多選

import prompts from 'prompts'
const promptsOptions = [
  {
    type: 'text',
    name: 'user',
    message: '用戶'
  },
  {
    type: 'password',
    name: 'password',
    message: '密碼'
  },
  {
    type: 'select',//單選
    name: 'gender',
    message: '性別',
    choices: [
      { title: '男', value: 0 },
      { title: '女', value: 1 }
    ]
  },
  {
    type: 'multiselect', //多選
    name: 'study',
    message: '選擇學習框架',
    choices: [
      { title: 'Vue', value: 0 },
      { title: 'React', value: 1 },
      { title: 'Angular', value: 2 }
    ]
  },
]

const getInputInfo = async () => {
  const res = await prompts(promptsOptions)
  console.log(res)
}
getInputInfo()

然后執行看下效果

我們拿到用戶輸入的表單即可執行相應的操作，

拉取模板

當我們獲取到用戶輸入或選擇的資訊的時候,我們就可以輸出對應模板給用戶，這里有兩種選擇,一種是直接將模板放在包里,另一種是遠程拉取git倉庫，本篇文章暫時先介紹第二種方式

首先安裝download-git-repo,使用它的clone方法

pnpm add download-git-repo -S

然后安裝一個loading插件ora

pnpm add ora -S

寫一個clone函式(這里便于文章講解全都寫在一個檔案里,后續會進行模塊的規劃)

const gitClone = (remote, name, option) => {
  const downSpinner = ora('正在下載模板...').start();
  return new Promise((resolve, reject) => {
    download(remote, name, option, err => {
      if (err) {
        downSpinner.fail();
        console.log("err", chalk.red(err));
        reject(err);
        return;
      };
      downSpinner.succeed(chalk.green('模板下載成功！'));
      resolve();
    });
  });
};

定義遠程倉庫模板串列以及分支并且對專案名稱進行一些校驗,然后在獲取到用戶選擇資訊后執行gitclone

const remoteList = {
  1: "https://gitee.com/geeksdidi/kittyui.git",
  2: 'xxx'
}
const branch = 'master'
const getInputInfo = async () => {

  const res = await prompts(promptsOptions)
  if (!res.name || !res.template) return
  gitClone(`direct:${remoteList[res.template]}#${branch}`, res.name, { clone: true })
}
getInputInfo()

然后增加一些個性化校驗

const promptsOptions = [
  {
    type: 'text',//單選
    name: 'name',
    message: 'project-name',
    validate(val) {
      if (!val) return '模板名稱不能為空！';
      if (fs.existsSync(res.name)) return '專案名已存在'
      if (val.match(/[^A-Za-z0-9\u4e00-\u9fa5_-]/g)) return '模板名稱包含非法字符，請重新輸入';
      return true;
    }
  },

  {
    type: 'select',//單選
    name: 'template',
    message: 'select a framework',
    choices: [
      { title: 'kitty-ui', value: 1 },
      { title: 'kitty-demo', value: 2 }
    ]
  }
]

最后看下執行效果

clone成功后加上提示告知用戶如何使用,然后進行發布

const gitClone = (remote, name, option) => {
  const loadingOra = ora('正在下載模板...').start();
  return new Promise((resolve, reject) => {
    download(remote, name, option, err => {
      if (err) {
        loadingOra.fail();
        console.log("err", chalk.red(err));
        reject(err);
        return;
      };
      loadingOra.succeed(chalk.green('success'));
      console.log(`Done. Now run:\r\n`);
      console.log(chalk.green(`cd ${name}`));
      console.log(chalk.blue("npm install"));
      console.log("npm run dev\r\n");
      resolve();
    });
  });
};

發布

一般來說發布前要進行打包生成commonjs以支持低版本node,這里暫時不進行打包操作,直接執行pnpm publish即可完成發布(注意,pnpm發布時需要先將代碼提交到遠程倉庫)，

使用

隨便新建檔案夾然后執行npm init kitty或者npm create kitty

同時檔案中出現了我們的模板檔案

總結

本篇文章介紹了如何使用pnpm搭建Monorepo環境以及本地開發包的測驗，同時講解了如何使用command-line-args,download-git-repo,prompts等工具的使用,最終實作了一個互動式的命令列的腳手架create-kitty，

后面會對create-kitty進行完善,讓它成為一個可以快速搭建vue3組件開發環境的腳手架,如果你對組件庫開發感興趣的話,可以關注我或者掃碼公眾號 web前端進階,組件庫的所有實作細節都在這個里，

如果這篇文章對你有所幫助的話,點個贊吧!

原始碼地址

create-kitty

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/519305.html

標籤：其他

上一篇：css命名

下一篇：WebSocket的簡單使用