一、概述

最近一年，為了滿足公司業(yè)務(wù)開發(fā)，解決重復搭建項目繁瑣過程，自己開發(fā)了一個前端腳手架，并發(fā)布到npm。隨著時間的推移，發(fā)現(xiàn)之前的版本存在很多問題，有些功能做不到位，而且代碼也不是很規(guī)范，流程邏輯混亂等等。因此，為解決這些問題，我決定對其進行重構(gòu)，添加檢查更新版本功能，優(yōu)化打包，將多個文件打包成單個cjs文件，支持更多的自定義以及快速克隆運行。

如果之前對這個項目沒有了解的同學，可以去看上一篇關(guān)于腳手架開發(fā)的文章。

實現(xiàn)一個自定義前端腳手架_前端自定義腳手架-CSDN博客

二、實踐

2.1、設(shè)計思路

1. 提供命令行交互界面方便用戶輸入信息。
2. 根據(jù)用戶輸入的信息從遠端Git倉庫拉取項目模板初始化項目。
3. 發(fā)布到NPM，以便團隊成員共享使用。
4. 命令設(shè)計如下表2-1所示。

表2-1 命令設(shè)計

命令	描述	選項	描述
create <project-name>	初始化項目	-f，--force	如果project-name已經(jīng)存在，是否強制覆蓋。
		-t,? --template [template-name]	制定模板或git倉庫鏈接
		-r, --run	克隆項目后是否自動運行
		-c, --command [command]	在自動運行模式，自定義運行命令
		-pm, --packageManager [packageManager]	指定包管理器
		-b, --branch [branch-name]	指定克隆分支
list	顯示所有模板	-	-
add <template-name> <template-url>	新增模板配置	-	-
remove <template-name>	刪除模板配置	-	-
update	更新腳手架	-	-
ui	界面操作	-p, --port [port]	指定端口 (number)
		-h, --host [host]	指定主機名稱 (string)
-	-	-V，--version	顯示版本號
		-h，--help	顯示可用的CLI選項
help [command]	顯示命令幫助信息	--help	顯示命令幫助信息

?2.2、初始化項目

項目初始化可以去看之前的文章，這里不再贅述。

實現(xiàn)一個自定義前端腳手架_前端自定義腳手架-CSDN博客

腳手架運行入口文件改為bin目錄下，并在這里指定nodejs運行環(huán)境（#! /usr/bin/env node）

// ./bin/index.js
#! /usr/bin/env node
require('../dist/index.js')

開新分支，從主分支開出v1.0.7和dev分支，分別用于保存之前版本的代碼和現(xiàn)在開發(fā)的分支代碼，最后會將dev分支合并到主分支。?

2.3、配置Rollup打包

安裝依賴

pnpm add rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-node-externals@5  @rollup/plugin-json @rollup/plugin-terser rollup-plugin-typescript2 rollup-plugin-copy --save-dev

修改./package.json

"scripts": {"build": "rollup -c rollup.config.js --bundleConfigAsCjs",// ...
}

新建rollup.config.js并配置

