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

2024-07-29 09:13:16

故事是这样的

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

码畜小哥开始架构

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

码畜小哥开始建项目

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

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

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

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

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

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

小哥想到了 Webpack

1. 整理目录

apps/：存放全部小程序
build/：存放构建脚本
common/：存放公共方法
components/：存放公共组件
styles/：存放公共样式
templates/：存放公共模板

大概长这样

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

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

调用方式长这样

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))
  })
 })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

webpack4打包vue前端多页面项目

之前一直用的脚手架,这次自己搭建webpack前端项目,花费了不少心思,于是做个总结. 1.用法项目结构如下: project |- bulid  |- public |- css |- js |- page1.html  |- page2.html  ... |- public/  |- src
详解如何使用webpack打包多页jquery项目

虽然已经2019年了不过有一些项目还是需要用到jquery的不过考虑到使用jquery的一堆兼容性问题也为了可以顺利地使用ES6来撸代码研究使用webpack+babel打包代码来发布几个重点: 1.为了将模块分割加载,不至于一个js文件过大,一个页面中使用多个js文件 2.由于是多页项目(多个html),每个页面使用的js文件都不一致基于以上两点,需要配置多个入口文件 3.会把小图片转换成base64,所以可能css转成的js文件会比较大,所以css文件都单独设置入口js 例如,
详解webpack4多入口、多页面项目构建案例

趁工作之余从零构建了一个webpack4.x多页面应用程序.过程中也遇到一些坑,就记录下来了. webpack核心概念 Entry:入口,Webpack 执行构建的第一步将从 Entry 开始. Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件.Webpack 会从配置的 Entry 开始递归找出所有依赖的模块. Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割. Loader:模块转换器,用于把模块原内容按照需求转换成新内容. Plugi
基于 webpack2 实现的多入口项目脚手架详解

简介基于 webpack2 实现的多入口项目脚手架,主要使用 extract-text-webpack-plugin 实现 js .css 公共代码提取,html-webpack-plugin 实现 html 多入口,less-loader 实现 less 编译,postcss-loader 配置 autoprefixer 实现自动添加浏览器兼容前缀,html-withimg-loader 实现 html 内引入图片版本号添加和模板功能,babel-loader 实现 ES6 转码功能, ha
详解webpack编译多页面vue项目的配置问题

本文主要介绍了webpack编译多页面vue项目的配置问题,分享给大家,具体如下: 一般情况下,构建一个vue项目的步骤为: 1,安装nodejs环境 2,安装vue-cli cnpm install vue-cli -g 3,构建vue项目 vue init webpack-simple vue-cli-multipage-demo 4, 安装项目依赖包 cnpm install 5,在开发环境下运行该项目: npm run dev 通过上面这几步一个简单的vue项目的开发环境基本就搭建起来,
利用Webpack实现小程序多项目管理的方法

故事是这样的产品小姐姐:"我要做一堆小程序,一周上线一到两个没问题吧" 码畜小哥哥:"你他喵是不是傻,做那么多干什么" 产品小姐姐:"蹭些流量呀,用户量多了就可以考虑转化流量给公司的 App" 码畜小哥哥:"fuck 好的" 码畜小哥开始架构小程序杂,放一个项目方便管理小程序多,代码要能够复用团队开发,代码风格要统一码畜小哥开始建项目这是单个小程序的基本目录结构,没问题当一个项目有多个小程序的时候,好像也没问题
微信小程序 rich-text的使用方法

微信小程序 rich-text的使用方法 rich-text 属性:nodes 类型:Array / String 结点列表 / HTML String 全局支持class和style属性,不支持id属性. 结点类型:type = node , name 标签名 String 是支持部分受信任的HTML结点, attrs 属性 Object 否支持部分受信任的属性,遵循Pascal命名法 , children 子结点列表 Array 否结构和nodes一致结点类型:type = t
本地搭建微信小程序服务器的实现方法

