利用Webpack實現(xiàn)小程序多項目管理的方法
故事是這樣的
產(chǎn)品小姐姐:“我要做一堆小程序,一周上線一到兩個沒問題吧”
碼畜小哥哥:“你他喵是不是傻,做那么多干什么”
產(chǎn)品小姐姐:“蹭些流量呀,用戶量多了就可以考慮轉化流量給公司的 App”
碼畜小哥哥:“fuck好的”
碼畜小哥開始架構
- 小程序雜,放一個項目方便管理
- 小程序多,代碼要能夠復用
- 團隊開發(fā),代碼風格要統(tǒng)一
碼畜小哥開始建項目
這是單個小程序的基本目錄結構,沒問題

當一個項目有多個小程序的時候,好像也沒問題

當多個小程序都用到同一個組件 com3 時,小哥發(fā)現(xiàn)代碼沒法復用,需要復制黏貼

思考了一下,那么把組件目錄移到外面,這樣不就可以復用了嗎

感覺很好,小哥這時在微信開發(fā)者工具打開 demo1,發(fā)現(xiàn)報錯了

原來小程序是以當前項目作為根目錄,components 目錄已經(jīng)不在 demo1 目錄范圍內,所以是引用不到的
小哥想到了 Webpack
1. 整理目錄
- apps/:存放全部小程序
- build/:存放構建腳本
- common/:存放公共方法
- components/:存放公共組件
- styles/:存放公共樣式
- templates/:存放公共模板
大概長這樣

2. 編寫構建腳本
package.json
script: {
"dev": "webpack --config build/webpack.config.js"
}
build/webpack.config.js
思路就是利用 CopyWebpackPlugin 同步指定的文件到小程序目錄下
const CopyWebpackPlugin = require('copy-webpack-plugin')
const utils = require('./utils')
// 獲取 apps 目錄下的小程序并指定公共文件目錄命名
function copyToApps(dir) {
let r = []
utils
.exec(`cd ${utils.resolve('apps')} && ls`)
.split('\n')
.map(app => {
r.push({
from: utils.resolve(dir),
to: utils.resolve(`apps/${app}/_${dir}`)
})
})
return r
}
module.exports = {
watch: true,
// 監(jiān)聽入口文件,保存便會刷新
entry: utils.resolve('index.js'),
output: {
path: utils.resolve('.tmp'),
filename: 'bundle.js'
},
plugins: [
// 同步指定的公共文件到所有小程序目錄下
new CopyWebpackPlugin([
...copyToApps('styles'),
...copyToApps('common'),
...copyToApps('templates'),
...copyToApps('components')
])
]
}
3. 啟動本地開發(fā)
npm run dev


現(xiàn)在公用的代碼已經(jīng)自動同步到小程序目錄下,以下劃線開頭,當改動公共代碼也會自動同步給小程序調用
調用方式長這樣
import utils from './_common/utils' import com3 from './_components/com3'
@import './_styles/index.wxss';
<import src="./_templates/index.wxml" />
代碼風格校驗
package.json
script: {
"lint": "eslint apps/"
}
.eslintrc.js
module.exports = {
extends: 'standard',
// 將小程序特有的全局變量排除下
globals: {
Page: true,
Component: true,
App: true,
getApp: true,
wx: true
},
rules: {
'space-before-function-paren': ['error', 'never'],
'no-unused-vars': [
'error',
{
// 小程序還沒支持 ES7,這個是用來兼容 async/await
varsIgnorePattern: 'regeneratorRuntime'
}
]
}
}
然后借助 husky 在每次 git commit 前執(zhí)行校驗
script: {
"precommit": "npm run lint"
},
devDependencies: {
"husky": "^0.14.3"
}
清理
最后小哥還加了個清理命令, 便于重新生成公共代碼
package.json
script: {
"clean": "node build/clean.js"
}
build/clean.js
const rimraf = require('rimraf')
const utils = require('./utils')
function log(dir) {
console.log(`cleaning ${dir}`)
}
rimraf(utils.resolve('.tmp'), () => log('.tmp'))
utils
.exec(`cd ${utils.resolve('apps')} && ls`)
.split('\n')
.map(app => {
;[
`${app}/_styles`,
`${app}/_common`,
`${app}/_templates`,
`${app}/_components`
].map(m => {
rimraf(utils.resolve(`apps/${m}`), () => log(m))
})
})
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
JavaScript實現(xiàn)郵箱地址自動匹配功能代碼
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)E-mail郵箱地址自動匹配功能代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-11
javascript高級程序設計第二版第十二章事件要點總結(常用的跨瀏覽器檢測方法)
javascript高級程序設計第二版第十二章事件要點總結(常用的跨瀏覽器檢測方法),需要的朋友可以參考下2012-08-08
uniapp踩坑實戰(zhàn)之文件查找失敗:'uview-ui'?at?main.js解決辦法
這篇文章主要給大家介紹了關于uniapp踩坑實戰(zhàn)之文件查找失敗:'uview-ui'?at?main.js的解決辦法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12
TypeScript里string和String的區(qū)別
這篇文章主要介紹了TypeScript里string和String的區(qū)別,真的不止是大小寫的區(qū)別,string表示原生類型,而String表示對象,下文更多詳細內容需要的小伙伴可以參考一下2022-03-03

