導(dǎo)讀

Mpx開(kāi)源之路已經(jīng)走過(guò)五個(gè)年頭，目前支持了滴滴內(nèi)部全量的小程序業(yè)務(wù)開(kāi)發(fā)，是滴滴開(kāi)源委員會(huì)孵化的精品項(xiàng)目。

2022年至今，我們對(duì) Mpx 框架進(jìn)行了多項(xiàng)重要功能升級(jí)，包括組合式API開(kāi)發(fā)規(guī)范、分包異步構(gòu)建支持、單元測(cè)試能力建設(shè)和今天要重點(diǎn)介紹的@mpxjs/cli腳手架升級(jí)，希望把更新更好的開(kāi)發(fā)能力與體驗(yàn)帶給小程序開(kāi)發(fā)者用戶(hù)。

小程序技術(shù)自2017年發(fā)布以來(lái)，因其跨平臺(tái)、使用方便快捷、優(yōu)良用戶(hù)體驗(yàn)等特點(diǎn)受到了企業(yè)和個(gè)人開(kāi)發(fā)者的青睞，以微信、支付寶為代表的各大廠商紛紛推出自己的小程序平臺(tái)，但是各家的技術(shù)標(biāo)準(zhǔn)都不統(tǒng)一，于是小程序開(kāi)發(fā)的平臺(tái)適配工作成為開(kāi)發(fā)過(guò)程中的痛點(diǎn)之一。

企業(yè)和個(gè)人開(kāi)發(fā)者開(kāi)始考慮如何能通過(guò)一套代碼在多個(gè)小程序平臺(tái)及跨web端運(yùn)行實(shí)現(xiàn)降本增效。在小程序技術(shù)發(fā)展的這幾年里，開(kāi)源社區(qū)也涌現(xiàn)出了例如以 Taro、Uniapp、Mpx 等致力于提高開(kāi)發(fā)者開(kāi)發(fā)效率和體驗(yàn)的小程序框架。

其中，Mpx 是一款滴滴開(kāi)源的增強(qiáng)型跨端小程序框架，它在單文件組件、語(yǔ)法增強(qiáng)、工程化等方面提供了良好的開(kāi)發(fā)體驗(yàn)，同時(shí)有著基于響應(yīng)式數(shù)據(jù)渲染機(jī)制、包體積優(yōu)化等極致應(yīng)用性能，以及一份源碼同構(gòu)輸出全部小程序平臺(tái)及web環(huán)境的跨端能力，因此收獲了業(yè)內(nèi)開(kāi)發(fā)者用戶(hù)的大量好評(píng)。

Mpx開(kāi)源之路已經(jīng)走過(guò)五個(gè)年頭，目前支持了滴滴內(nèi)部全量的小程序業(yè)務(wù)開(kāi)發(fā)，是滴滴開(kāi)源委員會(huì)孵化的精品項(xiàng)目。2022年至今，我們對(duì) Mpx 框架進(jìn)行了多項(xiàng)重要功能升級(jí)，包括組合式API開(kāi)發(fā)規(guī)范、分包異步構(gòu)建支持、單元測(cè)試能力建設(shè)和今天要重點(diǎn)介紹的@mpxjs/cli腳手架升級(jí)，希望把更新更好的開(kāi)發(fā)能力與體驗(yàn)帶給小程序開(kāi)發(fā)者用戶(hù)。

作為 Mpx小程序開(kāi)發(fā)最基礎(chǔ)的工具套件，@mpxjs/cli腳手架能力的改造從滴滴實(shí)際業(yè)務(wù)開(kāi)發(fā)場(chǎng)景以及原@mpxjs/cli@2.x自身所遇到的問(wèn)題和痛點(diǎn)出發(fā)，重新設(shè)計(jì)了整個(gè)腳手架工具并升級(jí)到3.x，給 Mpx生態(tài)開(kāi)發(fā)者提供上手簡(jiǎn)單、開(kāi)箱即用、標(biāo)準(zhǔn)統(tǒng)一、可拓展性更強(qiáng)的腳手架能力。如何基于新的@mpxjs/cli@3.x去搭建滿(mǎn)足業(yè)務(wù)訴求的腳手架，點(diǎn)擊文章下方閱讀原文參閱文檔指南。

