CommonJS 簡介

CommonJS 模組規範是 Node.js 中用於處理模組的標準。模組非常方便,因為它們允許你封裝各種功能並將這些功能作為庫暴露給其他 JavaScript 文件。 CommonJS 模組規範是 Node.js 中用於處理模組的標準。 在瀏覽器中運行的客戶端 JavaScript 使用另一種標準,稱為 ES Modules。 模組非常方便,因為它們允許你封裝各種功能並將這些功能作為庫暴露給其他 JavaScript 文件。它們讓你可以創建明確分離且可重用的功能片段,每個片段都可以單獨進行測試。 巨大的 npm 生態系統是基於這種 CommonJS 格式構建的。 導入模組的語法如下: const package = require('module-name') 在 CommonJS 中,模組是同步加載的,並且按照 JavaScript 運行時找到它們的順序進行處理。這個系統是為了服務器端 JavaScript 而設計的,並不適用於客戶端(這就是為什麼引入了 ES Modules 的原因)。 當一個 JavaScript 文件導出其定義的一個或多個符號(變量、函數、對象)時,它就是一個模組: uppercase.js exports.uppercase = (str) => str.toUpperCase() 任何 JavaScript 文件都可以導入並使用該模組: const uppercaseModule = require('uppercase.js') uppercaseModule.uppercase('test') 你可以導出多個值: exports.a = 1 exports.b = 2 exports.c = 3 並使用 解構賦值 個別導入它們: const { a, b, c } = require('....

Glitch:一個很棒的開發者平台

Glitch是一個非常棒的平台,可以用來學習和實驗程式碼。本文將向您介紹Glitch,並讓您從零到一成為Glitch的高手。 Glitch是一個很好的學習編程的平台。 我在許多教程中使用Glitch,我認為它是一個展示概念並允許人們使用您的項目並在其基礎上建立的很棒的工具。 以下是我在Glitch上使用React和React Router創建的示例項目:https://glitch.com/edit/#!/flaviocopes-react-router-v4-2 使用Glitch,您可以輕鬆地創建JavaScript編寫的應用程序的演示和原型,從簡單的網頁到React或Vue等高級框架,以及支持服務器端的Node.js應用程序。 它基於Node.js構建,您可以安裝任何 npm包,運行webpack等等。 它是由一些非常成功的產品開發人員共同打造的,包括Trello和Stack Overflow,所以它在這方面具有很高的可信度。 我為什麼認為Glitch很棒呢? Glitch在如何呈現自己的方面“打動了”我,它介面有趣,但又不簡化。 您可以訪問日誌,控制台和許多內部內容。 此外,接口中非常突出的重新混音的概念使我更有可能在那裡創建許多項目,因為我永遠不需要從一個空白項目開始。 您可以開始直接進入代碼,而無需花時間設置環境、版本控制等等,並專注於您的想法,並獲得自動HTTPS URL和用於媒體資源的CDN。 此外,它完全沒有鎖定,只需使用Node.js(或者如果您不使用服務器端Javascript,只需使用HTML,JS和CSS)。 它是免費的嗎? 是的,它是免費的,將來他們可能會在付費計劃上添加更多功能,但他們聲明目前的Glitch將永遠免費。 有合理的限制,例如: 您有128MB的空間(不包括npm包),此外還有512MB的媒體資源空間。 您每小時可以處理4000個請求。 如果5分鐘內不訪問應用程序且應用程序不接收任何HTTP請求,則應用程序將停止,長時間運行的應用程序將在12小時後停止運行。只要有HTTP請求進來,它們就會重新啟動。 Glitch概述 這是Glitch的主頁,它顯示了一些因為很酷而被認為值得展示的項目,以及一些入門項目: 創建帳戶非常簡單,只需點擊“登錄”並選擇Facebook或GitHub作為您的“進入點”(我建議選擇GitHub): 您將被重定向到GitHub以進行授權: 登錄後,主頁也會顯示您的項目: 點擊“您的項目”將帶您轉到您的個人資料頁面,URL中包含您的姓名。我的是https://glitch.com/@flaviocopes。 您可以將項目設為“固定”,以便在有很多項目時更容易找到它們。 重新混音的概念 當您剛開始時,當然沒有自己的項目。 Glitch使得非常容易開始,您從不需要從空白項目開始。您始終是從另一個項目重新混音。 您可以重新混音您喜歡的項目,也可以重新混音您在Twitter上找到的項目或在Glitch主頁上展示的項目,或者您可以從一個作為啟動項目的項目開始: 一個簡單的網頁 Node.js Express應用程序 Node.js控制台 Create-React-App應用程序 Nuxt入門應用程序 這些合集中還有許多其他啟動項目: Hello World項目 構建塊 如果您現在正在學習編碼,那麼Learn to Code Glitch合集非常不錯。 我創建了一些作為我的演示和測試組態應用的啟動應用,它們是: 簡單的HTML + CSS + JS Glitch React + webpack創建的啟動項目 Glitch Glitch使創建自己的構建塊變得非常容易,通過將它們固定在個人資料中,您可以始終將它們保持在頂部,以便更容易找到。 重新混音一個項目 一旦您要開始對一個項目進行修改,您只需點擊它,然後出現一個窗口: 有3個按鈕: 預覽:項目是代碼,代碼應該做一些事情。這將顯示項目的結果。 編輯項目:顯示項目的源代碼,並且您可以開始編輯它 重新混音:將項目克隆為一個新項目 每次重新混音一個項目時,都會創建一個新的項目,並隨機生成一個名稱。 以下是剛創建和重新混音另一個項目後的項目示例: Glitch將其命名為guttural-noodle。點擊名字可以更改它: 您還可以更改描述。...

JavaScript在這十年的發展

回顧過去十年的JavaScript和Web的發展,真是一段驚心動魄的旅程。 儘管我書架上有一些1998年的JS書籍,但2010年時我並沒有寫很多JavaScript。當時我主要使用Mootools和jQuery插件。可能有些JS代碼是我寫的,但並沒有什麼突破性的創新。 那時的JavaScript絕對不被視為熱門語言。它的主要用途是在像GMail、Google Maps等有大量預算的項目中進行一些高級工作。 對於大多數人來說,用JavaScript編寫整個應用程序的概念當然是陌生的。 快進到2019年12月31日,JavaScript可真是太普遍了。 JavaScript無所不在。在過去的10年中,它經歷了多次更新,包括一個主要更新(ES6),如今我們寫JavaScript的方式與2010年完全不同。 異步和等待、箭頭函數、Promises、生成器、const/let、類、模板字面量等,肯定使現代JavaScript看起來和行為也非常不同。 ES模塊使大型應用程式更易於撰寫和維護。 但這不僅僅是語法和語言的新特性改變了。 我認為,這十年最大的變化之一就是構建工具的引入和廣泛使用。從Grunt到Gulp再到Webpack、Parcel和Rollup,工具的發展如此迅速,作為開發者,我們每天都有越來越大的能力。 模塊打包器為我們提供了非常高級的功能,如樹搖篩檢。了解這些技術是如何從早期發展至今真是令人驚嘆。 我們要提到Node.js嗎?從技術上講,Node在2009年春季首次推出,所以並不屬於這個十年。但可以肯定的是,Node第一年並沒有取得很大的突破,但在這十年中卻取得了巨大的成功。 現在讓我們來談談瀏覽器。2010年1月的IE版本是8,其佔有率超過50%並且Edge還不存在。Chrome作為一歲的瀏覽器佔有率僅為5%,因為1.0版本是在2008年12月發布的。你能想像嗎?如今Chrome是最受歡迎的瀏覽器,遠超其他瀏覽器。據我所知,64%的互聯網使用Chrome,而Safari佔有16%。 說到Safari,在2010年1月,iPhone 3GS已經推出(我當時沒有,我還用著Nokia。我第一部iPhone是在那一年晚些時候推出的iPhone 4)。那時JavaScript在該設備上執行速度可能不會很快。但如今移動瀏覽器可以以閃電般的速度執行JavaScript,並且JavaScript被用於使用Cordova、Ionic、React Native等令人驚嘆的框架來構建移動應用程序。 npm於2010年1月推出,它的崛起可謂驚人。起初它只是一個Node.js模塊的包管理器,如今npm也成為了前端開發的事實標準。它在去年6月份超過了一百萬個包,我敢肯定它是世界上最大的軟件目錄。 順帶一提,GitHub在2010年1月剛剛存在1年半的時間。看看它當時的樣子真是有趣。 在這十年中,許多驚人的項目應運而生。我可以提到Ember.js、CoffeeScript、Angular、React,只舉幾個例子。 我有幸參與並加入了許多不同的社區,而JavaScript和整個生態系統之所以在這十年中發展如此迅速,是因為工作在其中的人們。 憑著熱情、勤奮、承諾和慷慨精神,開源社區以及成百上千的充滿企圖心的公司,使JavaScript這個開發世界的一角成為今天的模樣。 回顧過去,看到我們走了多遠真是令人愉悅。 我真的無法想像這個未來十年會帶給我們什麼。

Johnny Five:從設備接收輸入

本文是 Johnny Five 系列的一部分。 請參閱第一篇文章。 在本文中,我將使用 Johnny Five 從電子設備獲取信息。 具體而言,我想使用水位傳感器來判斷咖啡的剩餘量,以便在程序設計師的工作中,當咖啡不足時能重新加滿杯子。 這是傳感器的圖片: 我們將連接一個小電路以獲取此數據,並使用 Johnny Five 將此數據傳送到我們的 Node.js 應用程序中。 該傳感器有 3 根引腳。一個是 GND(0V),一個是 VCC(5V),另一個是類比數據輸出。 將標記為 - 的引腳連接到 GND,+ 連接到 5V,並將 S 連接到類比引腳 A0。 這是電路圖: 現在,我們創建一個名為 sensor.js 的文件,內容如下: const { Board, Sensor } = require("johnny-five") const board = new Board() board.on("ready", () => { const sensor = new Sensor("A0") sensor.on("change", function () { console.log(this.value) }) }) 每當通過傳感器傳來的數據變化時,我們將在控制台上看到打印出來: 我在 sensor 對象上使用了 on() 方法來監視所有更改。...

Linux指令:env

一個快速指南,介紹如何使用env指令運行指令並與環境變量進行互動。 env指令可用於傳遞環境變量,而無需在外部環境(即當前shell)中設置它們。 假設您想要運行一個Node.js應用程序並將USER變量設置給它。您可以運行以下命令: env USER=flavio node app.js 這樣,Node.js應用程序可以通過Node的process.env接口訪問USER環境變量。 您還可以運行清除所有已經設置的環境變量的命令,使用-i選項: env -i node app.js 在這種情況下,您將收到一個錯誤,顯示env: node: No such file or directory,這是因為命令node無法被訪問,因為外殼使用的PATH變量未設置,用於在常用路徑中查找命令。 因此,您需要傳遞到node程序的完整路徑: env -i /usr/local/bin/node app.js 嘗試使用一個擁有以下內容的簡單的app.js文件: console.log(process.env.NAME) console.log(process.env.PATH) 您將看到輸出結果為: undefined undefined 您可以傳遞一個環境變量: env -i NAME=flavio node app.js 輸出結果將是: flavio undefined 刪除-i選項將使PATH在程式內再次可用: 如果不帶任何選項運行env指令,則可以打印出所有環境變量: env 它將返回一個已設置的環境變量列表,例如: HOME=/Users/flavio LOGNAME=flavio PATH=/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin PWD=/Users/flavio SHELL=/usr/local/bin/fish 您還可以使用-u選項在運行的程式內讓某個變量無法訪問,例如以下代碼會從命令環境中刪除HOME變量: env -u HOME node app.js env指令可在Linux、macOS、WSL以及任何具有UNIX環境的地方使用。

Node fs 模塊

Node.js 的 fs 模塊提供了與文件系統進行交互的功能。 無需安裝,作為 Node 核心的一部分,可以通過 require 來使用: const fs = require('fs') 一旦這樣做了,你就可以訪問它的所有方法,包括: fs.access():檢查文件是否存在,以及 Node 是否可以使用權限訪問該文件。 fs.appendFile():將數據追加到文件中。如果文件不存在,則會創建新的文件。 fs.chmod():更改指定文件的許可權。相關方法有:fs.lchmod(),fs.fchmod() fs.chown():更改指定文件的所有者和群組。相關方法有:fs.fchown(),fs.lchown() fs.close():關閉文件描述符 fs.copyFile():複製文件 fs.createReadStream():創建可讀的文件流 fs.createWriteStream():創建可寫的文件流 fs.link():在文件中創建一個新的硬連接 fs.mkdir():創建一個新的文件夾 fs.mkdtemp():創建一個臨時目錄 fs.open():設置文件模式 fs.readdir():讀取目錄的內容 fs.readFile():讀取文件的內容。相關方法有:fs.read() fs.readlink():讀取符號鏈接的值 fs.realpath():將相對文件路徑指針解析為完整路徑(.,..) fs.rename() :重命名文件或文件夾 fs.rmdir():刪除文件夾 fs.stat():返回文件的狀態。相關方法有:fs.fstat(),fs.lstat() fs.symlink():創建新的符號鏈接 fs.truncate():將指定文件截斷到指定長度。相關方法有:fs.ftruncate() fs.unlink():刪除文件或符號鏈接 fs.unwatchFile():停止監聽文件的變化 fs.utimes():更改文件的時間戳記。相關方法有:fs.futimes() fs.watchFile():開始監聽文件的變化。相關方法有:fs.watch() fs.writeFile():將數據寫入文件。相關方法有:fs.write() 關於 fs 模塊的一個特點是,所有的方法默認都是異步的,但是也可以同步地進行操作,只需在方法名後面添加 Sync。 例如: fs.rename() fs.renameSync() fs.write() fs.writeSync() 這對應用程序的流程有很大的影響。 Node 10 包括對基於 promise 的 API 的實驗性支援。 舉個例子,讓我們來看看 fs.rename() 方法。使用回調函數來使用異步 API: const fs = require('fs') fs.rename('before.json', 'after.json', (err) => { if (err) { return console....

Node 檔案統計

如何使用 Node 獲取檔案的詳細資訊 每個檔案都有一組我們可以使用 Node 檢視的詳細資訊。 特別是使用 fs 模組提供的 stat() 方法。 您可以呼叫它並傳遞檔案路徑,一旦 Node 獲取了檔案詳細資訊,它將調用您傳遞的回調函數,該函數帶有2個參數:錯誤訊息和檔案統計資訊: const fs = require('fs') fs.stat('/Users/flavio/test.txt', (err, stats) => { if (err) { console.error(err) return } //我們可以在 `stats` 中存取檔案統計資訊 }) Node還提供了一個同步方法,它會阻塞線程,直到檔案統計資訊準備好: const fs = require('fs') try { const stats = fs.statSync('/Users/flavio/test.txt') } catch (err) { console.error(err) } 檔案資訊存儲在 stats 變數中。我們可以使用 stats 提取哪些類型的資訊? 有很多,包括: 使用 stats.isFile() 和 stats.isDirectory() 判斷檔案是目錄還是檔案 使用 stats.isSymbolicLink() 判斷檔案是否為符號連結 使用 stats.size 獲取檔案大小(以位元組為單位) 還有其他高級方法,但在日常編程中,您將主要使用上述方法。 const fs = require('fs') fs....

node-mass-rename-files

#如何在Node.js中批量更名文件 了解如何使用Node.js更改一组文件名 在本篇博客文章中,我将解释如何更改一组文件的名称。 相同的过程也适用于将文件移动到另一个文件夹,因为在更改名称时,实际上是更改文件的路径。 进行此任务的动机是:在Hugo中,我们可以将博客文章编写为文件,如下所示: first-post.md second-post.md third-post.md 我们还可以将它们添加到包含 index.md 文件的文件夹中: first-post/ > index.md second-post/ > index.md third-post/ > index.md 不同之处在于,使用文件夹可以更轻松地添加图片并将其与博客文章关联起来。 我本可以手动进行更改,但这个文件夹中有大约50个文件,我真的不想自己动手。 我希望能够自动进行更改。 让我们首先引入我们将使用的一个核心模块:fs。由于它是一个核心模块,所以无需进行 npm install。 const fs = require('fs') 然后,获取对当前文件夹的引用。假设我们要在想要执行此更改的同一文件夹中运行脚本。 __dirname 是指向当前工作文件夹的变量。 我获取了所有文件和文件夹的列表: const files = fs.readdirSync(__dirname) 然后,我仅筛选出以 .md 结束的项: for (const file of files) { if (file.endsWith('.md')) { console.log(file) } } 一旦我们有了代表文件名的 file 引用,我们就可以调用 fs.mkdirSync() 来创建文件夹: fs.mkdirSync( __dirname + '/' + file.replace('.md', ''), { recursive: true }, (err) => { console....

Node:接收命令行参数

如何在Node.js程序中从命令行接收参数 在调用Node.js应用程序时,您可以传递任意数量的参数 node app.js 参数可以是独立的,也可以由键和值组成。 例如: node app.js flavio 或者 node app.js name=flavio 这会影响您在Node代码中如何检索这个值。 要检索它,可以使用Node内置的process对象。 它暴露了一个argv属性,它是一个包含所有命令行参数的数组。 第一个参数是node命令的完整路径。 第二个元素是正在执行的文件的完整路径。 所有其他参数从第三个位置开始存在。 您可以使用循环遍历所有参数(包括节点路径和文件路径): process.argv.forEach((val, index) => { console.log(`${index}: ${val}`) }) 通过创建一个新数组来排除前两个参数,您可以仅获取其他参数: const args = process.argv.slice(2) 如果有一个没有索引名称的参数,像这样: node app.js flavio 您可以使用以下方式访问它: const args = process.argv.slice(2) args[0] 在这种情况下: node app.js name=flavio args[0]是name=flavio,您需要解析它。 最好的方法是使用minimist库,它有助于处理参数: const args = require('minimist')(process.argv.slice(2)) args['name'] // flavio

Node.js 核心模塊

Node.js 提供了一系列的核心模塊,這些模塊是 Node.js 平臺的一部分,並與 Node.js 安裝一同提供。 以下是其中一些模塊的詳細資訊: 名稱 描述 assert 提供一組有用於測試的斷言函數 buffer 提供處理包含二進制數據的緩衝區的能力 child_process 提供生成子進程的能力 console 提供簡單的調試控制台 cluster 允許將一個 Node.js 進程分為多個工作進程,以充分利用多核系統 crypto 提供加密功能 dgram 提供 UDP 數據報插座的實現 dns 提供名稱解析和 DNS 查詢 events 提供管理事件的 API fs 提供與文件系統交互的 API http 提供 HTTP 客戶端/服務器的實現 http2 提供 HTTP/2 客戶端/服務器的實現 https 提供 HTTPS 客戶端/服務器的實現 net 提供異步網絡 API os 提供與操作系統相關的實用方法和屬性 path 提供處理文件和目錄路徑的實用工具 perf_hooks 用於啟用性能指標的收集 process 提供關於當前 Node.js 進程的信息和控制 querystring 提供解析和格式化 URL 查詢字符串的實用工具 readline 提供從可讀流中讀取數據的界面 repl 提供獨立程序或可包含在其他應用中的 REPL(Read-Eval-Print-Loop)實現 stream 用於處理流式數據的抽象接口 string_decoder 提供將緩衝區對象解碼為字符串的 API timers 提供調度在未來某個時間點調用函數的功能 tls 提供 Transport Layer Security(TLS)和 Secure Socket Layer(SSL)協議的實現 tty 提供在文本終端中進行 I/O 操作的功能 url 提供 URL 解析和解析的實用工具 util 支持 Node....