本地搭建微信小程序服务器的实现方法现在开发需要购买服务器,价格还是有点贵的,可以花费小代价就可以搭建一个服务器,可以用来开发小程序,博客等. 1.域名(备案过的) 2.阿里云注册免费的https证书 3.配置本地的nginx 4.内网映射(本地安装wampserver 服务器) 一.域名注册花生壳,开通内网映射需要8元(我开通时需要,现在不清楚还要不要),里面可以注册2个免费的域名,都是免备案的.具体的请自行百度,花生壳注册地址二.申请阿里云免费的https证书阿里云免费的http
微信小程序 setData的使用方法详解

微信小程序 setData的使用方法详解最近在使用微信小程序的setData时,遇到了以下问题.如下: 官网文档在使用setData()设置数组对象的某个元素的属性时,是这么使用的: Page({ data: { array: [{text: 'init data'}], }, changeItemInArray: function() { this.setData({ 'array[0].text':'changed data' }) } }) 使用了 'array[0].text' : '
微信小程序自定义toast实现方法详解【附demo源码下载】

本文实例讲述了微信小程序自定义toast实现方法.分享给大家供大家参考,具体如下: 一.微信官方默认toast toast最常见了,几乎每个App都有这样的特效,先看下小程序自带的toast效果,立马想死的心都有了~~ 微信自带toast的效果: js文件: wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) 用法超级简单,但官方小程序有几个问题: 只能显示success.loading两种icon 且icon不可去除持
使用mpvue搭建一个初始小程序及项目配置方法

1. 初始化一个 mpvue 项目现代前端开发框架和环境都是需要 Node.js 的,如果没有的话,请先下载 nodejs 并安装. 然后打开命令行工具: # 1. 先检查下 Node.js 是否安装成功 $ node -v v8.9.0 $ npm -v 5.6.0 # 2. 由于众所周知的原因,可以考虑切换源为 taobao 源 $ npm set registry https://registry.npm.taobao.org/ # 3. 全局安装 vue-cli # 一般是要 sud
微信小程序时间轴实现方法示例

本文实例讲述了微信小程序时间轴实现方法.分享给大家供大家参考,具体如下: 最近项目需要在页面上做一个时间轴,又是第一次做,而且还是在小程序上,要知道小程序里面没有ol/ul/li,看了好几个例子,最后做出来了,开心呀!如图: 做起来其实很简单:一个时间轴包括一个圆圈(css实现圆圈或者找一个圆圈图片)+一条线(css实现直线或者找一个直线的图片)+内容来看我的代码(代码很不规范,请忽略): wxml <view class='weui-cell-third'> <view class=
微信小程序页面渲染实现方法

这篇文章主要介绍了微信小程序页面渲染实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下条件渲染:wx:if, wx:elif, wx:else <view wx:if="{{list.length > 5}}" >1</view> <view wx:elif="{{list.length > 2}}">2</view> <view wx:els
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析

本文实例讲述了PHP配合fiddler抓包抓取微信指数小程序数据的实现方法.分享给大家供大家参考,具体如下: 这两天研究了下微信指数这个东西.要抓取呢,按照一般思路的话,那就是使用fiddler抓取手机包,然后进行分析获取地址然后请求就可以了. 这么想你是没错,如果你果断这么做了,那就是too yang too simple了.大家可以看下,微信抓取有以下几个步骤: 1.开始登陆小程序 2.获取访问需要的令牌 3.那这令牌去获取数据首先的难点就是小程序的登陆那一步.你得先登陆了微信之后才可以访
微信小程序indexOf的替换方法(推荐)

方法:通过wxs定义indexOf方法,在页面中引用并使用栗子: wxs:命名为str.wxs,导出定义的defineIndexOf方法,命名为indexOf function defineIndexOf(str, val) { return str.indexOf(val); } module.exports = { indexOf: defineIndexOf } wxml: 引用str.wxs,并给模块命名为toolStr,在下面的循环中要用到toolStr里面导出的indexOf方法

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

相关推荐

随机推荐