1.?

腳手架 @mpxjs/cli@2.x和滴滴業(yè)務(wù)場(chǎng)景雙痛點(diǎn)

Mpx腳手架升級(jí)改造之前，原腳手架@mpxjs/cli@2.x在滴滴小程序業(yè)務(wù)場(chǎng)景和自身架構(gòu)方向都遇到了一些挑戰(zhàn)和痛點(diǎn)。

痛點(diǎn)一：腳手架 mpxjs/cli@2.x 自身的痛點(diǎn)

在升級(jí)Mpx腳手架@mpxjs/cli@3.x之前，@mpxjs/cli@2.x將初始化項(xiàng)目中所有配置文件、編譯構(gòu)建代碼全部暴露給開(kāi)發(fā)者，開(kāi)發(fā)者可以對(duì)這些文件進(jìn)行修改來(lái)滿(mǎn)足自己實(shí)際的項(xiàng)目開(kāi)發(fā)需要，同時(shí)還可以基于這一套原始的模板文件二次拓展為滿(mǎn)足自己業(yè)務(wù)場(chǎng)景的模板。

具體來(lái)看，基于模板配置的方式完成項(xiàng)目的初始化的整個(gè)工作流是：

• 下載一份存放于遠(yuǎn)端的Mpx項(xiàng)目原始模板（mpx-template）

• 根據(jù)用戶(hù)的 prompts 選項(xiàng)完成用戶(hù)選項(xiàng)的注入，并初始化最終的項(xiàng)目文件

  完成項(xiàng)目的初始化后，除了一些基礎(chǔ)配置文件外，整個(gè)項(xiàng)目的文件主要包含了如下的結(jié)構(gòu)：

-- mpx-project
?|--?src?//?項(xiàng)目源碼
?|--?config?//?項(xiàng)目配置文件
???|--?index.js?//?配置入口文件
???|--?mpxLoader.conf.js?//?mpx-loader?配置
???|--?mpxPlugin.conf.js?//?mpx?webpack-plugin?配置
???|--?user.conf.js?//?用戶(hù)的?prompts?選擇信息
?|--?build?//?編譯構(gòu)建配置
   |-- build.js // 構(gòu)建編譯腳本
   |-- getPlugins.js // webpack plugins
   |-- getRules.js // webpack module rule
???|--?getWebpackConf.js?//?webpack?配置生成輔助函數(shù)
???|--?utils.js?//?工具函數(shù)
???|--?webpack.base.conf.js?//?webpack?基礎(chǔ)配置

基于遠(yuǎn)程模板初始化項(xiàng)目的方式最大的一個(gè)好處就是將項(xiàng)目所有的底層配置完全暴露給開(kāi)發(fā)者，開(kāi)發(fā)者可以任意去修改對(duì)應(yīng)的配置。但同時(shí)2.x這種模板面臨著使用者和開(kāi)發(fā)者兩方面痛點(diǎn)。

對(duì)于使用者而言：

• 模板和業(yè)務(wù)項(xiàng)目割裂：遠(yuǎn)程模板沒(méi)有嚴(yán)格的版本控制，用戶(hù)無(wú)法感知到遠(yuǎn)程模板的更新變化；

• 項(xiàng)目升級(jí)困難：對(duì)于用戶(hù)來(lái)說(shuō)沒(méi)有一個(gè)很好的方式完成升級(jí)工作，基本只能通過(guò) copy 代碼的方式，將mpx-template更新后的內(nèi)容復(fù)制一份到自己的項(xiàng)目當(dāng)中；或者是通過(guò)腳手架重新創(chuàng)建一個(gè)新的項(xiàng)目，將老的代碼遷移到新項(xiàng)目當(dāng)中；

• 項(xiàng)目結(jié)構(gòu)臃腫：從項(xiàng)目結(jié)構(gòu)角度來(lái)說(shuō)沒(méi)法做到按需，初始化代碼臃腫。Mpx 支持了小程序跨平臺(tái)、跨端、小程序插件等等相關(guān)的開(kāi)發(fā)，不同的編譯構(gòu)建配置都需要全部生成，在運(yùn)行時(shí)階段才能決定是否啟動(dòng)對(duì)應(yīng)的功能；

