CommonJS語法中的require尋找‘包’的規則

最近,使用vue-cli時,webpack配置裏面配置了:
resolve:{
‘vue$’: ‘vue/dist/vue.esm.js
……
}
只有這樣,我們在index.js(這是我的項目裏面文件)中引入vue時(require(’vue’))纔可以正常使用,不然會報錯。

我們下面將講解一下require時,它是如何搜索包的,這樣再進行解釋就可以清楚明瞭了。

類似於windows系統掃描path變量一樣:

require也是按照一個變量集的順序從上到下依次查找。

順序是:
1. 項目下的node_modules
2. 全局的node_modules
3. 項目根路徑(舉個栗子:我在根目錄下面有一個index.js;在util包下面有一個app.vue;index中要引用它,就可以:require(‘./util/app.vue’),這個路徑就是在項目路徑下去定位)

從上面可以觀察到,如果是require用戶自定義的’包’時,那麼速度相對要慢一點,因爲優先級是最低的

接着說一下如何在這個路徑的順序基礎上進行引入。

按照給定的名字在上面的路徑下找(如果沒有擴展名,默認按照:.js;.json;.node爲擴展名去匹配),如果找到的與文件夾名字相同,那麼這就是找到了所謂的‘包’,在包下的package.json文件查找一個main屬性,並拿到它的值進行尋找對應的文件。如果有,則進行加載;如果沒有,那麼繼續進行尋找,知道三種目錄都搜索不到時才進行報錯。

那麼我們再來回頭看一下vue的那個配置,vue/dist/vue.esm.js ,原本main配置裏面的是:dist/vue.runtime.common.js。添加這個配置說明vue-cli不需要這個文件,而是需要vue.esm.js。瞭解了這個規則,那麼我們就很容易看懂這些配置了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章