{"id":18938172,"url":"https://github.com/wechat-miniprogram/mpflow","last_synced_at":"2025-04-15T21:09:08.551Z","repository":{"id":44511515,"uuid":"307356622","full_name":"wechat-miniprogram/mpflow","owner":"wechat-miniprogram","description":null,"archived":false,"fork":false,"pushed_at":"2024-09-29T10:55:22.000Z","size":3483,"stargazers_count":63,"open_issues_count":6,"forks_count":12,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-15T21:08:58.689Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wechat-miniprogram.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-26T11:55:05.000Z","updated_at":"2024-10-09T03:43:28.000Z","dependencies_parsed_at":"2024-06-19T01:27:23.766Z","dependency_job_id":"9fc15ce2-369a-4b7b-9ee8-83a6a4179ef4","html_url":"https://github.com/wechat-miniprogram/mpflow","commit_stats":{"total_commits":304,"total_committers":8,"mean_commits":38.0,"dds":0.05592105263157898,"last_synced_commit":"5daf3faaf7dbadb5e543c2bae339987d61563d94"},"previous_names":[],"tags_count":348,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wechat-miniprogram%2Fmpflow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wechat-miniprogram%2Fmpflow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wechat-miniprogram%2Fmpflow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wechat-miniprogram%2Fmpflow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wechat-miniprogram","download_url":"https://codeload.github.com/wechat-miniprogram/mpflow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249153944,"owners_count":21221330,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-08T12:13:37.677Z","updated_at":"2025-04-15T21:09:08.529Z","avatar_url":"https://github.com/wechat-miniprogram.png","language":"TypeScript","readme":"# mpflow\n\n\u003e **mpflow 是微信小程序的增强命令行工具**\n\n- 面向原生，原有的原生小程序可以无缝切换\n- 内置提供了基于 webpack 的小程序构建流程，从刀耕火种走向现代\n- 通过插件提供开箱即用的 Babel, Typescript, Less, 单元测试, e2e 测试 等能力\n- 与小程序开发者工具深度结合 (TODO)\n\n## 文档\n\n[在线文档](https://wechat-miniprogram.github.io/mpflow/docs/)\n\n## 起步\n\n### 安装\n\n![demo-1](img/mpflow-demo-1-min.gif?raw=true)\n\n```bash\nnpm install -g @mpflow/cli\n# 或\nyarn global add @mpflow/cli\n```\n\n### 创建项目\n\n![demo-1](img/mpflow-demo-2-min.gif?raw=true)\n\n```bash\nmpflow create hello-miniprogram\n\ncd hello-miniprogram # 进入到项目目录\n```\n\n该命令会在当前目录创建一个名为 `hello-miniprogram` 的小程序项目\n\n### 项目开发\n\n```bash\nmpflow dev --open # 开启本地开发，并自动拉起小程序开发者工具\n# 或\nnpm run dev:open\n```\n\n### 项目构建\n\n![demo-1](img/mpflow-demo-3-min.gif?raw=true)\n\n```bash\nmpflow build # 构建小程序，用于生产\n# 或\nnpm run build\n```\n\n### 安装插件\n\n![demo-1](img/mpflow-demo-4-min.gif?raw=true)\n\n```bash\nmpflow add slim # 安装 @mpflow/plugin-slim 插件，可用于小程序瘦身\n```\n\n## 官方插件列表\n\n- [`plugin-babel`](https://www.npmjs.com/package/@mpflow/plugin-babel)\n- [`plugin-css`](https://www.npmjs.com/package/@mpflow/plugin-css)\n- [`plugin-e2e-test`](https://www.npmjs.com/package/@mpflow/plugin-e2e-test)\n- [`plugin-slim`](https://www.npmjs.com/package/@mpflow/plugin-slim)\n- [`plugin-typescript`](https://www.npmjs.com/package/@mpflow/plugin-typescript)\n- [`plugin-unit-test`](https://www.npmjs.com/package/@mpflow/plugin-unit-test)\n\n## 现有小程序项目如何接入 mpflow？\n\n### 限制\n\n由于 mpflow 面向的是小程序原生开发构建，因此现有项目**必须为原生写法**才能接入。如使用 mpvue、taro 以及 kbone 等跨端框架均不能使用（也不需要）。\n\n\u003e 若你的项目是使用原生写法，配合一些简单的 gulp 脚本做代码转换，但整体项目结构依然为原生，则可以接入 mpflow\n\n另外请注意 mpflow 暂时还不能覆盖小程序的所有使用场景，如独立分包，worker 等特性都暂时未支持\n\n### 步骤\n\n1. #### 为项目添加 `@mpflow/service` 依赖\n\n   直接在项目下执行\n\n   ```bash\n   npm install @mpflow/service --save-dev\n   # 或\n   yarn add @mpflow/service --dev\n   ```\n\n1. #### 将项目源码都转移到 `src` 目录下\n\n   一个比较典型的小程序目录结构会类似：\n\n   ```\n   node_modules/\n   miniprogram_npm/\n   components/\n   -- comp/\n     -- comp.js\n     -- comp.json\n     -- comp.wxml\n     -- comp.wxss\n   pages/\n   -- index/\n     -- index.js\n     -- index.json\n     -- index.wxml\n     -- index.wxss\n   app.js\n   app.wxss\n   app.json\n   project.config.json\n   package.json\n   ```\n\n   mpflow 为了更方便地管理源码和产物，会要求将项目源码以及图片视频等静态资源，都放置到 `src` 目录下。迁移后的目录结构会类似：\n\n   ```\n   node_modules/\n   src/\n   -- components/\n   -- pages/\n   -- app.js\n   -- app.wxss\n   -- app.json\n   project.config.json\n   package.json\n   ```\n\n   \u003e miniprogram_npm 目录直接删除即可\n\n1. #### 在项目根目录创建一个 `mpflow.config.js`\n\n   `mpflow.config.js` 是 mpflow 的配置文件，原生小程序项目可以直接根据 project.config.json 来迁移。\n\n   需要在 `mpflow.config.js` 中填写的内容参考：\n\n   ```javascript\n   module.exports = {\n     appId: 'wx12345678', // 填写项目 appid，与 project.config.json 中的 appid 相同即可\n     app: 'src/app', // 小程序 app 入口路径，为按上述步骤迁移后的 app.js 所在位置相对项目根目录的路径\n     compileType: 'miniprogram', // 小程序项目类型，与 project.config.json 中的 compileType 相同即可\n     plugins: [], // 插件列表，留空\n     useExtendedLib: {\n       // 使用扩展库，和 app.json 中的 useExtendedLib 相同即可\n       weui: true,\n     },\n     settings: {\n       // 项目配置，与 project.config.json 中的 settings 相同即可\n       es6: false,\n     },\n   }\n   ```\n\n1. #### 手动安装 `plugin-babel`\n\n   首先确保根目录下存在 `babel.config.js`\n\n   ```bash\n   npm install @mpflow/plugin-babel --save-dev\n   ```\n\n   然后在 `babel.config.js` 文件中加入以下内容：\n\n   ```js\n   module.exports = {\n     presets: ['@mpflow/plugin-babel/preset'],\n   }\n   ```\n\n   最后将 `plugin-babel` 加入 `mpflow.config.js` 的插件列表\n\n   ```js\n   // mpflow.config.js\n   module.exports = {\n     plugins: ['@mpflow/plugin-babel'],\n   }\n   ```\n\n1. #### 手动安装 `plugin-typescript`\n\n   如果你的旧项目是使用 ts，则需要安装该插件\n\n   首先确保已安装 `@mpflow/plugin-babel` 且根目录下存在 `tsconfig.json`\n\n   ```bash\n   npm install @mpflow/plugin-typescript --save-dev\n   ```\n\n   然后在 `babel.config.js` 文件中加入以下内容：\n\n   ```js\n   module.exports = {\n     presets: [\n       '@mpflow/plugin-babel/preset',\n       '@mpflow/plugin-typescript/preset', // 注意要放到 babel preset 之后\n     ],\n   }\n   ```\n\n   最后将 `plugin-typescript` 加入 `mpflow.config.js` 的插件列表\n\n   ```js\n   // mpflow.config.js\n   module.exports = {\n     plugins: ['@mpflow/plugin-babel', '@mpflow/plugin-typescript'],\n   }\n   ```\n\n1. #### 安装其他插件\n\n   根据你的需要安装如 `@mpflow/plugin-css` 等插件\n\n1. #### 测试项目构建\n\n   之后即可用命令 `mpflow build` 尝试构建小程序\n\n1. #### 修改项目的构建 script\n\n   修改在 package.json 中构建相关的 script 改为使用 mpflow\n\n   ```json\n   {\n     \"scripts\": {\n       \"build\": \"mpflow-service build\",\n       \"dev\": \"mpflow-service dev\",\n       \"dev:open\": \"mpflow-service dev:open\"\n     }\n   }\n   ```\n\n## Packages\n\n| Name                                    | description                                                   |\n| --------------------------------------- | ------------------------------------------------------------- |\n| @mpflow/cli                             | cli 工具主要模块，处理用户的 cli 交互                         |\n| @mpflow/plugin-babel                    | babel 插件，提供 js 的转义能力                                |\n| @mpflow/plugin-css                      | 样式处理插件，提供 less sass stylus 等支持                    |\n| @mpflow/plugin-e2e-test                 | e2e 测试插件，通过 jest + miniprogram-automator 提供 e2e 测试 |\n| @mpflow/plugin-slim                     | 瘦身插件，提供代码重复度检查以及图片压缩等能力集成            |\n| @mpflow/plugin-typescript               | typescript 插件，提供 typescript 支持                         |\n| @mpflow/plugin-unit-test                | 单元测试插件，通过 jest 提供单元测试                          |\n| @mpflow/service                         | 开发、构建、测试能力，安装到用户本地项目中，用户可选升级      |\n| @mpflow/service-core                    | cli 和 service-core 共用的一些通用代码                        |\n| @mpflow/template-miniprogram            | 小程序创建模板                                                |\n| @mpflow/template-miniprogram-components | 小程序组件库项目模板                                          |\n| @mpflow/template-miniprogram-plugin     | 小程序插件创建模板                                            |\n| @mpflow/test-utils                      | 测试工具（private)                                            |\n| @mpflow/webpack-plugin                  | 通过 webpack 构建小程序的 webpack 插件                        |\n| @mpflow/wxml-loader                     | webpack 的 wxml loader                                        |\n| @mpflow/wxss-loader                     | webpack 的 wxss loader                                        |\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwechat-miniprogram%2Fmpflow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwechat-miniprogram%2Fmpflow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwechat-miniprogram%2Fmpflow/lists"}