• 跨 Web 構(gòu)建能力弱：在基于 Mpx 的跨 Web 場(chǎng)景構(gòu)建中有關(guān)web側(cè)的編譯構(gòu)建的配置是比較初級(jí)的，像熱更新、MPA 多頁(yè)應(yīng)用等比較常用的功能是需要用戶(hù)重新去手動(dòng)搭建一套的；

• 可拓展性差，基于目前的模板拉取的方式無(wú)法滿(mǎn)足多樣化的業(yè)務(wù)需求場(chǎng)景迭代。

對(duì)于開(kāi)發(fā)者而言：

• 分支場(chǎng)景多，功能模塊耦合度高：腳手架的所有功能全部集合到一個(gè)大的模板當(dāng)中。各部分的能力都是耦合在一起，為了滿(mǎn)足不同項(xiàng)目的實(shí)際開(kāi)發(fā)需要，代碼里面需要寫(xiě)比較多的if...else...判斷邏輯來(lái)決定要開(kāi)啟哪些功能，生成哪部分的模板；

• 長(zhǎng)期可維護(hù)性差，開(kāi)發(fā)心智負(fù)擔(dān)重。

痛點(diǎn)二：滴滴業(yè)務(wù)場(chǎng)景痛點(diǎn)

在實(shí)際小程序業(yè)務(wù)場(chǎng)景開(kāi)發(fā)當(dāng)中，面向滴滴在線業(yè)務(wù)場(chǎng)景以及其他業(yè)務(wù)團(tuán)隊(duì)都遇到了痛點(diǎn)。單從在線業(yè)務(wù)前端所負(fù)責(zé)的業(yè)務(wù)來(lái)看，業(yè)務(wù)發(fā)展和迭代有三大特點(diǎn)：

• 業(yè)務(wù)品類(lèi)越來(lái)越豐富：面向司機(jī)、乘客等；

• 業(yè)務(wù)方向越來(lái)越多：拉新、運(yùn)營(yíng)、留存等；

• 投放渠道越來(lái)越多：微信、支付寶以及抖音小程序、快應(yīng)用等；

基于業(yè)務(wù)迭代的三大特點(diǎn)下，不同業(yè)務(wù)場(chǎng)景在小程序的產(chǎn)品形態(tài)上也多起來(lái)：包括獨(dú)立的小程序；宿主&分包小程序；跨端輸出 Web以及小程序插件等等。面對(duì)復(fù)雜的業(yè)務(wù)場(chǎng)景，目前的@mpxjs/cli 2.x的能力就顯得捉襟見(jiàn)肘了，不再能從 mpx-template 出發(fā)去靈活拓展屬于滿(mǎn)足自身業(yè)務(wù)場(chǎng)景的模板。

與此同時(shí)， 滴滴其他業(yè)務(wù)團(tuán)隊(duì)有很多定制化的開(kāi)發(fā)需求，每個(gè)團(tuán)隊(duì)內(nèi)部也維護(hù)滿(mǎn)足各自基于 Mpx小程序業(yè)務(wù)開(kāi)發(fā)場(chǎng)景的腳手架工具+遠(yuǎn)程模板，但是這種模式所帶來(lái)的問(wèn)題是各業(yè)務(wù)團(tuán)隊(duì)和@mpxjs/cli 2.x之間聯(lián)系的割裂，完全沒(méi)辦法感知到@mpxjs/cli 2.x任何功能更新。各團(tuán)隊(duì)如果要進(jìn)行跟進(jìn)升級(jí)基本都是需要改 cli 代碼，然后再到各業(yè)務(wù)項(xiàng)目當(dāng)中進(jìn)行手動(dòng)升級(jí)，成本很大。

Mpx從以上實(shí)際業(yè)務(wù)場(chǎng)景開(kāi)發(fā)和@mpxjs/cli 2.x自身所遇到的問(wèn)題和痛點(diǎn)出發(fā)，重新設(shè)計(jì)并迭代方案?@mpxjs/cli 3.x。

2.?

