利用Webpack实现小程序多项目管理的方法

产品小姐姐:“我要做一堆小程序,一周上线一到两个没问题吧”
　　码畜小哥哥:“你他喵是不是傻,做那么多干什么”
　　产品小姐姐:“蹭些流量呀,用户量多了就可以考虑转化流量给公司的应用“
　　码畜小哥哥:“他妈的 好”的 　　

　　

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

　　

　　

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

　　

　　

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

　　

　　

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

　　

　　

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

　　

　　

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

　　

　　

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

　　

　　

<强> 1。整理目录

　　

　　<李>应用程序/:存放全部小程序李 　　<李>构建/:存放构建脚本李 　　<李>常见/:存放公共方法 　　<李>组件/:存放公共组件 　　<李>风格/:存放公共样式李 　　<李>模板/:存放公共模板
　　李 　　

　　

大概长这样

　　

　　

<强> 2。编写构建脚本

　　

package.json 　　 　　 　　脚本:{ 　　“开发”:“webpack——配置构建/webpack.config.js” 　　} 　　 　　

构建/webpack.config.js 　　

思路就是利用CopyWebpackPlugin同步指定的文件到小程序目录下 　　 　　 　　const CopyWebpackPlugin=要求(“copy-webpack-plugin”) 　　const跑龙套=要求(“。/跑龙套”)//获取应用目录下的小程序并指定公共文件目录命名 　　函数copyToApps (dir) { 　　让r=[] 　　 　　跑龙套 　　.exec (“cd $ {utils.resolve(“软件”)},,ls”) 　　.split (“\ n”) 　　. map (app=比;{ 　　r.push ({ 　　来自:utils.resolve (dir), 　　:utils.resolve(“应用程序/${应用}/_ $ {dir} ') 　　}） 　　}） 　　 　　返回r 　　} 　　 　　模块。出口={ 　　看:没错,//监听入口文件,保存便会刷新 　　条目:utils.resolve (“index.js”), 　　 　　输出:{ 　　路径:utils.resolve (“.tmp”), 　　文件名:“bundle.js” 　　}， 　　 　　插件:[//同步指定的公共文件到所有小程序目录下 　　新CopyWebpackPlugin ([ 　　…copyToApps(风格), 　　…copyToApps(共同的), 　　…copyToApps(“模板”), 　　…copyToApps(组件) 　　]) 　　] 　　} 　　 　　

<强> 3。启动本地开发

　　 　　 　　npm运行dev 　　 　　

　　

　　

现在公用的代码已经自动同步到小程序目录下,以下划线开的头,当改动公共代码也会自动同步给小程序调用

　　

调用方式长这样

　　 　　 　　从“进口跑龙套。/_common跑龙套的 　　从“进口com3。/_components com3” 　　 　　 　　 　　@ import”。/_styles/index.wxss’; 　　 　　 　　 　　& lt;进口src=" https://www.yisu.com/zixun/_templates/index.wxml "/祝辞

利用Webpack实现小程序多项目管理的方法