(ビルド) ツールを使用しない Web 開発-jsチュートリアル-php.cn

(ビルド) ツールを使用しない Web 開発

WBOY

リリース： 2024-08-05 19:11:22

オリジナル

1091 人が閲覧しました

Web Development Without (Build) Tooling

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 サイトの他の関連記事を参照してください。