解讀插件化改造方案五大特點(diǎn)

我們的改造方案整體是基于@vue/cli的技術(shù)棧，稍后會(huì)以在線業(yè)務(wù)前端小程序&跨web業(yè)務(wù)場(chǎng)景為例，為Mpx開(kāi)發(fā)者更好地解讀具體改造方案，在此之前我們先來(lái)了解@vue/cli的插件化架構(gòu)：

?@vue/cli@3.x及以上相較2.x版本，整個(gè)?@vue/cli的架構(gòu)發(fā)生了非常大的變化，從基于模板的腳手架迭代為基于插件化的腳手架，簡(jiǎn)單概述整個(gè)插件化的構(gòu)架是：

1.?@vue/cli提供 vue cli 命令，負(fù)責(zé)偏好設(shè)置，生成模板、 vue-cli-plugin 插件依賴(lài)管理的工作，例如vue create <projectName>、vue add <pluginName>；

2.?@vue/cli-service作為?@vue/cli整個(gè)插件系統(tǒng)當(dāng)中的內(nèi)部核心插件，提供了 npm script 注冊(cè)服務(wù)，內(nèi)置了部分 webpack 配置的同時(shí)，又提供了vue-cli-plugin插件的導(dǎo)入、加載以及 webpack 配置更新服務(wù)等。

以上是@vue/cli生態(tài)當(dāng)中最為核心的兩部分內(nèi)容，二者分工明確，各司其職。此外在@vue/cli生態(tài)當(dāng)中非常重要的一個(gè)點(diǎn)就是vue-cli-plugin插件，每個(gè)插件主要完成模板生成及生產(chǎn)編譯構(gòu)建配置。根據(jù)@vue/cli設(shè)計(jì)的規(guī)范，開(kāi)發(fā)一個(gè)vue-cli-plugin需要遵照相關(guān)的約定來(lái)進(jìn)行開(kāi)發(fā)：

1.?@vue/cli約定插件如果要生成模板，那么需要提供 generator 入口文件；

2.?@vue/cli-service約定插件的 webpack 配置更新需要放到插件的入口文件當(dāng)中來(lái)完成，同時(shí)插件的命名也需要包含vue-cli-plugin前綴，因?yàn)锧vue/cli-service是依據(jù)命名來(lái)加載相關(guān)的插件的。

具體到在線業(yè)務(wù)前端方向純 Web 側(cè)的技術(shù)棧是 Vue，所以在腳手架的選擇上也使用 Vue 官方提供的腳手架。在線業(yè)務(wù)前端不同的品類(lèi)、業(yè)務(wù)所有項(xiàng)目基本采用 MultiRepo 的形式進(jìn)行開(kāi)發(fā)，那么也意味著在腳手架提供的能力當(dāng)中需要有足夠的拓展性、同時(shí)腳手架本身也需要有足夠的收斂性才能支撐各品類(lèi)、業(yè)務(wù)方向的快速迭代。

所以，在線業(yè)務(wù)前端業(yè)務(wù)快速迭代的過(guò)程中，我們時(shí)刻保持著對(duì)于社區(qū)當(dāng)中好的技術(shù)方向、工具的調(diào)研以及落地使用。在@vue/cli@3.0發(fā)布后，我們也進(jìn)行了升級(jí)改造，利用@vue/cli@3.0的插件化設(shè)計(jì)去將業(yè)務(wù)當(dāng)中純 Web 方向的業(yè)務(wù)場(chǎng)景，目錄結(jié)構(gòu)，依賴(lài)，技術(shù)收斂，基礎(chǔ)工程化建設(shè)作為一個(gè)業(yè)務(wù) preset 收斂。將原有的迭代 template 的方式轉(zhuǎn)為對(duì)于業(yè)務(wù) preset 及插件的迭代。

從維護(hù)模板到遷移到插件化設(shè)計(jì)的@vue/cli@3.0腳手架之后，很好支撐了產(chǎn)品研發(fā)過(guò)程當(dāng)中多品類(lèi)、多業(yè)務(wù)場(chǎng)景的迭代。我們不需要單獨(dú)維護(hù)一個(gè)底層腳手架工具，而是擁抱開(kāi)源使用@vue/cli的底層能力，只需要專(zhuān)注于維護(hù)好業(yè)務(wù) preset 及對(duì)應(yīng)的插件功能即可。

