大廠技術(shù)  高級(jí)前端  Node進(jìn)階

點(diǎn)擊上方 程序員成長(zhǎng)指北，關(guān)注公眾號(hào)

回復(fù)1，加入高級(jí)Node交流群

前言

前幾天了解到一個(gè)工具倉(cāng)庫(kù) click-to-component[1]，這個(gè)工具的主要作用是：在 React 項(xiàng)目里，我們通過(guò) Option + 鼠標(biāo)左or右鍵 點(diǎn)擊頁(yè)面元素可以快速跳轉(zhuǎn)到 IDE 中對(duì)應(yīng)的代碼部分，就像下面這樣 ??

簡(jiǎn)單看了下教程后，立馬在項(xiàng)目里安裝并嘗了鮮，好用確實(shí)好用，不過(guò)遇到一個(gè)比較頭疼的問(wèn)題，就是每次在瀏覽器里點(diǎn)擊的時(shí)候都會(huì)打開(kāi)一個(gè)新窗口并彈出一個(gè)提示框

說(shuō)實(shí)話，偶爾彈這么幾下勉強(qiáng)還能接受，但如果我想重度使用 click-to-component 這個(gè)工具，肯定先被這可惡的彈窗給勸退了 ??

好在通過(guò)萬(wàn)能的 google 大法，還是找到了完美的解決辦法，順帶還收獲了如何在本地用 HTTPS 進(jìn)行開(kāi)發(fā)調(diào)試，買(mǎi)一送一，香的一X ??

彈窗

首先來(lái)解決彈窗的問(wèn)題，通過(guò)關(guān)鍵字搜索了一圈，找到一個(gè)有用的解法 ??

話不多說(shuō)，直接開(kāi)整

首先在 shell 里進(jìn)入到指定目錄并創(chuàng)建 com.microsoft.Edge.plist 文件

$ cd ~/Library/Preferences
$ touch com.microsoft.Edge.plist
復(fù)制代碼

用任一文本編輯器打開(kāi)創(chuàng)建好的 com.microsoft.Edge.plist 文件并添加如下內(nèi)容：

<!-- com.microsoft.Edge.plist -->
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>ExternalProtocolDialogShowAlwaysOpenCheckbox</key>
  <true/>
</dict>
</plist>
復(fù)制代碼

保存退出后重啟 MAC

重啟后我們?cè)俅未蜷_(kāi)應(yīng)用和瀏覽器，輸入地址后，Option + 左鍵點(diǎn)擊頁(yè)面上的元素

Bingo。。等等，為什么沒(méi)成功 ??

在瀏覽器里輸入 edge://policy/ 查看，發(fā)現(xiàn)更改的內(nèi)容已經(jīng)生效

又去 google 了一圈，發(fā)現(xiàn)[2]這個(gè)策略只對(duì) https 生效

好嗎，白忙活一圈，那就只能來(lái)解決本地開(kāi)發(fā)如何使用 HTTPS 的問(wèn)題了

讓本地開(kāi)發(fā)可以使用 HTTPS

mkcert

mkcert[3] 是一個(gè)簡(jiǎn)易的制作本地信任開(kāi)發(fā)證書(shū)的工具，他不需要任何配置。而且它是跨平臺(tái)的，適合團(tuán)隊(duì)共同使用

安裝

$ brew install mkcert
$ brew install nss # if you use Firefox (如果你使用 Firefox，需要額外執(zhí)行這個(gè))
復(fù)制代碼

創(chuàng)建本地 CA

$ mkcert -install
Created a new local CA ??
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)! ??
復(fù)制代碼

改造 React 項(xiàng)目

我們以使用 Create React App[4] 創(chuàng)建的項(xiàng)目為例，首先在 package.json 中的啟動(dòng)腳本里添加環(huán)境變量打開(kāi) HTTPS

{
  "scripts": {
-   "start": "react-scripts start",
+   "start": "HTTPS=true react-scripts start",
    ...
  }
}
復(fù)制代碼

改完后運(yùn)行項(xiàng)目 yarn start

此時(shí)會(huì)看到瀏覽器彈出提示，但是已經(jīng)可以通過(guò) HTTPS 來(lái)訪問(wèn)，只是由于沒(méi)有可靠的證書(shū)，因此鏈接被認(rèn)為是不安全的

創(chuàng)建證書(shū)

在項(xiàng)目的根目錄創(chuàng)建 .cert 文件夾來(lái)存放證書(shū)

$ mkdir .cert
復(fù)制代碼

通過(guò) mkcert 創(chuàng)建證書(shū)

$ mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem localhost 127.0.0.1
復(fù)制代碼

調(diào)整 package.json 中的啟動(dòng)腳本

{
  "scripts": {
-   "start": "HTTPS=true react-scripts start",
+   “start”: "HTTPS=true SSL_CRT_FILE=./.cert/cert.pem SSL_KEY_FILE=./.cert/key.pem"
    ...
  }
}
復(fù)制代碼

注意： .cert 文件夾不應(yīng)該被共享，因此要把這個(gè)文件夾添加到 .gitignore 文件里

再次運(yùn)行項(xiàng)目 yarn start，現(xiàn)在鏈接已經(jīng)變?yōu)榘踩牧?/p>

重新體驗(yàn) click-to-react-component

當(dāng)我們?cè)俅?nbsp;Option + 左鍵 點(diǎn)擊頁(yè)面元素時(shí)，此時(shí)瀏覽器的彈窗里會(huì)多出一個(gè)始終允許的選項(xiàng)

勾選之后點(diǎn)擊 Open, 之后無(wú)論我們點(diǎn)擊任何元素的時(shí)候都不會(huì)再?gòu)棾鲞@個(gè)彈窗，會(huì)直接打開(kāi) IDE 的對(duì)應(yīng)源碼，完美！??

后記

無(wú)意中發(fā)現(xiàn) com.microsoft.Edge.plist 文件中的內(nèi)容可以不做更改，因?yàn)槟J(rèn)的策略就是開(kāi)啟的，個(gè)人測(cè)試，當(dāng)這個(gè)值是 false 的時(shí)候，即使是 HTTPS 鏈接，彈窗里也不會(huì)出現(xiàn) 始終允許打開(kāi) 的復(fù)選框。尷尬 ??

另外 Firefox 無(wú)論 HTTP 還是 HTTPS 的彈窗里都有 始終允許打開(kāi) 這個(gè)選項(xiàng)，好評(píng) ??

Chrome 和 Safari 的表現(xiàn)和 Edge 一致

（完）

關(guān)于本文

來(lái)自：RunningCoder

https://juejin.cn/post/7102696038321881125

Node 社群



我組建了一個(gè)氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對(duì)Node.js學(xué)習(xí)感興趣的話（后續(xù)有計(jì)劃也可以），我們可以一起進(jìn)行Node.js相關(guān)的交流、學(xué)習(xí)、共建。下方加 考拉 好友回復(fù)「Node」即可。


如果你覺(jué)得這篇內(nèi)容對(duì)你有幫助，我想請(qǐng)你幫我2個(gè)小忙：
1. 點(diǎn)個(gè)「在看」，讓更多人也能看到這篇文章
2. 訂閱官方博客 www.inode.club 讓我們一起成長(zhǎng)

點(diǎn)贊和在看就是最大的支持