如何在本地主機上配置React應用程序的HTTPS

如果您使用create-react-app建立應用程序並在本地計算機上運行它，則默認情況下它將使用HTTP協議進行服務。 任何在生產環境運行的應用程序都將使用HTTPS，它是HTTP的安全版本。 在大多數情況下，您將輕而易舉地獲得HTTPS，特別是如果您使用像Netlify或Vercel這樣的現代平台來提供應用程序的話。 但是在本地環境中，情況會比我們希望的要複雜一些。 讓我們看看您可以如何實現這一點！ 正如您所知，create-react-app應用程序是通過npm run start或簡單地通過npm start運行的，因為在package.json文件的scripts部分中，我們有這一行： "start": "react-scripts start" 將其更改為： "start": "HTTPS=true react-scripts start" 這將HTTPS環境變量設置為true值。 但這還不夠。 現在，我們還需要生成一個本地證書。這一步對於任何應用程序都是有效的，不僅僅限於create-react-app應用程序，但我將在本文中包含它作為參考。 注意：我在macOS上運行這些命令。Linux應該是同樣的。我對Windows不提供保證。 在項目的根文件夾中運行： openssl req -x509 -newkey rsa:2048 -keyout keytmp.pem -out cert.pem -days 365 然後運行： openssl rsa -in keytmp.pem -out key.pem 現在，您應該在文件夾中看到cert.pem和key.pem文件。 現在將package.json文件中的start腳本更改為： "start": "export HTTPS=true&&SSL\_CRT\_FILE=cert.pem&&SSL\_KEY\_FILE=key.pem react-scripts start", 如果您運行npm run start，並訪問https://localhost:3000（或您的應用程序使用的端口，如果不同-在我的情況下是3008），您應該會看到此警告消息： 要在macOS上解決此問題，請按照我的教程如何在macOS上安裝本地證書的說明進行操作。 一旦您這樣做了，您就可以正常查看使用SSL提供的應用程序了：

如何在本地測試 Netlify Functions

我有很多網站都是在 Netlify 上託管的，其中一些使用了一項名為 Netlify Functions 的功能。 可能是因為他們提供了極佳的靜態託管服務，所以我最喜歡的功能是 Netlify Functions。 您只需添加一個帶有導出函數的 JavaScript 檔案，用於處理 URL 的請求，然後完成設置。 您幾乎可以做任何事情，我將它們用作小型實用工具，用於可視化我所需的內部數據，或者執行“連接點”的操作，即將我運營業務所使用的不同工具「黏合」在一起。 如果您想了解更多資訊，請查看我的 Netlify Functions 教程。 在這篇文章中，我想特別談談如何在本地測試 Netlify functions。 有天我需要進行更改一個正在運行中的 Netlify Function，該函數用於處理註冊我的 Bootcamp 的人員，但我不想干擾正在進行的運營業務，以免給客戶造成問題。 我之前已經在「實時」環境中測試過這個函數，確保一切運行正常，但現在我有了不同的需求。 以下是我的解決方法： 首先，安裝 Netlify CLI npm install -g netlify-cli 然後，在網站文件夾中執行以下命令： netlify functions:serve 這樣就可以在本地提供服務的無服務器功能，使用的端口是 9999。您只需要使用類似以下的 URL 來訪問它們： http://localhost:9999/.netlify/functions/<name> 通過使用 Insomnia 發送虛擬 POST 請求，您可以測試它們。 這種方式測試函數還會抓取您在 Netlify 控制台中設定的任何 Netlify 環境變數，所以它就像在 Netlify 上運行它一樣。

如何在本地測試npm套件

