小程序框架Mpx的下一代脚手架升级之路｜滴滴开源

导读

Mpx开源之路已经走过五个年头，目前支持了滴滴内部全量的小程序业务开发，是滴滴开源委员会孵化的精品项目。

2022年至今，我们对 Mpx 框架进行了多项重要功能升级，包括组合式API开发规范、分包异步构建支持、单元测试能力建设和今天要重点介绍的@mpxjs/cli脚手架升级，希望把更新更好的开发能力与体验带给小程序开发者用户。

小程序技术自2017年发布以来，因其跨平台、使用方便快捷、优良用户体验等特点受到了企业和个人开发者的青睐，以微信、支付宝为代表的各大厂商纷纷推出自己的小程序平台，但是各家的技术标准都不统一，于是小程序开发的平台适配工作成为开发过程中的痛点之一。

企业和个人开发者开始考虑如何能通过一套代码在多个小程序平台及跨web端运行实现降本增效。在小程序技术发展的这几年里，开源社区也涌现出了例如以 Taro、Uniapp、Mpx 等致力于提高开发者开发效率和体验的小程序框架。

其中，Mpx 是一款滴滴开源的增强型跨端小程序框架，它在单文件组件、语法增强、工程化等方面提供了良好的开发体验，同时有着基于响应式数据渲染机制、包体积优化等极致应用性能，以及一份源码同构输出全部小程序平台及web环境的跨端能力，因此收获了业内开发者用户的大量好评。

Mpx开源之路已经走过五个年头，目前支持了滴滴内部全量的小程序业务开发，是滴滴开源委员会孵化的精品项目。2022年至今，我们对 Mpx 框架进行了多项重要功能升级，包括组合式API开发规范、分包异步构建支持、单元测试能力建设和今天要重点介绍的@mpxjs/cli脚手架升级，希望把更新更好的开发能力与体验带给小程序开发者用户。

作为 Mpx小程序开发最基础的工具套件，@mpxjs/cli脚手架能力的改造从滴滴实际业务开发场景以及原@mpxjs/cli@2.x自身所遇到的问题和痛点出发，重新设计了整个脚手架工具并升级到3.x，给 Mpx生态开发者提供上手简单、开箱即用、标准统一、可拓展性更强的脚手架能力。如何基于新的@mpxjs/cli@3.x去搭建满足业务诉求的脚手架，点击文章下方阅读原文参阅文档指南。

1. 

脚手架 @mpxjs/cli@2.x和滴滴业务场景双痛点

Mpx脚手架升级改造之前，原脚手架@mpxjs/cli@2.x在滴滴小程序业务场景和自身架构方向都遇到了一些挑战和痛点。

痛点一：脚手架 mpxjs/cli@2.x 自身的痛点

在升级Mpx脚手架@mpxjs/cli@3.x之前，@mpxjs/cli@2.x将初始化项目中所有配置文件、编译构建代码全部暴露给开发者，开发者可以对这些文件进行修改来满足自己实际的项目开发需要，同时还可以基于这一套原始的模板文件二次拓展为满足自己业务场景的模板。

具体来看，基于模板配置的方式完成项目的初始化的整个工作流是：

• 下载一份存放于远端的Mpx项目原始模板（mpx-template）

• 根据用户的 prompts 选项完成用户选项的注入，并初始化最终的项目文件

  完成项目的初始化后，除了一些基础配置文件外，整个项目的文件主要包含了如下的结构：

-- mpx-project
 |-- src // 项目源码
 |-- config // 项目配置文件
   |-- index.js // 配置入口文件
   |-- mpxLoader.conf.js // mpx-loader 配置
   |-- mpxPlugin.conf.js // mpx webpack-plugin 配置
   |-- user.conf.js // 用户的 prompts 选择信息
 |-- build // 编译构建配置
   |-- build.js // 构建编译脚本
   |-- getPlugins.js // webpack plugins
   |-- getRules.js // webpack module rule
   |-- getWebpackConf.js // webpack 配置生成辅助函数
   |-- utils.js // 工具函数
   |-- webpack.base.conf.js // webpack 基础配置

基于远程模板初始化项目的方式最大的一个好处就是将项目所有的底层配置完全暴露给开发者，开发者可以任意去修改对应的配置。但同时2.x这种模板面临着使用者和开发者两方面痛点。

对于使用者而言：

• 模板和业务项目割裂：远程模板没有严格的版本控制，用户无法感知到远程模板的更新变化；

• 项目升级困难：对于用户来说没有一个很好的方式完成升级工作，基本只能通过 copy 代码的方式，将mpx-template更新后的内容复制一份到自己的项目当中；或者是通过脚手架重新创建一个新的项目，将老的代码迁移到新项目当中；

• 项目结构臃肿：从项目结构角度来说没法做到按需，初始化代码臃肿。M