(ビルド) ツールを使用しない 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 ガイドを参照してください。
パッケージ
おそらく車輪の再発明はしたくないでしょう。そのため、プロジェクトではサードパーティのパッケージを使用することになるでしょう。だからといって、今すぐパッケージ マネージャーを使い始める必要があるというわけではありません。
データ検証に superstruct を使用するとします。独自の (ローカル) ファイル サーバーだけでなく、任意の URL からモジュールをロードすることもできます。 esm.sh は、npm で利用可能なほぼすべてのパッケージのモジュールを便利に提供します。
https://esm.sh/superstruct にアクセスすると、最新バージョンにリダイレクトされることがわかります。このパッケージは次のようにコードに含めることができます:
import { assert } from "https://esm.sh/superstruct";
安全を確保したい場合は、バージョンを固定できます。
種類
あなたはどうか知りませんが、TypeScript は私を台無しにしました (そして怠惰にさせました)。型チェッカーの助けを借りずにプレーンな JavaScript を書くのは、綱渡りのように感じます。幸いなことに、型チェックを省略する必要もありません。
npm をバストアウトする時期が来ました (ただし、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 チームは、今後の TypeScript リリースなどで、JSDoc + TypeScript に優れた機能を追加し続けています。オートコンプリートは VS Code でもうまく機能します。
マップをインポートする
ビルドツールを使わずに外部パッケージをプロジェクトに追加する方法を学びました。ただし、コードを多数のモジュールに分割する場合、完全な URL を何度も書き出すのは少し冗長になる可能性があります。
index.html の head セクションにインポート マップを追加できます。
<script type="importmap">
{
"imports": {
"superstruct": "https://esm.sh/superstruct@1.0.4"
}
}
</script>
これで、
を使用してこのパッケージをインポートできます。
import {} from "superstruct"
「通常の」プロジェクトのようなもの。もう 1 つの利点は、パッケージをローカルにインストールすると、型の補完と認識が期待どおりに機能することです。
npm install --save-dev superstruct
node_modules ディレクトリ内のバージョンは使用されないことに注意してください。これを削除しても、プロジェクトは引き続き実行されます。
私がよく使うトリックは次のように追加することです:
"cdn/": "https://esm.sh/",
import Peer from "cdn/peerjs";
"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 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1667
14
1426
52
1328
25
1273
29
1255
24
JavaScriptエンジン：実装の比較
Apr 13, 2025 am 12:05 AM
さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。
Python vs. JavaScript：学習曲線と使いやすさ
Apr 16, 2025 am 12:12 AM
Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。
C/CからJavaScriptへ：すべてがどのように機能するか
Apr 14, 2025 am 12:05 AM
C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。
JavaScriptとWeb：コア機能とユースケース
Apr 18, 2025 am 12:19 AM
Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。
JavaScript in Action：実際の例とプロジェクト
Apr 19, 2025 am 12:13 AM
現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。
JavaScriptエンジンの理解：実装の詳細
Apr 17, 2025 am 12:05 AM
JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。
Python vs. JavaScript：コミュニティ、ライブラリ、リソース
Apr 15, 2025 am 12:16 AM
PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。
Python vs. JavaScript：開発環境とツール
Apr 26, 2025 am 12:09 AM
開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。
