使用HTTPS和clicktoreactcomponent提升React开发体验

大厂技术  高级前端  Node进阶

点击上方 程序员成长指北&＃xff0c;关注公众号

回复1&＃xff0c;加入高级Node交流群

前几天了解到一个工具仓库 click-to-component[1]&＃xff0c;这个工具的主要作用是&＃xff1a;在 React 项目里&＃xff0c;我们通过 Option &＃43; 鼠标左or右键 点击页面元素可以快速跳转到 IDE 中对应的代码部分&＃xff0c;就像下面这样 &＃x1f447;

简单看了下教程后&＃xff0c;立马在项目里安装并尝了鲜&＃xff0c;好用确实好用&＃xff0c;不过遇到一个比较头疼的问题&＃xff0c;就是每次在浏览器里点击的时候都会打开一个新窗口并弹出一个提示框

说实话&＃xff0c;偶尔弹这么几下勉强还能接受&＃xff0c;但如果我想重度使用 click-to-component 这个工具&＃xff0c;肯定先被这可恶的弹窗给劝退了 &＃x1f635;

好在通过万能的 google 大法&＃xff0c;还是找到了完美的解决办法&＃xff0c;顺带还收获了如何在本地用 HTTPS 进行开发调试&＃xff0c;买一送一&＃xff0c;香的一X &＃x1f920;

首先来解决弹窗的问题&＃xff0c;通过关键字搜索了一圈&＃xff0c;找到一个有用的解法 &＃x1f447;

话不多说&＃xff0c;直接开整

首先在 shell 里进入到指定目录并创建 com.microsoft.Edge.plist 文件

$ cd ~/Library/Preferences
$ touch com.microsoft.Edge.plist


用任一文本编辑器打开创建好的 com.microsoft.Edge.plist 文件并添加如下内容&＃xff1a;





ExternalProtocolDialogShowAlwaysOpenCheckbox




保存退出后重启 MAC

重启后我们再次打开应用和浏览器&＃xff0c;输入地址后&＃xff0c;Option &＃43; 左键点击页面上的元素

Bingo。。等等&＃xff0c;为什么没成功 &＃x1f928;

在浏览器里输入 edge://policy/ 查看&＃xff0c;发现更改的内容已经生效

又去 google 了一圈&＃xff0c;发现[2]这个策略只对 https 生效

好吗&＃xff0c;白忙活一圈&＃xff0c;那就只能来解决本地开发如何使用 HTTPS 的问题了

mkcert

mkcert[3] 是一个简易的制作本地信任开发证书的工具&＃xff0c;他不需要任何配置。而且它是跨平台的&＃xff0c;适合团队共同使用

安装

$ brew install mkcert
$ brew install nss # if you use Firefox (如果你使用 Firefox&＃xff0c;需要额外执行这个)


创建本地 CA

$ mkcert -install
Created a new local CA &＃x1f4a5;
The local CA is now installed in the system trust store! ⚡️
The local CA is now installed in the Firefox trust store (requires browser restart)! &＃x1f98a;


改造 React 项目

我们以使用 Create React App[4] 创建的项目为例&＃xff0c;首先在 package.json 中的启动脚本里添加环境变量打开 HTTPS

{"scripts": {
-   "start": "react-scripts start",
&＃43;   "start": "HTTPS&＃61;true react-scripts start",...}
}


改完后运行项目 yarn start

此时会看到浏览器弹出提示&＃xff0c;但是已经可以通过 HTTPS 来访问&＃xff0c;只是由于没有可靠的证书&＃xff0c;因此链接被认为是不安全的

创建证书

在项目的根目录创建 .cert 文件夹来存放证书

$ mkdir .cert


通过 mkcert 创建证书

$ mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem localhost 127.0.0.1


调整 package.json 中的启动脚本

{"scripts": {
-   "start": "HTTPS&＃61;true react-scripts start",
&＃43;   “start”: "HTTPS&＃61;true SSL_CRT_FILE&＃61;./.cert/cert.pem SSL_KEY_FILE&＃61;./.cert/key.pem"...}
}


注意&＃xff1a; .cert 文件夹不应该被共享&＃xff0c;因此要把这个文件夹添加到 .gitignore 文件里

再次运行项目 yarn start&＃xff0c;现在链接已经变为安全的了

当我们再次 Option &＃43; 左键 点击页面元素时&＃xff0c;此时浏览器的弹窗里会多出一个始终允许的选项

勾选之后点击 Open, 之后无论我们点击任何元素的时候都不会再弹出这个弹窗&＃xff0c;会直接打开 IDE 的对应源码&＃xff0c;完美&＃xff01;&＃x1f929;

无意中发现 com.microsoft.Edge.plist 文件中的内容可以不做更改&＃xff0c;因为默认的策略就是开启的&＃xff0c;个人测试&＃xff0c;当这个值是 false 的时候&＃xff0c;即使是 HTTPS 链接&＃xff0c;弹窗里也不会出现 始终允许打开 的复选框。尴尬 &＃x1f92a;

另外 Firefox 无论 HTTP 还是 HTTPS 的弹窗里都有 始终允许打开 这个选项&＃xff0c;好评 &＃x1f44d;

Chrome 和 Safari 的表现和 Edge 一致

&＃xff08;完&＃xff09;

关于本文

来自&＃xff1a;RunningCoder

https://juejin.cn/post/7102696038321881125

Node 社群我组建了一个氛围特别好的 Node.js 社群&＃xff0c;里面有很多 Node.js小伙伴&＃xff0c;如果你对Node.js学习感兴趣的话&＃xff08;后续有计划也可以&＃xff09;&＃xff0c;我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。如果你觉得这篇内容对你有帮助&＃xff0c;我想请你帮我2个小忙&＃xff1a;1. 点个「在看」&＃xff0c;让更多人也能看到这篇文章2. 订阅官方博客 www.inode.club 让我们一起成长点赞和在看就是最大的支持