如果您想開發自己的npm套件，首先必須在本地測試它。 我在一個我希望模組化的專案中遇到了這個需求。 我建了一個名為flaviocopes-common-database的套件作為示例。 我在套件中添加了一個package.json檔案，該檔案包含了模組名稱在name屬性中，以及一些依賴項: { "name": "flaviocopes-common-database", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "pg": "^8.0.2", "sequelize": "^5.21.6" } } 然後我執行了 npm link 這會在系統的/usr/local/lib/node_modules/資料夾中創建一個符號連結，該資料夾包含全域安裝的npm套件，即使用npm -g安裝的套件。 我有以下連結 /usr/local/lib/node\_modules/flaviocopes-common-database 指向我本地的檔案 /Users/flavio/dev/code/flaviocopes-common-database 現在在另一個專案中，我想使用這個模組，所以我執行了 npm link flaviocopes-common-database 然後我可以使用常見的require()語法在Node.js代碼中引入它: const database = require('flaviocopes-common-database')

如何在共享站點連結時顯示圖片

當你在社交媒體上分享你的網站連結時，如何讓圖片顯示出來呢？讓我們找出答案！ 有人在 Twitter 上問了這個問題： 要如何在分享我所建立的網站連結時顯示圖片？ 要分享圖片，你需要使用Open Graph meta標籤，也被稱為OG標籤。 讓我們看看這篇博文：如何在 macOS 上設置 GitHub 憑證。在Chrome上，右鍵點擊頁面，然後按下View Source。或者在Safari上，從開發菜單中點擊Show Page Source（需要在設置中啟用開發菜單）。 你可以在HTML的<head>部分找到這些標籤： <meta property="og:title" content="如何在 macOS 上設置 GitHub 憑證"> <meta property="og:description" content="設置GitHub身份驗證，以便您可以從VS Code或命令行中使用它"> <meta property="og:type" content="article"> <meta property="og:url" content="https://flaviocopes.com/setup-github-credentials-macos/"> <meta property="og:image" content="https://flaviocopes.com/img/avatar.png"/> 這些標籤中，og:image 是關於圖片的重要部分，但所有的標籤都有助於為其他軟體更好地顯示我們的網站。 每次進行任何更改時，都可以使用 Twitter Card 驗證器 網站，並貼上頁面的 URL。這將顯示預覽並提供一些修正的提示:

如何在安裝 Prettier 後修復 package.json 中的錯誤

在為 Astro 安裝 prettier 設定後，我在 package.json 檔案中遇到了一個錯誤，該錯誤實際上並不存在於該檔案的任何一行。 原來是 tailwind.config.js 是空的，加上兩個空括號即可修復此問題： { }

如何在事件回調中使用 useEffect

