基于taro搭建小程序多項(xiàng)目框架
前言
為什么需要這樣一個(gè)框架，以及這個(gè)框架帶來(lái)的好處是什么？
從字面意思上理解：該框架可以用來(lái)同時(shí)管理多個(gè)小程序，并且可以抽離公用組件或業(yè)務(wù)邏輯供各個(gè)小程序使用。當(dāng)你工作中面臨這種同時(shí)維護(hù)多個(gè)小程序的業(yè)務(wù)場(chǎng)景時(shí)，可以考慮使用這種模式。靈感來(lái)自webpack的多項(xiàng)目打包構(gòu)建
起步
首先你得先安裝好taro腳手架，然后基于該腳手架生成一個(gè)taro項(xiàng)目
初始化taro項(xiàng)目
taro init miniApp
這是我選擇的初始化配置，你當(dāng)然也可以選擇其它模版，只要編譯工具選擇webpack就可以，下面的步驟基本相同
打開(kāi)項(xiàng)目安裝依賴(lài)
pnpm install
這樣一個(gè)基本的taro項(xiàng)目就生成好了，但這樣只是生成了一個(gè)小程序，那我們?nèi)绻性S多個(gè)小程序是不是還要按上面這些步驟繼續(xù)生成，當(dāng)然不需要，這樣不僅費(fèi)時(shí)間，而且難以維護(hù)。
下面我們就來(lái)把這個(gè)框架改造成支持同時(shí)管理多個(gè)小程序。
改造（支持多小程序）
此時(shí)的項(xiàng)目結(jié)構(gòu)是這樣的：
- config下面是一些小程序以及webpack的配置
- src下面是我們小程序的項(xiàng)目代碼
- project.config.json是當(dāng)前小程序配置文件
- ...
改造目錄
在src目錄下新增目錄：apps、common
- apps：小程序目錄，存放各個(gè)小程序的代碼
- common：公用目錄，存放公用組件及業(yè)務(wù)邏輯代碼
apps
這里每個(gè)小程序?qū)?yīng)一個(gè)文件夾，里面存放對(duì)應(yīng)小程序的代碼
這里需要把根目錄下的project.config.json放到小程序目錄下，因?yàn)槊總€(gè)小程序都需要自己的配置文件
比如：nanjiu、nanjiu_notebook兩個(gè)小程序
common
這里主要是存放公用代碼：組件、業(yè)務(wù)、請(qǐng)求
修改配置
config/index.js
import path from 'path'
const app = process.env.APP
const config = {
projectName: 'mini_app',
date: '2024-1-21',
designWidth: 750,
deviceRatio: {
640: 2.34 / 2,
750: 1,
828: 1.81 / 2
},
sourceRoot: `src/apps/${app}`, // 項(xiàng)目源碼目錄
outputRoot: `${app.toUpperCase()}APP`, // 打包產(chǎn)物目錄
alias: {
'@/common': path.resolve(__dirname, '..', 'src/common'), // 別名配置
},
// ....
module.exports = function (merge) {
if (process.env.NODE_ENV === 'development') {
return merge({}, config, require('./dev'))
}
return merge({}, config, require('./prod'))
}這里需要注意的是sourceRoot，因?yàn)橐С侄嘈〕绦?，那么這里就不能固定寫(xiě)死了，我們可以在啟動(dòng)時(shí)通過(guò)傳參來(lái)區(qū)分當(dāng)前啟動(dòng)或打包哪個(gè)小程序。
自定義構(gòu)建腳本
在項(xiàng)目根目錄新建文件夾build存放構(gòu)建腳本
// cli.js
const shell = require('shelljs')
const fs = require('fs')
const path = require('path')
const inquirer = require('inquirer')
const action = process.argv[2]
let app = process.argv[3]
const runType = action == 'dev' ? '啟動(dòng)': '打包'
function start() {
// 處理配置文件
process.env.APP = app
console.log(`????????????正在${runType}小程序：${app}`)
let cmd = ''
if(action == 'dev') {
cmd = `taro build --type weapp --watch --app ${app}`
} else {
cmd = `taro build --type weapp --app ${app}`
}
const child = shell.exec(cmd, {async:true})
child.stdout.on('data', function() {
// console.log(data)
})
}
// ...
start()配置腳本命令
//package.json
// ...
"scripts": {
"start": "node build/cli.js dev",
"build": "node build/cli.js build",
}驗(yàn)證
所有工作完成后，可以來(lái)看看這個(gè)框架能不能滿(mǎn)足我們的需求
命令執(zhí)行成功，項(xiàng)目根目錄下會(huì)生成對(duì)應(yīng)的小程序代碼
再把該產(chǎn)物使用小程序開(kāi)發(fā)者工具看是否能跑起來(lái)
這邊能夠跑起來(lái)，就說(shuō)明打包沒(méi)有問(wèn)題了，同樣可以驗(yàn)證其它的小程序
優(yōu)化構(gòu)建腳本
多小程序架構(gòu)搭建完，有同事反饋啟動(dòng)報(bào)錯(cuò)，我心想：不能吧，我自己都驗(yàn)證過(guò)了，從報(bào)錯(cuò)信息上看他應(yīng)該是啟動(dòng)時(shí)沒(méi)輸入需要啟動(dòng)的小程序，直接pnpm start了，這樣的話(huà)就不知道應(yīng)該啟動(dòng)哪個(gè)小程序了。其實(shí)啟動(dòng)命令已經(jīng)在項(xiàng)目文檔上寫(xiě)了，可能是沒(méi)注意看。
那就只能優(yōu)化優(yōu)化，盡量避免這種情況，這里主要的邏輯是如果沒(méi)有輸入指定的的小程序，通過(guò)inquirer開(kāi)啟交互式命令，讓他選擇要啟動(dòng)哪個(gè)小程序。
// cli.js
const shell = require('shelljs')
const fs = require('fs')
const path = require('path')
const inquirer = require('inquirer')
const action = process.argv[2]
let app = process.argv[3]
const runType = action == 'dev' ? '啟動(dòng)': '打包'
if(!app) {
openInquirer()
return
}
// 未輸入項(xiàng)目名稱(chēng)則開(kāi)啟交互命令行
function openInquirer() {
const projectList = fs.readdirSync(path.resolve(__dirname, '../src/apps'))
// 過(guò)濾隱藏文件
projectList.forEach((item, index) => {
if(item.indexOf('.') == 0) {
projectList.splice(index, 1)
}
})
const promptList = [
{
type: 'list',
message: '??請(qǐng)選擇啟動(dòng)的小程序:',
name: 'pro',
choices: [...projectList],
},
]
inquirer.prompt(promptList).then((answers) => {
app = answers.pro
start()
})
}
function start() {
// 處理配置文件
process.env.APP = app
console.log(`????????????正在${runType}小程序：${app}`)
let cmd = ''
if(action == 'dev') {
cmd = `taro build --type weapp --watch --app ${app}`
} else {
cmd = `taro build --type weapp --app ${app}`
}
const child = shell.exec(cmd, {async:true})
child.stdout.on('data', function() {
// console.log(data)
})
}
start()
這樣就大功告成了！??！
