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

故事是这样的

品小姐：“我想做一堆小程序，一周上线一两次就可以了。”代号动物哥：“你傻吗，你干嘛这么多？”产品妹妹：“拿一些流量来说，用户可以考虑把流量转换到公司的App上。”代号动物兄弟：“干得好”代号动物兄弟开始架构，

小程序是混合的，方便把一个项目管理很多小程序，代码要能重用团队开发，并且代码风格要统一才能启动项目

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

当一个项目有多个小程序时，似乎没有问题

当多个小程序使用同一个组件com3时，弟弟发现代码不能重用，需要复制粘贴

考虑之后，将组件目录移到外面，这样您就可以重用它了。

我感觉很好。我哥在微信开发者工具里打开demo1，发现报告有误

最初，小程序将当前项目作为根目录，组件目录不再位于demo1目录中，因此无法引用

小哥想到了网络包

1.整理目录

Apps/:存储所有小程序构建/:存储构建脚本公共/:存储公共方法组件/:存储公共组件样式/:存储公共样式模板/:存储公共模板。看起来像这样

2.编写构建脚本

package.json

script : { ' dev ' : ' web pack-config build/web pack . config . js ' } build/web pack . config . js

想法是使用CopyWebpackPlugin将指定的文件同步到applet目录。const CopyWebPackplugin=require(' copy-web pack-plugin ')Constutils=require('。/utils')//获取apps目录中的小程序并指定公共文件目录名函数copy to apps(dir){ let r=[]utils . exec(` CD $ { utils . resolve(' apps ')} ls `)。拆分(' \ n ')。map(app={ r . push({ from : utils . resolve(dir)，To: utils。解析(` apps/$ {app}/_ $ {dir} `)})返回r}模块。exports={watch: true，//侦听条目文件。保存将刷新entry : utils . resolve(' index . js ')，output 3360 { path : utils . resolve(')。tmp ')、filename3360' bundle.js'}、Plugins: [//将指定的公共文件同步到新的copywebpackplugin ([.复制到应用程序(“样式”)，复制到应用程序(“常用”)，复制到应用程序(“模板”)，复制到所有applet目录下的应用程序(“组件”)

国家预防机制运行开发

现在，公共代码已经自动同步到applet目录，从下划线开始。当公共代码改变时，它将自动同步到applet中进行调用

调用方法很长，如下所示

从“”导入utils。/_common/utils“从导入com3”。/_components/com3'@import '。/_ style/index . wxss '；导入src=' http:/_ templates/index . wxml '/代码样式验证

package.json

script : { ' lint ' : ' eslit apps/' } . eslintrc . js

module . exports={ extends : ' standard '，//从globals: {page: true，component3360 true，app3360 true，getapp3360 true，Wx: true}中排除小程序特有的全局变量，规则： { ' function-paren前空格' : ['error '，' never '，' no-unused-vars' : ['error '，{//小程序不支持这用于与async/await varsignorpatern :“再生器运行时”}]}}兼容，然后在每次与husky提交git之前执行验证

脚本： { ' precommit ' : ' NPM runlint ' }，开发依赖项3360 {'husky' :' 0.14.3'}清理

最后，小弟还增加了一个清理命令，方便公共代码的再生

package.json

script : { ' clean ' : ' node build/clean . js ' } build/clean . js

const rim RAF=require(' rim RAF ')const utils=require(' ./utils ')函数日志(目录){控制台。log(` cleaning $ { dir } `)} rim RAF(utils。解析(' .tmp ')，()=log ' .tmp '))实用程序.exec(` CD $ { utils。解析('应用')} ls `).拆分(' \n ').地图(app={；[`$ { app }/_ style `，` ${app}/_common `，`$ { app }/_模板`，`$ { app }/_组件`] .map(m={ rim RAF(utils。解析(` apps/$ { m } `)，()=log(m)) })以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。