利用Webpack实现小程序多项目管理的方法-创新互联
故事是这样的
产品小姐姐:“我要做一堆小程序,一周上线一到两个没问题吧”
码畜小哥哥:“你他喵是不是傻,做那么多干什么”
产品小姐姐:“蹭些流量呀,用户量多了就可以考虑转化流量给公司的 App”
码畜小哥哥:“fuck好的”
码畜小哥开始架构
- 小程序杂,放一个项目方便管理
- 小程序多,代码要能够复用
- 团队开发,代码风格要统一
码畜小哥开始建项目
这是单个小程序的基本目录结构,没问题
当一个项目有多个小程序的时候,好像也没问题
当多个小程序都用到同一个组件 com3 时,小哥发现代码没法复用,需要复制黏贴
思考了一下,那么把组件目录移到外面,这样不就可以复用了吗
感觉很好,小哥这时在微信开发者工具打开 demo1,发现报错了
原来小程序是以当前项目作为根目录,components 目录已经不在 demo1 目录范围内,所以是引用不到的
小哥想到了 Webpack
1. 整理目录
- apps/:存放全部小程序
- build/:存放构建脚本
- common/:存放公共方法
- components/:存放公共组件
- styles/:存放公共样式
- templates/:存放公共模板
大概长这样
2. 编写构建脚本
package.json
script: { "dev": "webpack --config build/webpack.config.js" }
本文标题:利用Webpack实现小程序多项目管理的方法-创新互联
标题链接:http://pcwzsj.com/article/dsjgii.html