ホームページ > 記事 > ウェブフロントエンド > (ビルド) ツールを使用しない Web 開発
(ビルド) ツールを使用しない Web 開発
- WBOYオリジナル
- 2024-08-05 19:11:221093ブラウズ
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/",インポートマップへ。その後、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 中国語 Web サイトの他の関連記事を参照してください。