mpflow

mpflow 是微信小程序的增强命令行工具

面向原生，原有的原生小程序可以无缝切换
内置提供了基于 webpack 的小程序构建流程，从刀耕火种走向现代
通过插件提供开箱即用的 Babel, Typescript, Less, 单元测试, e2e 测试等能力
与小程序开发者工具深度结合 (TODO)

文档

起步

安装

npm install -g @mpflow/cli
# 或
yarn global add @mpflow/cli

创建项目

mpflow create hello-miniprogram

cd hello-miniprogram # 进入到项目目录

该命令会在当前目录创建一个名为 hello-miniprogram 的小程序项目

项目开发

mpflow dev --open # 开启本地开发，并自动拉起小程序开发者工具
# 或
npm run dev:open

项目构建

mpflow build # 构建小程序，用于生产
# 或
npm run build

安装插件

mpflow add slim # 安装 @mpflow/plugin-slim 插件，可用于小程序瘦身

官方插件列表

现有小程序项目如何接入 mpflow？

限制

由于 mpflow 面向的是小程序原生开发构建，因此现有项目必须为原生写法才能接入。如使用 mpvue、taro 以及 kbone 等跨端框架均不能使用（也不需要）。

若你的项目是使用原生写法，配合一些简单的 gulp 脚本做代码转换，但整体项目结构依然为原生，则可以接入 mpflow

另外请注意 mpflow 暂时还不能覆盖小程序的所有使用场景，如独立分包，worker 等特性都暂时未支持

步骤

为项目添加 `@mpflow/service` 依赖

直接在项目下执行

npm install @mpflow/service --save-dev
# 或
yarn add @mpflow/service --dev

将项目源码都转移到 `src` 目录下

一个比较典型的小程序目录结构会类似：

node_modules/
miniprogram_npm/
components/
-- comp/
  -- comp.js
  -- comp.json
  -- comp.wxml
  -- comp.wxss
pages/
-- index/
  -- index.js
  -- index.json
  -- index.wxml
  -- index.wxss
app.js
app.wxss
app.json
project.config.json
package.json

mpflow 为了更方便地管理源码和产物，会要求将项目源码以及图片视频等静态资源，都放置到 src 目录下。迁移后的目录结构会类似：

node_modules/
src/
-- components/
-- pages/
-- app.js
-- app.wxss
-- app.json
project.config.json
package.json

miniprogram_npm 目录直接删除即可

在项目根目录创建一个 `mpflow.config.js`

mpflow.config.js 是 mpflow 的配置文件，原生小程序项目可以直接根据 project.config.json 来迁移。

需要在 mpflow.config.js 中填写的内容参考：

module.exports = {
  appId: 'wx12345678', // 填写项目 appid，与 project.config.json 中的 appid 相同即可
  app: 'src/app', // 小程序 app 入口路径，为按上述步骤迁移后的 app.js 所在位置相对项目根目录的路径
  compileType: 'miniprogram', // 小程序项目类型，与 project.config.json 中的 compileType 相同即可
  plugins: [], // 插件列表，留空
  useExtendedLib: {
    // 使用扩展库，和 app.json 中的 useExtendedLib 相同即可
    weui: true,
  },
  settings: {
    // 项目配置，与 project.config.json 中的 settings 相同即可
    es6: false,
  },
}

手动安装 `plugin-babel`

首先确保根目录下存在 babel.config.js

npm install @mpflow/plugin-babel --save-dev

然后在 babel.config.js 文件中加入以下内容：

module.exports = {
  presets: ['@mpflow/plugin-babel/preset'],
}

最后将 plugin-babel 加入 mpflow.config.js 的插件列表

// mpflow.config.js
module.exports = {
  plugins: ['@mpflow/plugin-babel'],
}

手动安装 `plugin-typescript`

如果你的旧项目是使用 ts，则需要安装该插件

首先确保已安装 @mpflow/plugin-babel 且根目录下存在 tsconfig.json

npm install @mpflow/plugin-typescript --save-dev

然后在 babel.config.js 文件中加入以下内容：

module.exports = {
  presets: [
    '@mpflow/plugin-babel/preset',
    '@mpflow/plugin-typescript/preset', // 注意要放到 babel preset 之后
  ],
}

最后将 plugin-typescript 加入 mpflow.config.js 的插件列表

// mpflow.config.js
module.exports = {
  plugins: ['@mpflow/plugin-babel', '@mpflow/plugin-typescript'],
}

安装其他插件

根据你的需要安装如 @mpflow/plugin-css 等插件
测试项目构建

之后即可用命令 mpflow build 尝试构建小程序

修改项目的构建 script

修改在 package.json 中构建相关的 script 改为使用 mpflow

{
  "scripts": {
    "build": "mpflow-service build",
    "dev": "mpflow-service dev",
    "dev:open": "mpflow-service dev:open"
  }
}

Packages

Name	description
@mpflow/cli	cli 工具主要模块，处理用户的 cli 交互
@mpflow/plugin-babel	babel 插件，提供 js 的转义能力
@mpflow/plugin-css	样式处理插件，提供 less sass stylus 等支持
@mpflow/plugin-e2e-test	e2e 测试插件，通过 jest + miniprogram-automator 提供 e2e 测试
@mpflow/plugin-slim	瘦身插件，提供代码重复度检查以及图片压缩等能力集成
@mpflow/plugin-typescript	typescript 插件，提供 typescript 支持
@mpflow/plugin-unit-test	单元测试插件，通过 jest 提供单元测试
@mpflow/service	开发、构建、测试能力，安装到用户本地项目中，用户可选升级
@mpflow/service-core	cli 和 service-core 共用的一些通用代码
@mpflow/template-miniprogram	小程序创建模板
@mpflow/template-miniprogram-components	小程序组件库项目模板
@mpflow/template-miniprogram-plugin	小程序插件创建模板
@mpflow/test-utils	测试工具（private)
@mpflow/webpack-plugin	通过 webpack 构建小程序的 webpack 插件
@mpflow/wxml-loader	webpack 的 wxml loader
@mpflow/wxss-loader	webpack 的 wxss loader

ChaneyZhao/mpflow

mpflow

文档

起步

安装

创建项目

项目开发

项目构建

安装插件

官方插件列表

现有小程序项目如何接入 mpflow？

限制

步骤

为项目添加 @mpflow/service 依赖

将项目源码都转移到 src 目录下

在项目根目录创建一个 mpflow.config.js

手动安装 plugin-babel

手动安装 plugin-typescript

安装其他插件