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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 2027 天前的主题，其中的信息可能已经有所发展或是发生改变。

故事是这样开始的

前端开发小哥 Bingo 接到了产品小姐姐的需求，要上线多个小程序.

码畜小哥开始架构

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

码畜小哥开始建项目

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

图片描述

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

图片描述

当多个小程序都用到同一个组件 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))
    })
  })