前言

fV028資訊網——每日最新資訊28at.com

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

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

起步

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

初始化taro項目

taro init miniApp

fV028資訊網——每日最新資訊28at.com

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

打開項目安裝依賴

pnpm install

fV028資訊網——每日最新資訊28at.com

這樣一個基本的taro項目就生成好了，但這樣只是生成了一個小程序，那我們如果有許多個小程序是不是還要按上面這些步驟繼續生成，當然不需要，這樣不僅費時間，而且難以維護。fV028資訊網——每日最新資訊28at.com

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

改造（支持多小程序）

此時的項目結構是這樣的：fV028資訊網——每日最新資訊28at.com

fV028資訊網——每日最新資訊28at.com

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

改造目錄

在src目錄下新增目錄：apps、commonfV028資訊網——每日最新資訊28at.com

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

apps

這里每個小程序對應一個文件夾，里面存放對應小程序的代碼fV028資訊網——每日最新資訊28at.com

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

比如：nanjiu、nanjiu_notebook兩個小程序fV028資訊網——每日最新資訊28at.com

fV028資訊網——每日最新資訊28at.com

common

這里主要是存放公用代碼：組件、業務、請求fV028資訊網——每日最新資訊28at.com

fV028資訊網——每日最新資訊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`,  // 打包產物目錄  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，因為要支持多小程序，那么這里就不能固定寫死了，我們可以在啟動時通過傳參來區分當前啟動或打包哪個小程序。fV028資訊網——每日最新資訊28at.com

自定義構建腳本

在項目根目錄新建文件夾build存放構建腳本fV028資訊網——每日最新資訊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://m.www897cc.com/showinfo-26-66187-0.html基于taro搭建小程序多項目框架
                
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
                
上一篇： OPPO Reno 11 系列如何反超旗艦？
                
下一篇： 五個可提高效率的 JavaScript 實用程序庫