在小程序業(yè)務(wù)場(chǎng)景當(dāng)中，同樣也遇到了之前在Web側(cè)多品類(lèi)、多業(yè)務(wù)方向迭代所遇到的問(wèn)題。同樣借鑒@vue/cli的能力及架構(gòu)設(shè)計(jì)來(lái)支撐小程序的業(yè)務(wù)開(kāi)發(fā)，核心思路是將 @vue/cli作為?@mpxjs/cli底層的引擎，收斂Mpx對(duì)于核心依賴(lài)管理、模板、構(gòu)建配置的能力，充分利用?@vue/cli提供的插件機(jī)制去構(gòu)建、拓展上層的插件集。

圖為插件化改造后@mpxjs/cli?的架構(gòu)設(shè)計(jì)

特點(diǎn)一：底層能力

我們將?@vue/cli、@vue/cli-service分別作為?@mpx/cli和@mpx/cli-service 的底層能力，即利用插件化的架構(gòu)設(shè)計(jì)，同時(shí)還非常靈活的滿(mǎn)足了 Mpx 做差異化場(chǎng)景迭代的定制化改造。上層的插件滿(mǎn)足vue-cli-plugin插件開(kāi)發(fā)的規(guī)范，最終底層的能力還是依托于?@vue/cli和?@vue/cli-service進(jìn)行工作。

特點(diǎn)二：上層插件可以拆分

我們將原本大而全的模板進(jìn)行插件化拆分，從 Mpx 所要解決的問(wèn)題出發(fā)，站在基于微信小程序的跨 web 開(kāi)發(fā)、跨平臺(tái)(ali、swan，tt，dd)的小程序開(kāi)發(fā)、使用云函數(shù)的微信小程序開(kāi)發(fā)、微信小程序插件模式的開(kāi)發(fā)四個(gè)角度來(lái)考慮：一個(gè)項(xiàng)目可能只需要某一種開(kāi)發(fā)模式，例如僅僅是微信小程序的插件模式開(kāi)發(fā)，也有可能是小程序和web平臺(tái)混合開(kāi)發(fā)等等，不同的開(kāi)發(fā)模式對(duì)應(yīng)了不同的目錄結(jié)構(gòu)以及不同的編譯構(gòu)建配置。

基于這樣一種現(xiàn)狀以及@mpxjs/cli所要解決的問(wèn)題，從跨平臺(tái)角度出發(fā)將功能進(jìn)行了拆分，最終拆解為如下的9個(gè)插件：

• vue-cli-plugin-mpx（mpx 基礎(chǔ)開(kāi)發(fā)插件）

• vue-cli-plugin-mpx-mp（mpx 小程序平臺(tái)開(kāi)發(fā)插件）

• vue-cli-plugin-mpx-web（mpx 跨 web 平臺(tái)開(kāi)發(fā)插件）

• vue-cli-plugin-mpx-cloud-func（微信小程序云函數(shù)開(kāi)發(fā)插件）

• vue-cli-plugin-mpx-plugin-mode（微信小程序插件模式開(kāi)發(fā)插件）

• vue-cli-plugin-mpx-eslint（mpx eslint 插件）

• vue-cli-plugin-mpx-unit-test（小程序單元測(cè)試插件）

• vue-cli-plugin-mpx-typescript（mpx typescript 插件）

這些拆解出來(lái)的插件都將和功能相關(guān)的項(xiàng)目模板以及編譯構(gòu)建配置進(jìn)行了收斂。借助?@vue/cli 的 Generator API 按需去生成項(xiàng)目開(kāi)發(fā)所需要的模板，例如項(xiàng)目需要使用 eslint 的功能，那么在生成項(xiàng)目的時(shí)候會(huì)生成對(duì)應(yīng)vue-cli-plugin-mpx-eslint所提供的模板文件，如果不需要使用，項(xiàng)目當(dāng)中最終也不會(huì)出現(xiàn)和 eslint 相關(guān)的文件配置。

