zoukankan      html  css  js  c++  java
  • 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 调用。

    小结

    • 这个全局注入大多数时候是用来解决开发环境和线上环境产生不同的行为时会用到,也比较好用。
  • 相关阅读:
    Catalan数(卡特兰数)
    100个乘客登机问题
    [设计模式]抽象工厂模式
    栈-队和队-栈
    java实现字符串反转
    java实现字符串按词反转
    windows上安装maven及eclipse中配置maven
    Windows 10 安装 Docker
    Win7操作系统安装IE10提示“安装前需要更新与安装程序版本”
    解决Jenkins权限配置错误,导致登录时出现没有Overall/read权限
  • 原文地址:https://www.cnblogs.com/aloneMing/p/13691401.html
Copyright © 2011-2022 走看看