yize/xswitch

I do not know how to use it ,can you write it with more detail

fred-hu opened this issue · 3 comments

I do not know how to use it ,can you write it with more detail
yize commented

你可以认为这个插件,只是做了一层 URL 的转发。

直接下载插件就可以使用,规则配置,可以参考下面。

主要为了解决想把 URL 里面,某些值替换掉。

{
  "proxy": [
    [
      "https://www.taobao.com", // 想要被转发的 URL 
      "https://www.tmall.com" // 想要被转发到的 URL
    ],
  ]
}

这样的话,如果你访问,https://www.taobao.com?params=12345 的话,插件会自动帮你转到 https://www.tmall.com?params=12345

只要经过浏览器请求的地址,都会过一遍规则。

不过一般我们不会做上面这种规则。大部分都是想代理到本地。比如阿里这边一般经常使用 g.alicdn.com 这个域名的 CDN 文件。

比如想要把这段代码转发到本地:https://g.alicdn.com/mtb/lib-windvane/2.0.3/windvane.js

  1. 只是想匹配路径。

    {
      "proxy": [
         // 将请求中,匹配到部分路径的 URL ,匹配到本地。
         [
           "https://g.alicdn.com/mtb/lib-windvane/2.0.3/",
           "http://127.0.0.1:3000/" // 推荐写 127.0.0.1 而不是 localhost 。因为 127.0.0.1 被允许 https 下访问,而不会出现不安全脚本警告。
         ],
      ]
    }
  2. 想精确匹配 JS ,因为很多时候,webpack 打出的 CSS 我们在调试模式的时候,会直接通过 JS 进行加载。

    {
      "proxy": [
         // 将请求中,匹配到部分路径的 URL ,匹配到本地。
         [
           "https://g.alicdn.com/mtb/lib-windvane/(.*)/(.*).js",
           "http://127.0.0.1:3000/$2?t=123" // $2 就表示是第二个匹配到的字符。这里的 $1 是版本号,一般我们不需要关心它。
         ],
      ]
    }

到那里下载插件呢?大陆被屏蔽了上不了谷歌阿。还是不知道怎么使用。

yize commented

可以直接 clone 项目,然后在 Chrome Extension 里,开发者模式载入 build 文件夹就好。使用方法可以看 Readme 的优酷视频。