其中值得一提的是，編譯構(gòu)建的配置是如何進(jìn)行拆解的：在@vue/cli@3.x基于插件的架構(gòu)設(shè)計(jì)當(dāng)中，決定是否要使用某個(gè)插件的依據(jù)是判斷這個(gè)插件是否被你的項(xiàng)目所安裝。和基于模板的構(gòu)架相比，最大的區(qū)別就是：基于模板的架構(gòu)在最終生成的模板配置里需要保存一些環(huán)境配置文件，以供編譯構(gòu)建的運(yùn)行時(shí)來(lái)判斷是否啟用某些功能。但是基于插件的架構(gòu)基本上是不再需要這些環(huán)境配置文件的，因?yàn)槟闳绻褂靡粋€(gè)插件的功能，只需要安裝它即可。

因此依照這樣的設(shè)計(jì)規(guī)范，我們將eslint、unit-test、typescript這些非常獨(dú)立的功能都單獨(dú)抽離成了可拔插的插件，安裝即啟用。以上功能有個(gè)特點(diǎn)就是和平臺(tái)是完全解耦的，所以在拆解的過(guò)程中可以拆的比較徹底。但是由于Mpx項(xiàng)目的特殊性，即要支持基于微信小程序的跨端以及web開(kāi)發(fā)，同時(shí)還要支持小程序的云函數(shù)、小程序插件模式的開(kāi)發(fā)，且不同開(kāi)發(fā)模式的編譯構(gòu)建配置都有些差異。可以用如下的集合圖來(lái)表示他們之間的關(guān)系：

不同插件進(jìn)行組合使用來(lái)滿(mǎn)足不同場(chǎng)景下的使用。在不同平臺(tái)開(kāi)發(fā)模式下是有Mpx編譯構(gòu)建的基礎(chǔ)配置的，這個(gè)是和平臺(tái)沒(méi)有太多關(guān)系，因此將這部分的配置單獨(dú)抽離為一個(gè)插件：vue-cli-plugin-mpx，同時(shí)這個(gè)插件也被置為了@mpxjs/cli的 preset 預(yù)設(shè)插件，不管任何項(xiàng)目開(kāi)發(fā)模式下，這個(gè)插件都會(huì)被默認(rèn)的安裝。

// vue-cli-plugin-mpx
module.exports = function (api, options, webpackConfig) {
  ...


  webpackConfig.module
    .rule('json')
    .test(/\.json$/)
    .resourceQuery(/asScript/)
    .type('javascript/auto')


  webpackConfig.module
    .rule('wxs-pre-loader')
    .test(/\.(wxs|qs|sjs|filter\.js)$/)
    .pre()
    .use('mpx-wxs-pre-loader')
    .loader(MpxWebpackPlugin.wxsPreLoader().loader)


  webpackConfig.resolve.extensions
    .add('.mpx')
    .add('.wxml')
    .add('.ts')
    .add('.js')


  webpackConfig.resolve.modules.add('node_modules')
  ...
}

在小程序的開(kāi)發(fā)模式下，vue-cli-plugin-mpx-mp會(huì)在?vue-cli-plugin-mpx

的基礎(chǔ)上去拓展webpack配置以滿(mǎn)足小程序的編譯構(gòu)建。在跨web的開(kāi)發(fā)模式下，vue-cli-plugin-mpx-web會(huì)在?vue-cli-plugin-mpx和@vue/cli的基礎(chǔ)上去拓展配置以滿(mǎn)足web側(cè)的開(kāi)發(fā)編譯構(gòu)建。

特點(diǎn)三：Web 平臺(tái)編譯構(gòu)建能力增強(qiáng)

在?@mpxjs/cli@2.x版本當(dāng)中有關(guān) web 側(cè)的編譯構(gòu)建的配置是比較初級(jí)的，像熱更新、MPA 多頁(yè)應(yīng)用等比較常用的功能是需要用戶(hù)重新去手動(dòng)搭建一套的。而?@vue/cli@3.x 即為vue項(xiàng)目而生，提供了非常完備的web應(yīng)用的編譯構(gòu)建打包配置。

