無需（建置）工具的 Web 開發
當啟動一個將使用 JavaScript 的新 Web 專案時，我們做的第一件事通常是設定建置和開發人員工具。例如最近很紅的Vite。您可能不知道並非所有 JavaScript（Web）專案都需要複雜的建置工具。事實上，正如我將在本文中展示的那樣，現在比以往任何時候都更容易擺脫困境。
使用index.html 檔案建立一個新專案。
<!doctype html>
<html>
<head>
</head>
<body>
<p>Hello world</p>
</body>
</html>
如果您使用的是 VS Code，請安裝即時預覽擴充。運行它。這是一個具有即時重新載入功能的簡單檔案伺服器。您可以使用任何檔案伺服器，Python 內建了一個：
python3 -m http.server
我喜歡即時預覽，因為它會在更改文件後自動刷新頁面。
您現在應該能夠從瀏覽器存取您的index.html 檔案並看到“Hello world”。
接下來，建立一個index.js檔：
console.log("Hello world");
export {};
將其包含在您的index.html中：
<script type="module" src="./index.js"></script>
在瀏覽器中開啟開發者控制台。如果您看到“Hello world”，則表示它正在正確載入。
瀏覽器現在支援 ECMAScript 模組。您可以匯入其他檔案以消除其副作用：
import "./some-other-script.js";
或用於出口
import { add, multiply } "./my-math-lib.js";
很酷吧？請參閱上面的 MDN 指南以了解更多資訊。
套餐
您可能不想重新發明輪子，因此您的專案可能會使用一些第三方套件。這並不意味著您現在需要開始使用套件管理器。
假設我們想使用超級結構進行資料驗證。我們不僅可以從我們自己的（本地）檔案伺服器載入模組，還可以從任何 URL 載入模組。 esm.sh 方便地為 npm 上可用的幾乎所有套件提供模組。
當您造訪 https://esm.sh/superstruct 時，您可以看到您被重新導向到最新版本。您可以在程式碼中包含此包，如下所示：
import { assert } from "https://esm.sh/superstruct";
如果您想安全起見，您可以固定版本。
類型
我不了解你，但 TypeScript 寵壞了我（並且讓我變得懶惰）。在沒有類型檢查器幫助的情況下編寫純 JavaScript 感覺就像走鋼索一樣。幸運的是，我們也不必放棄類型檢查。
是時候淘汰 npm 了（儘管我們不會發布它提供的任何程式碼）。
npm init --yes npm install typescript
您可以在 JavaScript 程式碼上使用 TypeScript 編譯器！對此有一流的支援。建立 jsconfig.json:
{
"compilerOptions": {
"strict": true,
"checkJs": true,
"allowJs": true,
"noImplicitAny": true,
"lib": ["ES2022", "DOM"],
"module": "ES2022",
"target": "ES2022"
},
"include": ["**/*.js"],
"exclude": ["node_modules"]
}
現在運行
npm run tsc --watch -p jsconfig.json
並在程式碼中出現類型錯誤。 TypeScript 編譯器應該要抱怨：
/** @type {number} **/
const num = "hello";
順便說一下，你上面看到的評論是 JSDoc。您可以透過這種方式用類型註解您的 JavaScript。雖然它比使用 TypeScript 更冗長一些，但你很快就會習慣它。它也非常強大，只要您不編寫瘋狂的類型（對於大多數項目來說您不應該這樣做），您應該沒問題。
如果您確實需要複雜的類型（助手），您可以隨時在 .d.ts 檔案中新增一些 TypeScript。
JSDoc 是否只是那些陷入大型 JavaScript 專案的人們能夠逐步遷移到 TypeScript 的墊腳石？我不這麼認為！ TypeScript 團隊也持續在 JSDoc + TypeScript 中加入出色的功能，例如即將發布的 TypeScript 版本。自動完成功能在 VS Code 中也非常有效。
導入地圖
我們學習瞭如何在不使用建置工具的情況下將外部套件新增到我們的專案中。但是，如果您將程式碼拆分為許多模組，則一遍又一遍地寫出完整的 URL 可能會有點冗長。
我們可以將導入映射新增到我們的index.html的head部分：
<script type="importmap">
{
"imports": {
"superstruct": "https://esm.sh/superstruct@1.0.4"
}
}
</script>
現在我們可以簡單地使用
導入這個包
import {} from "superstruct"
就像一個「正常」項目。另一個好處是，如果您在本地安裝該軟體包，類型的完成和識別將按預期工作。
npm install --save-dev superstruct
請注意，node_modules 目錄中的版本將不會被使用。您可以將其刪除，您的專案將繼續運行。
我喜歡使用的一個技巧是添加：
"cdn/": "https://esm.sh/",
到我的導入地圖。然後，透過 esm.sh 提供的任何項目都可以透過簡單地匯入來使用。例如：
import Peer from "cdn/peerjs";
如果您也想從node_modules中提取類型以進行此類導入的開發，則需要將以下內容添加到jsconfig.json的compilerOptions中：
"paths": {
"cdn/*": ["./node_modules/*", "./node_modules/@types/*"]
},
部署
要部署您的項目，請將所有檔案複製到靜態檔案主機，然後就完成了！如果您曾經參與過舊版 JavaScript 項目，您就會知道更新不到 1-2 年的建置工具的痛苦。透過此項目設置，您將不會遭受同樣的命運。
Testing
If your JavaScript does not depend on browser APIs, you could just use the test runner that comes bundled with Node.js. But why not write your own test runner that runs right in the browser?
/** @type {[string, () => Promise<void> | void][]} */
const tests = [];
/**
*
* @param {string} description
* @param {() => Promise<void> | void} testFunc
*/
export async function test(description, testFunc) {
tests.push([description, testFunc]);
}
export async function runAllTests() {
const main = document.querySelector("main");
if (!(main instanceof HTMLElement)) throw new Error();
main.innerHTML = "";
for (const [description, testFunc] of tests) {
const newSpan = document.createElement("p");
try {
await testFunc();
newSpan.textContent = `✅ ${description}`;
} catch (err) {
const errorMessage =
err instanceof Error && err.message ? ` - ${err.message}` : "";
newSpan.textContent = `❌ ${description}${errorMessage}`;
}
main.appendChild(newSpan);
}
}
/**
* @param {any} val
*/
export function assert(val, message = "") {
if (!val) throw new Error(message);
}
Now create a file example.test.js.
import { test, assert } from "@/test.js";
test("1+1", () => {
assert(1 + 1 === 2);
});
And a file where you import all your tests:
import "./example.test.js";
console.log("This should only show up when running tests");
Run this on page load:
await import("@/test/index.js"); // file that imports all tests
(await import("@/test.js")).runAllTests();
And you got a perfect TDD setup. To run only a section of the tests you can comment out a few .test.js import, but test execution speed should only start to become a problem when you have accumulated a lot of tests.
Benefits
Why would you do this? Well, using fewer layers of abstraction makes your project easier to debug. There is also the credo to "use the platform". The skills you learn will transfer better to other projects. Another advantage is, when you return to a project built like this in 10 years, it will still just work and you don't need to do archeology to try to revive a build tool that has been defunct for 8 years. An experience many web developers that worked on legacy projects will be familiar with.
See plainvanillaweb.com for some more ideas.
以上是無需（建置）工具的 Web 開發的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Python vs. JavaScript：學習曲線和易用性
Apr 16, 2025 am 12:12 AM
Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。
JavaScript和Web：核心功能和用例
Apr 18, 2025 am 12:19 AM
JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。
JavaScript在行動中：現實世界中的示例和項目
Apr 19, 2025 am 12:13 AM
JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。
了解JavaScript引擎：實施詳細信息
Apr 17, 2025 am 12:05 AM
理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。
Python vs. JavaScript：開發環境和工具
Apr 26, 2025 am 12:09 AM
Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。
C/C在JavaScript口譯員和編譯器中的作用
Apr 20, 2025 am 12:01 AM
C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。1）C 用于解析JavaScript源码并生成抽象语法树。2）C 负责生成和执行字节码。3）C 实现JIT编译器，在运行时优化和编译热点代码，显著提高JavaScript的执行效率。
從網站到應用程序：JavaScript的不同應用
Apr 22, 2025 am 12:02 AM
JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。
Python vs. JavaScript：比較用例和應用程序
Apr 21, 2025 am 12:01 AM
Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。
