初步解析vue create流程以及定制化修改腳手架
根據<code>package.json</code>中的<code>bin</code>可以知道入口檔案在<code>bin/vue.js</code>
<code>vue.js</code>中找到<code>create <app-name></code>的指令設定,在<code>action</code>鈎子中調用了<code>lib/create</code>
擷取項目絕對路徑
判斷項目檔案夾是否存在
建立檔案夾
調用<code>lib/Creator.js</code>
根據建立項目時的選擇項配置<code>preset</code>插件組
深度拷貝<code>preset</code>
配置<code>preset</code>中的預設插件的配置項:<code>@vue/cli-service</code>、<code>@vue/cli-plugin-router</code>、<code>@vue/cli-plugin-typescript</code>、<code>@vue/cli-plugin-vuex</code>
擷取包管理器:<code>yarn/npm/pnpm</code>
開始建立項目,擷取<code>vue-cli</code>版本
根據<code>preset</code>中的插件配置生成<code>package.json</code>檔案
為<code>pnpm</code>生成<code>.npmrc</code>檔案,為<code>yarn</code>生成<code>.yarnrc</code>
為項目添加git配置:<code>git init</code>
安裝CLI插件:生成指定格式的檔案目錄
喚醒插件
安裝配置額外的依賴
running completion hooks
生成<code>README.md</code>
配置git的狀态,為測試配置Git
完成
公司内項目所使用的插件等配置基本相似,在項目開發過程中也有很多提高開發效率的做法,這些可以在腳手架的程式流程中自定義
擺脫複制-粘貼的重複工作,同時避免複制-粘貼丢失導緻的可以不用debug的bug
提高項目開發效率,統一項目開發風格
generateVueConfig.js
修改create流程-Creator.js
在開發中,有一些包總會被引入,比如axios,加密的包,UI架構包等,可以在vue create前期選擇時将其加入,來生成代碼。
引入@vue/cli-xxx包流程:
create.js中,根據<code>new Creator</code>來進入整體流程,初始化Creator時,傳入了初始包清單,以下僅摘要了重要代碼
初始化Creator時,調用了<code>PromptModuleAPI</code>引入了相關包,調用了相關包的配置指令<code>lib/promptModules/xxx</code>
在Creator.create()方法中,根據preset為每一個包配置了配置項,存儲在<code>preset.plugins</code>中
仿制以上流程即可導入自己想在初始化過程中導入的包,比如axios等,為避免沖突,全部為另開發的代碼,以下以axios以及可選擇式的UI架構來舉例
createOtherTools.js -仿制getPromptModules函數,配置自定義包清單,并添加到初始化Creator中
導入相關包的指令行配置,将自定義包的配置存儲在<code>options.otherPlugins</code>中
将自定義包的引入加入到流程中,在生成package.json之前引入
<b> ฅ平平庸庸的普通人ฅ </b>