利用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 相关文章推荐
javascript Select标记中options操作方法集合
Oct 22 Javascript
jQuery ctrl+Enter shift+Enter实现代码
Feb 07 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
Jan 10 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
vue后台管理之动态加载路由的方法
Aug 13 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 Javascript
Vue获取微博授权URL代码实例
Nov 04 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 Javascript
Javascript之datagrid查询详解
Sep 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
php 静态变量与自定义常量的使用方法
2010/01/26 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
php获取表单中多个同名input元素的值
2014/03/20 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
起点页面传值js,有空研究学习下
2010/01/25 Javascript
javascript 浏览器检测代码精简版
2010/03/04 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
Python 用户登录验证的小例子
2013/03/06 Python
Python中统计函数运行耗时的方法
2015/05/05 Python
Anaconda入门使用总结
2018/04/05 Python
Python 访问限制 private public的详细介绍
2018/10/16 Python
python统计中文字符数量的两种方法
2019/01/31 Python
python dlib人脸识别代码实例
2019/04/04 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
如何使用PHP session
2015/04/21 面试题
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
最新党员的自我评价分享
2013/11/04 职场文书
租车协议书范本
2014/04/22 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
Nginx 匹配方式
2022/05/15 Servers