天天看點

vue create 初步解析以及定制化修改

初步解析vue create流程以及定制化修改腳手架

根據<code>package.json</code>中的<code>bin</code>可以知道入口檔案在<code>bin/vue.js</code>

<code>vue.js</code>中找到<code>create &lt;app-name&gt;</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>