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


Posted in Javascript onFebruary 25, 2019

故事是这样的

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

码畜小哥开始架构

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

码畜小哥开始建项目

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

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

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

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

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

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

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

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

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

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

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

小哥想到了 Webpack

1. 整理目录

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

大概长这样

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

2. 编写构建脚本

package.json

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

build/webpack.config.js

思路就是利用 CopyWebpackPlugin 同步指定的文件到小程序目录下
const CopyWebpackPlugin = require('copy-webpack-plugin')
const utils = require('./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'),
   ...copyToApps('templates'),
   ...copyToApps('components')
  ])
 ]
}

3. 启动本地开发

npm run dev

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

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

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

调用方式长这样

import utils from './_common/utils'
import com3 from './_components/com3'
@import './_styles/index.wxss';
<import src="./_templates/index.wxml" />

代码风格校验

package.json

script: {
 "lint": "eslint apps/"
}

.eslintrc.js

module.exports = {
 extends: 'standard',

 // 将小程序特有的全局变量排除下
 globals: {
  Page: true,
  Component: true,
  App: true,
  getApp: true,
  wx: true
 },

 rules: {
  'space-before-function-paren': ['error', 'never'],
  'no-unused-vars': [
   'error',
   {
    // 小程序还没支持 ES7,这个是用来兼容 async/await
    varsIgnorePattern: 'regeneratorRuntime'
   }
  ]
 }
}

然后借助 husky 在每次 git commit 前执行校验

script: {
 "precommit": "npm run lint"
},

devDependencies: {
 "husky": "^0.14.3"
}

清理

最后小哥还加了个清理命令, 便于重新生成公共代码

package.json

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

build/clean.js

const rimraf = require('rimraf')
const utils = require('./utils')

function log(dir) {
 console.log(`cleaning ${dir}`)
}

rimraf(utils.resolve('.tmp'), () => log('.tmp'))

utils
 .exec(`cd ${utils.resolve('apps')} && ls`)
 .split('\n')
 .map(app => {
  ;[
   `${app}/_styles`,
   `${app}/_common`,
   `${app}/_templates`,
   `${app}/_components`
  ].map(m => {
   rimraf(utils.resolve(`apps/${m}`), () => log(m))
  })
 })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解析window.open的使用方法总结
Jun 19 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
jquery.cookie.js使用指南
Jan 05 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
修改NPM全局模式的默认安装路径的方法
Dec 15 Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 #Javascript
JavaScript中的事件与异常捕获详析
Feb 24 #Javascript
Vue 组件注册实例详解
Feb 23 #Javascript
Vue Prop属性功能与用法实例详解
Feb 23 #Javascript
Vue自定义属性实例分析
Feb 23 #Javascript
Vue动态组件与异步组件实例详解
Feb 23 #Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 #Javascript
You might like
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
2013/08/05 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
Javascript中this关键字的一些小知识
2015/03/15 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
微信小程序3D轮播实现代码
2019/09/19 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
Python中文件遍历的两种方法
2014/06/16 Python
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
Python输入二维数组方法
2018/04/13 Python
python在文本开头插入一行的实例
2018/05/02 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
python微信公众号开发简单流程实现
2020/03/09 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
日本最大的购物网站:日本乐天市场(Rakuten Ichiba)
2020/11/04 全球购物
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
《乌塔》教学反思
2014/02/17 职场文书
房地产活动策划方案
2014/05/14 职场文书
借名购房协议书范本
2014/10/06 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle