問題描述

多個專案，為了開發方便，不同專案中的模組存在相互引用。開發工具初始用的是Visual Studio Code 1.39.2版本，之前打包執行都是正常，但是當Visual Studio Code從1.39.2升級到1.52.1，發現引用部分模組功能不可用，問題主要體現在axios與vue封裝外掛中，部分修改變數獲取不到修改後的值。

問題原因

初步定位問題原因為，不同專案之間公共包作用域不同，npm預設是查詢規則為以當前package.json為基準，從同目錄下的node_modules開始，如果沒有找到依賴檔案，逐步向上查詢，直至查到至全域性的node_modules上。如果專案2引入專案1

V1.39.2的版本為何能正常解析？

1.39.2版本的Visual Studio Code中，我們預設增加了"npm.enableScriptExplorer": true配置，這個配置的主要功能為查詢依賴包時，預設要查詢至最頂層的package.json中的依賴包 && 顯示側邊欄npm scripts，即在專案1中引用了專案2中的一個模組，專案2中引入了vue.js,專案1中也引入了vue.js，則頂層package.json是在專案1中，最後查詢到的package.json

解決辦法

• Webpack中可以固定關鍵包的查詢作用域，引用其他APP模組，對於公共依賴可以配置別名alias，指定查詢路徑，如下所示：

configureWebpack: {
    resolve: {
      alias: {
        'axios': path.resolve(__dirname, './node_modules/axios/')
      }
    }
  }
 

• 將公共模組封裝成外掛，需要依賴以引數的形式注入

export default function (Vue) {
  // vue相關外掛程式碼
  // xxxx
}

建議不同模組間包的引用最好不要摻雜第三方依賴。

延伸閱讀

• ES6模組（import/export）機制原理是新匯入的包，是對原有包模組的一種引用，原有包資料的改變，會反應到引用的包裡。所以在相同專案中，不同地方都匯入了axios，有一個地方改變了axios.defaults.baseURL，其他地方雖然匯入的是axios包，但是修改的預設地址仍然會獲取到。
• CommonJS模組（require/module.exports）規範是匯入的包，是對原有包的值的拷貝，原有包的模組內容改變，不會反應到匯入的檔案中。

參考資料

• Module
• webpack