我以這樣的代碼運行程式： useEffect(() => { if (!socket) return socket.on('newuserconnected', (username) => { console.log(connectedusers); }); }, [socket]); 這個程式在 socket.io 連接上初始化了一個 newuserconnected 事件的回調。 我假設這樣做後，每當我在服務器上調用該事件時，客戶端（React 應用程序）會在運行時打印變量 connectedusers 的當前值（假設我在應用程序的其他地方對其進行了更新）。 但是事實上，該變量的值在我定義事件的時刻就“凍結”了。 為了解決這個問題，我需要將該變量的值添加到 useEffect 的依賴列表中： useEffect(() => { //... }, [socket, connectedusers]);

如何在使用物件解構時重新命名欄位

學習如何在物件解構時重新命名欄位 有時候一個物件包含一些屬性，但你希望在解構時更改它們的名稱。 例如，某些函數名稱不符合你的命名慣例，或者你已經有一個使用該名稱的變數。 你可以使用以下語法來重新命名其中一個欄位： const person = { firstName: 'Tom', lastName: 'Cruise' } const { firstName: name, lastName } = person name //Tom lastName //Cruise

如何在保存文件時重新加載瀏覽器窗口

一個快速和簡單的方法 我正在使用原生的 HTML + JS 開發網站，然而我錯過了一些像是 create-react-app 或者 Vue CLI 這些快速啟動包提供的最好功能之一：在我保存文件時重新加載頁面。 我找到的最簡單的方法是安裝 browser-sync： npm install -g browser-sync 然後在您的項目文件夾中運行它： browser-sync start --server --files "." 上述命令將監視當前文件夾（包括所有子文件夾）中的所有文件的變化，並在端口3000上啟動一個Web服務器，打開一個瀏覽器窗口以連接到該服務器。 每當您更改一個文件時，瀏覽器將自動刷新。 在原型設計期間非常有用！

如何在家工作而不发疯

在十多年的远程工作经验中得出的一些建议 我已经在家工作了11年。 在此之前，我也一直在家工作，但不是为雇主工作，是为了学校。 当我在2008年转为自由职业者时，这并不是一个艰难的转变。我习惯了独自学习。 在继续之前，我建议你做一件事情。进行这个 人格类型测试 并看看那个网站告诉你什么。 我是一个内向的人，独立并且喜欢独自做事。 这篇文章在很大程度上受到这一事实的影响，如果你是一个需要周围有人才能提高效率的外向型人格，你可能会认为我说的是疯狂的。 我给你的第一个建议是要有一个专用的办公空间。它不需要在另一个建筑物里，但如果你家里有很多人的话，可能是必要的。我有一个专门的房间，带有一扇可以关闭的门。这非常有帮助，因为它避免了中断。 世界上有一些事情是不可能停止的，那就是中断。但作为创意工作者或开发人员，我们需要进入工作状态，尽可能地做深度工作。 尽量减少中断的次数。固定时间段进行“工作时间”。当你关闭办公室门时，提醒所有人你正在工作。就好像当门闭上时，你距离他们50英里远一样。也要尽量减少同事们的打扰。 但当中断来自于你内部时，它们被称为分心。使用像SelfControl这样的应用程序来阻止一切可能的分心。调低手机音量。 有些人在制定时间表方面更有效。有些人喜欢使用“番茄工作法”来设置定时器。我不能做到这一点，因为某种原因，在头两三个番茄钟之后就不起作用了。 我很幸运能够独自工作，不需要向一个团队汇报工作。然而，过去我也曾与团队合作过。我的一般建议是找到一个完全远程的团队（如果可能的话）。避免你是唯一一个远程工作的人的工作情况（除非你是自由职业者）。从长远来看，这种情况会带来压力和缺乏动力。 对于远程团队来说，一整天都开着聊天的模式已经变得很普遍，但我从来不喜欢有人在你离开工作的时候提及你的闲聊和压力。 关闭所有通知，当你在进行重要工作时关闭聊天窗口。聊天可以留到其他时间。 对于电子邮件也是如此。关闭你的电子邮件客户端，并将工作邮件从手机上删除。 有些人喜欢有一个例行公事。我曾经参与过一些团队，在那里我被期望有一定的工作时间，但作为一个非常独立的人，我真的不喜欢那样。我喜欢在我最适合工作的时候工作。但我知道很多人需要固定的工作时间，否则他们就会迷失方向。你最了解自己，选择适合自己的方式。 那么，社交互动怎么样呢？有一个爱好吧。我参与一些体育运动，经常和朋友一起徒步旅行。同时，有一些非技术人士的朋友也是一个很好的恢复精力的方式。但多亏了我的人格类型，我可以数天都没有太多的社交互动。养只狗，可以和人随便聊天。它也可以培养新的友谊。有些人喜欢参加聚会或大会。我不喜欢。推特和YouTube为我提供了一个专业的网络，我可以从中学习，而不需要搬到一个城市。 找一个运动。这真的很重要。正如前面提到的，它也可以帮助社交互动，而且如果你整天坐着，起身做点什么是必须的。

如何在純 JavaScript 中等待 DOM 準備就緒的事件

如何在盡可能早的時間點運行 JavaScript，而不是更早地運行？ 您可以通過對 document 對象添加 DOMContentLoaded 事件的監聽器來實現： document.addEventListener('DOMContentLoaded', (event) => { // 事件發生時執行的代碼 }) 我通常不在事件回調中使用箭頭函數，因為無法訪問 this。 但在這種情況下，我們不需要 this，因為它始終是 document。在任何其他事件監聽器中，我都會使用常規函數： document.addEventListener('DOMContentLoaded', function(event) { // 事件發生時執行的代碼 }) 例如，如果我在一個循環中添加事件監聽器，且不確定事件觸發時 this 將會是什麼。