前言

olD28資訊網(wǎng)——每日最新資訊28at.com

為什么需要這樣一個框架，以及這個框架帶來的好處是什么？olD28資訊網(wǎng)——每日最新資訊28at.com

從字面意思上理解：該框架可以用來同時管理多個小程序，并且可以抽離公用組件或業(yè)務(wù)邏輯供各個小程序使用。當(dāng)你工作中面臨這種同時維護(hù)多個小程序的業(yè)務(wù)場景時，可以考慮使用這種模式。靈感來自webpack的多項目打包構(gòu)建olD28資訊網(wǎng)——每日最新資訊28at.com

起步

首先你得先安裝好taro腳手架，然后基于該腳手架生成一個taro項目olD28資訊網(wǎng)——每日最新資訊28at.com

初始化taro項目

taro init miniApp

olD28資訊網(wǎng)——每日最新資訊28at.com

這是我選擇的初始化配置，你當(dāng)然也可以選擇其它模版，只要編譯工具選擇webpack就可以，下面的步驟基本相同olD28資訊網(wǎng)——每日最新資訊28at.com

打開項目安裝依賴

pnpm install

olD28資訊網(wǎng)——每日最新資訊28at.com

這樣一個基本的taro項目就生成好了，但這樣只是生成了一個小程序，那我們?nèi)绻性S多個小程序是不是還要按上面這些步驟繼續(xù)生成，當(dāng)然不需要，這樣不僅費(fèi)時間，而且難以維護(hù)。olD28資訊網(wǎng)——每日最新資訊28at.com

下面我們就來把這個框架改造成支持同時管理多個小程序。olD28資訊網(wǎng)——每日最新資訊28at.com

改造（支持多小程序）

此時的項目結(jié)構(gòu)是這樣的：olD28資訊網(wǎng)——每日最新資訊28at.com

olD28資訊網(wǎng)——每日最新資訊28at.com

• config下面是一些小程序以及webpack的配置
• src下面是我們小程序的項目代碼
• project.config.json是當(dāng)前小程序配置文件
• ...

改造目錄

在src目錄下新增目錄：apps、commonolD28資訊網(wǎng)——每日最新資訊28at.com

• apps：小程序目錄，存放各個小程序的代碼
• common：公用目錄，存放公用組件及業(yè)務(wù)邏輯代碼

apps

這里每個小程序?qū)?yīng)一個文件夾，里面存放對應(yīng)小程序的代碼olD28資訊網(wǎng)——每日最新資訊28at.com

這里需要把根目錄下的project.config.json放到小程序目錄下，因為每個小程序都需要自己的配置文件olD28資訊網(wǎng)——每日最新資訊28at.com

比如：nanjiu、nanjiu_notebook兩個小程序olD28資訊網(wǎng)——每日最新資訊28at.com

olD28資訊網(wǎng)——每日最新資訊28at.com

common

這里主要是存放公用代碼：組件、業(yè)務(wù)、請求olD28資訊網(wǎng)——每日最新資訊28at.com

olD28資訊網(wǎng)——每日最新資訊28at.com

修改配置

config/index.js

import path from 'path'const app = process.env.APPconst 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}`, // 項目源碼目錄  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，因為要支持多小程序，那么這里就不能固定寫死了，我們可以在啟動時通過傳參來區(qū)分當(dāng)前啟動或打包哪個小程序。olD28資訊網(wǎng)——每日最新資訊28at.com

自定義構(gòu)建腳本

在項目根目錄新建文件夾build存放構(gòu)建腳本olD28資訊網(wǎng)——每日最新資訊28at.com

// cli.jsconst 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' ? '啟動': '打包'function start() {  // 處理配置文件  process.env.APP = app  console.log(` 
                
本文鏈接：http://www.tebozhan.com/showinfo-26-66187-0.html基于taro搭建小程序多項目框架
                
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
                
上一篇： OPPO Reno 11 系列如何反超旗艦？
                
下一篇： 五個可提高效率的 JavaScript 實用程序庫