利用 Webpack 实现小程序多项目管理
故事是这样的产品小姐姐:“我要做一堆小程序,一周上线一到两个没问题吧” 码畜小哥哥:“你他喵是不是傻,做那么多干什么” 产品小姐姐:“蹭些流量呀,用户量多了就可以考虑转化流量给公司的 App” 码畜小哥哥:“ 好的” 码畜小哥开始架构
码畜小哥开始建项目这是单个小程序的基本目录结构,没问题 当一个项目有多个小程序的时候,好像也没问题 当多个小程序都用到同一个组件 com3 时,小哥发现代码没法复用,需要复制黏贴 思考了一下,那么把组件目录移到外面,这样不就可以复用了吗 感觉很好,小哥这时在微信开发者工具打开 demo1,发现报错了 原来小程序是以当前项目作为根目录,components 目录已经不在 demo1 目录范围内,所以是引用不到的 小哥想到了 Webpack1. 整理目录
大概长这样 2. 编写构建脚本package.json script: {
"dev": "webpack --config build/webpack.config.js"
}
build/webpack.config.js 思路就是利用 CopyWebpackPlugin 同步指定的文件到小程序目录下 )
const utils = './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,// 监听入口文件,保存便会刷新
entry: utils.resolve('index.js'),output: {
path: utils.resolve('.tmp'),filename: 'bundle.js'
},plugins: [
// 同步指定的公共文件到所有小程序目录下
new CopyWebpackPlugin([
...copyToApps('styles'),...copyToApps('common'),0);">'templates'),0);">'components')
])
]
}
3. 启动本地开发npm run dev
现在公用的代码已经自动同步到小程序目录下,以下划线开头,当改动公共代码也会自动同步给小程序调用 调用方式长这样
import com3 './_components/com3'
@import './_styles/index.wxss';
<import src="./_templates/index.wxml" />
代码风格校验package.json .eslintrc.js
|