{"id":28756785,"url":"https://github.com/wx-chevalier/taro-examples","last_synced_at":"2025-06-17T03:08:48.309Z","repository":{"id":43979948,"uuid":"245639787","full_name":"wx-chevalier/taro-examples","owner":"wx-chevalier","description":"基于 Taro \u0026 TS 的多端小程序开发模板","archived":false,"fork":false,"pushed_at":"2023-01-04T14:31:19.000Z","size":6414,"stargazers_count":11,"open_issues_count":22,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-21T21:14:09.734Z","etag":null,"topics":["micro-frontend","taro","wx-code","wx-fe"],"latest_commit_sha":null,"homepage":"https://ng-tech.icu/projects/m-fe","language":"JavaScript","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/wx-chevalier.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}},"created_at":"2020-03-07T13:41:47.000Z","updated_at":"2023-10-29T15:05:26.000Z","dependencies_parsed_at":"2023-02-02T16:04:57.813Z","dependency_job_id":null,"html_url":"https://github.com/wx-chevalier/taro-examples","commit_stats":null,"previous_names":["fe-kits/m-fe-taro"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wx-chevalier/taro-examples","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wx-chevalier%2Ftaro-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wx-chevalier%2Ftaro-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wx-chevalier%2Ftaro-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wx-chevalier%2Ftaro-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wx-chevalier","download_url":"https://codeload.github.com/wx-chevalier/taro-examples/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wx-chevalier%2Ftaro-examples/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260281524,"owners_count":22985630,"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":["micro-frontend","taro","wx-code","wx-fe"],"created_at":"2025-06-17T03:08:47.115Z","updated_at":"2025-06-17T03:08:48.289Z","avatar_url":"https://github.com/wx-chevalier.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](https://i.postimg.cc/0N7w0mnN/image.png)\n\n# m-fe/taro\n\n在 [Web 开发导论/微前端与大前端](https://github.com/wx-chevalier/Web-Series)一文中，笔者简述了微服务与微前端的设计理念以及微前端的潜在可行方案。微服务与微前端，都是希望将某个单一的单体应用，转化为多个可以独立运行、独立开发、独立部署、独立维护的服务或者应用的聚合，从而满足业务快速变化及分布式多团队并行开发的需求。如康威定律(Conway’s Law)所言，设计系统的组织，其产生的设计和架构等价于组织间的沟通结构；微服务与微前端不仅仅是技术架构的变化，还包含了组织方式、沟通方式的变化。微服务与微前端原理和软件工程，面向对象设计中的原理同样相通，都是遵循单一职责(Single Responsibility)、关注分离(Separation of Concerns)、模块化(Modularity)与分而治之(Divide \u0026 Conquer)等基本的原则。\n\n![微前端项目结构](https://user-images.githubusercontent.com/5803001/44003230-de68ac5c-9e81-11e8-81f5-8092f7a9b421.png)\n\n当我们考量项目框架、模板或者脚手架的时候，首先想到的点就是希望尽可能对上层屏蔽细节，但是对于长期维护的、多人协作的中大型项目而言，如果项目的主导者直接使用了部分抽象的脚手架，不免会给未来的更新、迭代带来一定的技术负债；同时，目前也有很多成熟的工程化脚手架，因此笔者选择以项目模板的形式抽象出微前端中所需要的部分。尽可能地遵循简约、直观的原则，减少抽象/Magic Function 等；大型项目可能会抽象出专用的开发工具流，但是对于大部分项目而言，在现有框架/工具链的基础上进行适当封装会是较优选择。\n\n# Develop\n\n```sh\n# 拉取并且提取出子项目\n$ git clone https://github.com/wx-chevalier/m-fe-taro\n\n# 添加全局的依赖更新工具\n$ yarn global add npm-check-updates\n\n# 为各个子项目安装依赖，以及链接各个子项目\n$ yarn bootstrap \u0026\u0026 yarn build\n\n# 执行预编译操作\n$ yarn start\n\n# 执行 Lint 操作\n$ yarn lint\n```\n\n## 如何实现代码共享？\n\nTaro 官方提供了 [taro-ui-sample](https://github.com/NervJS/taro-ui-sample) 来编写多端共享组件库，但是在 Yarn Workspace 中其小程序的组件路径注册会存在一定的问题。笔者是自定义了 [taro-plugin-m-fe](./packages) 来动态地支持该特性。需要注意的是，如果要使用本地自定义插件，那么 @tarojs/cli 需要安装为项目依赖而不能使用全局的安装项。\n\n使用插件方式还是过于麻烦，建议使用 `ln -s /path/to/src common` 方式进行文件夹共享。\n\n## Nav | 关联项目\n\n- [m-fe-configs](https://github.com/wx-chevalier/m-fe-configs)：Common Dev Configs(ESLint, Prettier, Husky, etc.) for Micro-Frontend Apps\n\n- [m-fe-rtw](https://github.com/wx-chevalier/m-fe-rtw): Micro-Frontend boilerplate with React \u0026 TypeScript \u0026 Webpack, for complicated cooperative applications. | 微前端项目模板\n\n- [m-fe-vtw](https://github.com/wx-chevalier/m-fe-vtw): Micro-Frontend boilerplate with Vue \u0026 TypeScript \u0026 Webpack, for complicated cooperative applications. | 微前端项目模板\n\n- [m-fe-rm](https://github.com/wx-chevalier/m-fe-rm): 基于 React \u0026 TS \u0026 Webpack \u0026 APICloud 提供快速移动端应用开发的能力\n\n- [m-fe-taro](https://github.com/wx-chevalier/m-fe-taro): 基于 Taro \u0026 TS 的多端小程序开发模板。\n\n- [m-fe-scaffold](https://github.com/wx-chevalier/m-fe-scaffold/): Cli Toolkits for Web Development \u0026 Deploy on Kubernetes，微前端实践中沉淀的一系列脚手架工具。\n\n- [m-fe-libs](https://github.com/wx-chevalier/m-fe-libs): Micro-Frontend boilerplate with React \u0026 TypeScript \u0026 Webpack, for complicated cooperative applications. | 微前端项目模板\n\n--\n\n- [react-snippets](https://github.com/wx-chevalier/react-snippets): React Snippets(.ts/.tsx), about design patterns/techniques used while developing with React and TypeScript.\n\n- [vue-snippets](https://github.com/wx-chevalier/vue-snippets): Vue Snippets(.js/.ts), about design patterns/techniques used while developing with Vue and JavaScript/TypeScript.\n\n- [fractal-components](https://github.com/wx-chevalier/fractal-components): Massive Fractal Components in Several Libraries(Vanilla, React, Vue, Weapp), for building your great apps easily again\n\n- [Legoble](https://github.com/wx-chevalier/Legoble): Build your apps like stacking Lego blocks 💫 总想自己实现一款可视化配置的动态应用构建工具，动态表单、动态布局、动态报告、动态规则、动态选择、动态流程\n\n# About\n\n## Motivation \u0026 Credits\n\n- [taro-ui](https://taro-ui.aotu.io/#/docs/icon)\n\n## Copyright \u0026 More | 延伸阅读\n\n笔者所有文章遵循 [知识共享 署名-非商业性使用-禁止演绎 4.0 国际许可协议](https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh)，欢迎转载，尊重版权。您还可以前往 [NGTE Books](https://ng-tech.icu/books/) 主页浏览包含知识体系、编程语言、软件工程、模式与架构、Web 与大前端、服务端开发实践与工程架构、分布式基础架构、人工智能与深度学习、产品运营与创业等多类目的书籍列表：\n\n![NGTE Books](https://s2.ax1x.com/2020/01/18/19uXtI.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwx-chevalier%2Ftaro-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwx-chevalier%2Ftaro-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwx-chevalier%2Ftaro-examples/lists"}