所以?@mpxjs/cli@3.x版本里面做了一項(xiàng)非常重要的工作就是復(fù)用?@vue/cli的能力，彌補(bǔ)Mpx項(xiàng)目在跨web項(xiàng)目編譯構(gòu)建的不足。

因此關(guān)于Mpx跨web編譯構(gòu)建的部分也單獨(dú)抽離為一個(gè)插件：vue-cli-plugin-mpx-web，這個(gè)插件所做的工作就是在?@vue/cli提供的web編譯構(gòu)建的能力上去適配mpx項(xiàng)目。這樣也就完成了 Mpx 跨web項(xiàng)目編譯構(gòu)建能力的增強(qiáng)。

這也意味著?@vue/cli所提供的能力基本上在Mpx跨web項(xiàng)目當(dāng)中都可使用。

特點(diǎn)四：項(xiàng)目配置具備拓展能力

在@mpxjs/cli@2.x版本的項(xiàng)目如果要進(jìn)行配置拓展，基本需要進(jìn)行以下2個(gè)步驟：

• 對(duì) config 文件夾下的相關(guān)的配置文件進(jìn)行修改

• 對(duì) build 文件夾下的編譯構(gòu)建配置文件進(jìn)行修改

這也是在文章一開(kāi)始的時(shí)候就提到的基于模板的大而全的文件組織方式。

而在最新的@mpxjs/cli@3.x版本當(dāng)中，將項(xiàng)目的配置拓展全部收斂至vue.config.js 文件當(dāng)中去完成，同時(shí)減少了開(kāi)發(fā)者需要了解項(xiàng)目結(jié)構(gòu)的心智負(fù)擔(dān)。

// vue.config.js


module.exports = {
  pluginOptions: {
    mpx: {
      plugin: {
        // mpx-plugin 相關(guān)的配置
      },
      loader: {
        // mpx-loader 相關(guān)的配置
      }
    }
  },
  configureWebpack() {},
  chainWebpack() {
    // 自定義的 webpack 配置
  }
}

特點(diǎn)五：目錄結(jié)構(gòu)更簡(jiǎn)潔

經(jīng)過(guò)這次的插件化的改造后，項(xiàng)目的結(jié)構(gòu)變得更為簡(jiǎn)潔，開(kāi)發(fā)者只需要關(guān)注 src 源碼目錄以及?vue.config.js配置文件即可：

-- mpx-project
 |--src
 |--vue.config.js

特點(diǎn)六：基于平臺(tái)維度的構(gòu)建配置

雖然基于@vue/cli插件的架構(gòu)模式完成了最新版@mpxjs/cli的插件化改造升級(jí)。但是由于 mpx 項(xiàng)目開(kāi)發(fā)的一些特殊性，不同插件之間的協(xié)同工作是有一些約定的。例如?@vue/cli-service內(nèi)置了一些 webpack 的配置，因?yàn)?@vue/cli是專(zhuān)門(mén)針對(duì) web 應(yīng)用的，這些配置會(huì)在所有的編譯構(gòu)建流程當(dāng)中生效，不過(guò)這些配置當(dāng)中有些對(duì)于小程序的開(kāi)發(fā)來(lái)說(shuō)是不需要的。

針對(duì)這種情況，為了避免不同模式下的webpack配置相互污染。web側(cè)的編譯構(gòu)建還是基于@vue/cli提供的能力去適配 mpx 的web開(kāi)發(fā)。而小程序側(cè)的編譯構(gòu)建配置是通過(guò)?@vue/cli-service內(nèi)部暴露出來(lái)的一些方法去跳過(guò)一些對(duì)于小程序開(kāi)發(fā)來(lái)說(shuō)不需要的 webpack 配置來(lái)最終滿(mǎn)足小程序的構(gòu)建配置。因此在各插件的開(kāi)發(fā)當(dāng)中，需要暴露該插件所應(yīng)用的平臺(tái)，這樣在實(shí)際的構(gòu)建過(guò)程當(dāng)中通過(guò)平臺(tái)的標(biāo)識(shí)來(lái)決定對(duì)應(yīng)哪些插件會(huì)生效。

module.export.platform = 'mp'  // 可選值：'web'

3.?

