Koa を使用して Node.js を通じてプロジェクトを構築する

現在、多くのフロントエンド エンジニアは、NodeJ や Express フレームワークや Koa フレームワークなどの新しいテクノロジーにさらに注目を集めています。最近はあまり自由な時間が取れないので、正式に旧正月が到来する前のこの自由時間を利用して、旧正月に参加し、その秘密を垣間見ることができました。

KoaはExpressのオリジナルチームが作成した超軽量のサーバーサイドフレームワークです

Expressと比べて自由度が高く、ミドルウェアを自分で導入できることに加え、ES6+を採用しているのが特徴です非同期なので、コールバック地獄を回避できます

しかし、コードのアップグレードも原因であるため、Koa2 には v7.60 以降の Node.js 環境が必要です

プロジェクトを作成します

プロジェクト ディレクトリを手動で作成し、すぐにパッケージを生成します.json ファイル

npm init -y

koa をインストール //現在のバージョンは 2.4.1 です

npm install koa -S

次に app.js を作成します

// app.js

const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
 ctx.body = 'Wise Wrong';
});

app.listen(3000);

最後に package.json に起動コマンドを追加します

最も基本的な koa アプリケーションが完成しますこのように

npm start を実行し、ブラウザで http://localhost:3000/ にアクセスして効果を確認できます

プロジェクトを手動で作成するのが面倒だと感じる場合は、スキャフォールディング koa- を使用できます。 Generato でプロジェクトを生成します

npm install koa-generator -g

koa2 project_name

次に、プロジェクトの下に npm install して依存関係をインストールし、npm start でプロジェクトを開始します

koa を初めて使用する場合は、最初にこのブログを読んでからスキャフォールディング ツールを使用することをお勧めします。各依存パッケージの役割をよりよく理解できます

2 番目に、ルーティングを設定します

ctx の上の app.js に 1 つあり、Koa によって提供される Context オブジェクトで、リクエストとレスポンスをカプセル化します

すべての HTTP リクエストは Context を作成しますobject

Context.request.path を通じてユーザーリクエストのパスを取得し、Context.response を通してコンテンツをユーザーに送信します

HTML を返したい場合、Koa のデフォルトの戻り値の型は text/plain です。ファイル (またはモジュール ファイル) を変更するには、Context.response.type を変更する必要があります

さらに、Context.response.type は Context.type と省略され、Context.response.body のように、Context.response は省略できます。 Context.typeと略されます

プロジェクト直下にHTMLファイルを格納するディレクトリviewsを作成し、そのディレクトリ内にindex.htmlを作成し、app.jsを修正

// app.js// 原生路由

const Koa = require('koa');
const fs = require('fs');
const app = new Koa();

app.use(async (ctx, next) => {
 if (ctx.request.path === '/index') {
 ctx.type = 'text/html';
 ctx.body = fs.createReadStream('./views/index.html');
 } else {
 await next();
 }
});

app.listen(3000);

してhttp://localhost:3000/indexにアクセスしますブラウザにアクセスすると、index.html ページが表示されますが、他のアドレスにアクセスすると見つかりません

このように URL を扱うのは非常に不器用なようですので、ルーティングミドルウェア koa-router を導入する必要があります

npm install koa-router -S

koa-router をインポートするときは、最後に括弧を追加する必要があります:

const router = require('koa-router')();

以下と同等:

const koaRouter = require('koa-router');
const router = koaRouter();

ルーティング ファイルを保存するルート ディレクトリを作成し、そのディレクトリにindex.jsを作成します

// routes/index.js

const fs = require('fs');
const router = require('koa-router')()

router.get('/index', async (ctx, next) => {
 ctx.type = 'text/html';
 ctx.body = fs.createReadStream('./views/index.html');
});

module.exports = router

ここで prefix メソッドを使用して、ファイル内のすべてのインターフェイスに BaseUrl を追加することもできます

// router.prefix('/about')

app.js を変更する

// app.js

const Koa = require('koa');
const app = new Koa();

const index = require('./routes/index')
app.use(index.routes(), index.allowedMethods())

app.listen(3000);

上記の allowedMethods は、リクエスト メソッドを検証するために使用されます。投稿リクエストを使用して get インターフェースにアクセスすると、直接失敗が返されます

さらに、URL に変数を追加して、静的リソース

3 を介してアクセスすることもできます。上記のindex.htmlに、CSSなどの静的リソースを導入する必要がある場合は、koa-staticを使用する必要があります

router.get('/about/:name', async (ctx, next) => {
 ctx.body = `I am ${ctx.params.name}!`;
});

静的リソースを格納するディレクトリpublicを作成します

そして、app.jsに追加する以下のコード

npm install koa-static -S

実際、これらの 3 行のコードも最適化できます

const static = require('koa-static');
// 将 public 目录设置为静态资源目录
const main = static(__dirname + '/public');
app.use(main);

その後、対応するファイルをindex.html に導入できます

4. テンプレート エンジン

上記のルーティングは fs モジュールを直接使用します html を読み込みますファイル

開発するときは、koa-views ミドルウェアを使用してページをレンダリングすることをお勧めします

app.use(require('koa-static')(__dirname + '/public'));

app.js でビュー ディレクトリをテンプレート ディレクトリとして設定します

npm install koa-views -S

その後、ルーティング ファイルで render メソッドを使用できます

const views = require('koa-views')
app.use(views(__dirname + '/views'));

上記は、HTMLファイルを直接レンダリングする方法です。テンプレートエンジンを導入したい場合は、拡張子フィールドを追加してテンプレートタイプを設定できます

結論

Expressをウェブストームとみなす場合は、Koaです。 Express は崇高です

Express が普及したとき、その複雑な依存関係が多くの開発者によって批判されました

そこで、Express チームは Express を最も基本的な骨格まで分解し、開発者が自分で組み立てられるようにしました

。

記事にも書きましたが、最初から始めるのは面倒すぎるので、スキャフォールディング koa-generato を使用するとすぐに開発できます

しかし、Koa に慣れてから、自分のプロジェクトに適したスキャフォールディングを構築することをお勧めします

以上です。私があなたのためにまとめたもの はい、今後皆さんのお役に立てれば幸いです。

関連記事:

expressとkoaの使い方の比較(詳細チュートリアル)

vueで初めてのスタイラスインストール方法の使い方(詳細チュートリアル)

Vueフレームワークでの関連グッズコンポーネント開発

以上がKoa を使用して Node.js を通じてプロジェクトを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。