webpack打包的項目,如何向項目中注入一個全局變量


問題

最近遇到一個問題,就是項目上有時候部署的時候會用到nginx轉發,然后nginx轉發與不轉發時取的一個ws的地址一個是取當前的ip端口,一個是取配置中的ip端口。這種情況本地調試的時候,由於本地是localhost,導致了ws無法成功建立連接,需要做一些特殊處理,在開發環境,將代理的項目的ip端口注入到全局變量中,方便給ws請求時提供正確的路徑。

解決方法

使用webpack.DefinePlugin()來解決這個問題。

const proxy = require('../package.json').porxy; // 我是將proxy的代理寫在了package.json中,先獲取配置的proxy
...
plugins: [
    new webpack.DefinePlugin({
      "PROXY": JSON.stringify(proxy) // 將proxy當做全局變量PROXY注入到項目的上下文環境中,注意這個時候,這個全局變量並不是附加到了window對象上,而是直接的一個全局變量。訪問的時候就是直接PROXY就可以訪問到該變量
    })
]
...
  • 之所以要用JSON.stringfy()包裹起來,是因為如果是單純的字符串,這個插件就會把該字符串代做代碼來解析,它的配置規則如下:

如果這個值是一個字符串,它會被當作一個代碼片段來使用

如果這個值不是字符串,它會被轉化為字符串(包括函數)。

如果這個值是一個對象,它所有的 key 會被同樣的方式定義。

如果在一個 key 前面加了 typeof,它會被定義為 typeof 調用。

小結

  • 這個全局注入大多數時候是用來解決開發環境和線上環境產生不同的行為時會用到,也比較好用。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM