利用Webpack实现小程序多项目管理的方法-创新互联

故事是这样的

十年的东宁网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。成都营销网站建设的优势是能够根据用户设备显示端的尺寸不同,自动调整东宁建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联从事“东宁网站设计”,“东宁网站推广”以来,每个客户项目都认真落实执行。
产品小姐姐:“我要做一堆小程序,一周上线一到两个没问题吧”
码畜小哥哥:“你他喵是不是傻,做那么多干什么”
产品小姐姐:“蹭些流量呀,用户量多了就可以考虑转化流量给公司的 App”
码畜小哥哥:“fuck 好的”

码畜小哥开始架构

  • 小程序杂,放一个项目方便管理
  • 小程序多,代码要能够复用
  • 团队开发,代码风格要统一

码畜小哥开始建项目

这是单个小程序的基本目录结构,没问题

当一个项目有多个小程序的时候,好像也没问题

当多个小程序都用到同一个组件 com3 时,小哥发现代码没法复用,需要复制黏贴

思考了一下,那么把组件目录移到外面,这样不就可以复用了吗

感觉很好,小哥这时在微信开发者工具打开 demo1,发现报错了

原来小程序是以当前项目作为根目录,components 目录已经不在 demo1 目录范围内,所以是引用不到的

小哥想到了 Webpack

1. 整理目录

  1. apps/:存放全部小程序
  2. build/:存放构建脚本
  3. common/:存放公共方法
  4. components/:存放公共组件
  5. styles/:存放公共样式
  6. templates/:存放公共模板

大概长这样

2. 编写构建脚本

package.json

script: {
 "dev": "webpack --config build/webpack.config.js"
}

当前题目:利用Webpack实现小程序多项目管理的方法-创新互联
浏览地址:http://ybzwz.com/article/dsjgii.html