import { defineConfig } from "rollup";
import nodeResolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import externals from "rollup-plugin-node-externals";
import json from "@rollup/plugin-json";
import terser from "@rollup/plugin-terser";
import typescript from "rollup-plugin-typescript2";
import copy from "rollup-plugin-copy";export default defineConfig([{input: {index: "src/index.ts",},output: [{dir: "dist",format: "cjs",},],plugins: [nodeResolve(),externals({devDeps: false, // 可以識別我們 package.json 中的依賴當作外部依賴處理 不會直接將其中引用的方法打包出來}),typescript(),json(),commonjs(),terser(),copy({targets: [{src: "src/templates.json", // 源路徑dest: "dist", // 目標路徑}, // 復制 templates.json 到 dist 目錄下],copyOnce: true, // 只復制一次}),],},
]);

改造完成的項目結(jié)構(gòu)

運行打包報錯

2.4、解決打包錯誤

解決問題的思路：

第一種，直接復制報錯信息到瀏覽器搜索相關(guān)解決文章。

第二中，就是根據(jù)報錯信息，去github找到報錯包相關(guān)issue，里面可能會有一些同學有同樣的錯誤經(jīng)歷，可以參考他們?nèi)绾谓鉀Q。

錯誤：Cannot use import statement outside a module

解決：復制錯誤到瀏覽器搜索，【解決 SyntaxError: Cannot use import statement outside a module 報錯問題】-CSDN博客

// ./package.json 
{ // 新增 "type":"module" 
}

錯誤：[!] (plugin rpt2) RollupError: [plugin rpt2] Incompatible tsconfig option. Module resolves to 'CommonJS'. This is incompatible with Rollup, please use 'module: "ES2015"', 'module: "ES2020"', 'module: "ES2022"', or 'module: "ESNext"'.

解決：

// tsconfig.json 
{ "compilerOptions": { "module": "ESNext", }, }

錯誤：不能讀取json文件

解決：

// tsconfig.json 
{"compilerOptions": {// ... "resolveJsonModule": true,},
}

錯誤：[!] (plugin rpt2) RollupError: [plugin rpt2] error TS5070: Option '--resolveJsonModule' cannot be specified when 'moduleResolution' is set to 'classic'.

解決：

{"compilerOptions": {// ... "moduleResolution": "node","resolveJsonModule": true,"esModuleInterop": true,},
}

錯誤：[!] (plugin rpt2) RollupError: [plugin rpt2] src/commands/create/index.ts:11:16 - error TS2354: This syntax requires an imported helper but module 'tslib' cannot be found.

解決：

This syntax requires an imported helper but module ‘tslib‘ cannot be found-CSDN博客

pnpm i tslib -D

// tsconfig.ts{"compilerOptions": { // ... "paths": {"tslib": ["node_modules/tslib/tslib.d.ts"]},},
}

npm run build成功打包

打包后運行node ./dist/index.js

報錯：

解決：刪除package.json中的”type“:"module"即可。

項目根目錄下打開命令行窗口，運行測試。

2.5、發(fā)布npm包

1. 編寫README.md

在README.md編寫我們npm包的相關(guān)使用說明。

使用Static Badge | Shields.io生成專屬圖標，選擇md格式就可以復制到README.md文檔。

2. 設(shè)置npm源

因為要把開發(fā)的腳手架上傳到npm，需要把鏡像源改回npm官方源，上傳npm后再改回鏡像源即可。

https://registry.npmmirror.com

# 查看
npm config get registry
# 設(shè)置npm官方源
npm config set registry https://registry.npmjs.org/

3. 登錄npm

npm login

按enter建，打開瀏覽器?

輸入賬號密碼登錄?

驗證?

?登錄成功

4. 修改npm版本

重新發(fā)包，需要修改package.json里面version版本

# 打補丁，增加第三位（0.0.x）
npm version patch
# 添加功能，增加第二為位（0.x.0）
npm version minor
# 大版本更新，增加第一為位（x.0.0）
npm version major

?需要先提交git后才能修改版本好號

5. 發(fā)布npm

npm publish

發(fā)包報錯，把package.json里的private改為false或刪掉，再打包發(fā)布就可以了?

?打包發(fā)布

一直卡在publishing這里

修復package.json配置錯誤，去掉上圖的警告

npm pkg fix

一直卡再正在發(fā)包，直到請求超時報錯，因為網(wǎng)絡(luò)可能存在代理的原因，檢查電腦是否開啟代理，反復開關(guān)代理測試發(fā)包，最后也是通過DevSiderCar開啟npm加速才能成功重新發(fā)包。

登錄npm官網(wǎng)就能看到剛剛發(fā)的包?

action-cli - npmhttps://www.npmjs.com/package/action-cli

2.6、代碼倉庫

具體實現(xiàn)過程和使用，大家可以參考我的GitHub倉庫地址。GitHub - Topskys/action-cli: 【前端腳手架】研究和著手搭建前端項目腳手架 https://www.npmjs.com/package/action-cli【前端腳手架】研究和著手搭建前端項目腳手架 https://www.npmjs.com/package/action-cli - Topskys/action-clihttps://github.com/Topskys/action-cli.git

三、效果

新版本help界面效果與之前版本多了update命令

創(chuàng)建項目，不帶任何參數(shù)

查看所有模板文件

新增模板文件?

刪除模板文件，更新腳手架?

從npm遠程下載安裝腳手架

npm install -g action-cli

指定參數(shù)創(chuàng)建項目，demo 為項目名稱，-f?強制覆蓋，-t 指定模板（模板名稱或倉庫地址），-r 下載項目后自動運行，-c 自定義運行shell腳本，-b 指定克隆的分支，-pm 指定包管理器。

腳手架成功創(chuàng)建項目，并打開瀏覽器運行項目。

四、參考文獻

實現(xiàn)一個自定義前端腳手架_前端自定義腳手架-CSDN博客

【前端腳手架】實現(xiàn)一個自己的腳手架

【手把手教你實現(xiàn)前端腳手架】

【解決 SyntaxError: Cannot use import statement outside a module 報錯問題】-CSDN博客

This syntax requires an imported helper but module ‘tslib‘ cannot be found-CSDN博客