擁抱開(kāi)源，聯(lián)合社區(qū)共建

目前最新版本的?@mpxjs/cli已經(jīng)逐步在滴滴內(nèi)部各業(yè)務(wù)方向的小程序和跨端產(chǎn)品研發(fā)中落地使用。

在本次?@mpxjs/cli重構(gòu)升級(jí)工作當(dāng)中，我們沒(méi)有從零開(kāi)始編寫(xiě)全部底層能力代碼，而是選擇擁抱開(kāi)源，借助?@vue/cli提供的底層插件架構(gòu)、service 和模板能力，結(jié)合 Mpx 的技術(shù)架構(gòu)（例如底層使用 Webpack 作為編譯構(gòu)建工具，跨 web 使用 Vue 作為渲染框架）和實(shí)際的業(yè)務(wù)場(chǎng)景進(jìn)行擴(kuò)展開(kāi)發(fā)，降本提效的同時(shí)也能充分達(dá)成重構(gòu)既定目標(biāo)。

經(jīng)過(guò)這次插件化的改造，我們驗(yàn)證發(fā)現(xiàn)?@mpxjs/cli@2.x版本所遇到的幾個(gè)痛點(diǎn)在新的架構(gòu)模式下都得到了很好解決：

• 代碼冗余、維護(hù)成本高：將大而全的模板根據(jù)功能職責(zé)拆分到每個(gè) vue-cli-plugin-mpx-* 當(dāng)中，由插件內(nèi)部去收斂模板的生成，依賴(lài)管理，以及編譯構(gòu)建能力；

• 升級(jí)困難：將Mpx有關(guān)的構(gòu)建、配置、依賴(lài)統(tǒng)一收斂至每個(gè)插件當(dāng)中，每個(gè)插件都是以 npm package 的形式管理并發(fā)布的，因此是帶有版本控制的(而之前的 mpx-template 是不具備這種快速更新的能力的，只能通過(guò) copy 代碼的方式)，所以每個(gè)插件可單獨(dú)升級(jí)更新，對(duì)于用戶(hù)側(cè)而言如果需要升級(jí)，安裝插件對(duì)應(yīng)的新版本即可；

• 結(jié)構(gòu)臃腫、冗余：用戶(hù)初始化項(xiàng)目過(guò)程中選擇完開(kāi)發(fā)場(chǎng)景后，腳手架會(huì)按需安裝對(duì)應(yīng)開(kāi)發(fā)所需要的插件。不需要的功能插件一律不安裝，同時(shí)日后如果需要這部分的功能，通過(guò) mpx add vue-cli-plugin-mpx-xxx 方式即可完成插件的安裝與使用；

• 跨 Web 構(gòu)建能力弱：直接復(fù)用 @vue/cli提供的能力，Mpx 在跨 web 場(chǎng)景當(dāng)中不需要做過(guò)多的配置，維護(hù)成本很低；

• 可拓展性差：插件化的設(shè)計(jì)非常好的解決了可拓展性差的問(wèn)題，不同插件的組合可高效支撐業(yè)務(wù)迭代；

• 各業(yè)務(wù)團(tuán)隊(duì)不需要維護(hù)各自的小程序 cli，核心基礎(chǔ)的能力交由 @mpxjs/cli做統(tǒng)一的收斂，業(yè)務(wù)團(tuán)隊(duì)只需要更加專(zhuān)注維護(hù)符合自己業(yè)務(wù)團(tuán)隊(duì)的 preset 及插件功能即可。

這種插件化的設(shè)計(jì)更好地統(tǒng)一基于Mpx進(jìn)行小程序開(kāi)發(fā)的基礎(chǔ)能力，建立官方能力和實(shí)際的業(yè)務(wù)開(kāi)發(fā)能力的聯(lián)系，又能滿(mǎn)足不同團(tuán)隊(duì)的定制化需求。我們也希望社區(qū)用戶(hù)在享受新版腳手架帶來(lái)便利的同時(shí)，也能夠積極參與到新版腳手架插件生態(tài)的共建開(kāi)發(fā)中，歡迎大家加入Mpx用戶(hù)群進(jìn)行共建交流。

推薦閱讀

END文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-540354.html