• 用于 webpack 打包后方便修改的配置文件


    有些配置项,我们希望在 webpack 打包后也能方便修改,比如接口地址、第三方链接等。
    最近做的一个项目遇到了这样的需求,其实思路很简单,在 HTML 文件的 head 中引入一个 JS 文件,JS 文件往 window 添加全局对象,里面就是各种配置字段,开发的时候直接通过 window 使用这些配置即可。
    然后在打包的时候通过 copy-webpack-plugin 复制这个 JS 文件到正确的位置即可。

    可是在开发过程中也遇到了一点小问题:

    <script src="./gConfig.js"></script>
    

    一开始就很简单的在 head 中通过 script 标签引入,但是却有一个问题——缓存。当我们修改了 gConfig.js 里的配置后,浏览器有缓存,需要强刷才能更新。

    为了解决这个缓存问题,可以通过添加版本号,如:

    <script src="./gConfig.js?v=1"></script>
    

    不过如果是给运维等人员修改,修改了 js 的配置后还得改 html 的版本号,有点麻烦。

    之后理所当然的就是想到添加随机数,可是该怎么添加呢?
    在内联 JS 中使用 document.createElement('script') 然后生成随机数,最后 append 到 head 中吗?

        <script>
            const scr = document.createElement('script')
            scr.src = `./gConfig.js?${Math.random()}`
            document.head.append(scr)
        </script>
        <script>
            console.log(123, window.gConfig)
        </script>
    

    然而通过这种方式得到的是 undefined,因为 DOM 操作是跨线程的,不会阻塞运行。

    那么就没办法了吗?这时就需要 document.write 出场了:

        <script>
            document.write("<script src='./gConfig.js?"+Math.random()+"'></script>")
        </script>
        <script>
            console.log(123, window.gConfig)
        </script>
    

    当我们使用 document.write 写入 script 标签,下面的 console 就能得到正确的输出结果。因为浏览器执行到 document.write 的时候,就会立即往文档流中写入内容,写入完成后浏览器才会继续解析。这里继续解析就解析到我们写入的 script 标签了,然后解析我们的 gConfig.js 再继续,流程就正确了。

  • 相关阅读:
    安装、设置与启动MySql5.1.30绿色版的方法
    可执行jar包的maven配置
    Maven配置文件说明
    Maven常用命令
    eclipse下创建maven工程
    [Linux]常用命令与目录全拼
    Linux的端口和服务
    TortoiseSVN
    SpringCloud-断路器(Hystrix)
    SpringCloud-服务的消费者(Feign)
  • 原文地址:https://www.cnblogs.com/3body/p/14578637.html
Copyright © 2020-2023  润新知