Expressを使用してプロジェクトを自動的にビルドするNode.jsのプロセス全体

Expressを使用してプロジェクトを自動的にビルドするNode.jsのプロセス全体

1. Expressライブラリとジェネレータをインストールする

cmdを開いて、次のコマンドを入力します: yarn global add express express-generator

説明する:
上記の 2 つのモジュールは、それぞれライブラリとジェネレーターを表しています。express3 では、express をインストールするとジェネレーター express-generator が自動的にインストールされますが、express4 ではそれらが分離されているため、個別にインストールする必要があります。

インストール後、コマンド express --version を使用してインストールが成功したかどうかを確認できます。

バージョン番号が表示されたらインストールは成功です(下の図を参照)。

2.エクスプレスジェネレーターはエクスプレスプロジェクトを自動的に作成します

コマンドを入力します: express nodejs (以下のように成功します)

成功後のディレクトリ:

3. package.jsonディレクトリに移動して関連パッケージをインストールします。

コマンドを入力します: yarn または cnpm i または npm i

4. プロジェクトを開始する

コマンドを入力してください: npm run start

ブラウザを開いて127.0.0.1:3000にアクセスし、プロジェクトにアクセスします。

V. プロジェクトカタログの説明

bin: 実行可能ファイルを保存する
public: js、css、img などのファイルを保存します
ルーター: ルーティングファイルを保存します
ビュー: ビューファイルまたはテンプレートファイルを保存する
app.js: 起動ファイル(エントリファイル)
package.json: プロジェクト情報とモジュールの依存関係を保存します。依存関係に依存モジュールを追加して npm install を実行すると、npm は現在のディレクトリの package.json をチェックし、指定されたすべてのモジュールを自動的にインストールします。
node_modules: package.json にインストールされたモジュールを保存します。依存モジュールを package.json に追加してインストールすると、このフォルダーに保存されます。

参考リンク: https://www.jb51.net/article/209247.htm

6. このプロジェクトでの開発方法

まず、ルートに新しいtest.jsファイルを作成します。

var express = require('express');
var ルーター = express.Router();

router.get('/', 関数(req, res, next) {
	res.send('私はインターフェースの戻り値です');
});

モジュール.exports = ルーター;

次にapp.jsに次のコードを追加します。

var testRouter = require('./routes/test');
app.use('/test', testRouter);

次にブラウザコンソールを開き、fetchを使用して先ほど作成したインターフェースをリクエストします。

フェッチ('http:localhost:3000/test')
.then(res=>{
  res.text() を返す
}).then(res=>{
  コンソール.log(res)
})

クロスドメインの問題があることがわかりました。これは、Node.js にクロスドメインを追加しなかったために発生しました。

app.jsに次のクロスドメインコードを追加します。

//クロスドメインアクセスを設定する(すべてのリクエストの前に設定する)
app.all("*", 関数(req, res, next) {
	// ドメイン間を移動できるドメイン名を設定します。* は、任意のドメイン名がドメイン間を移動できることを表します。res.header("Access-Control-Allow-Origin", "*");
	// 許可されるヘッダー タイプ res.header("Access-Control-Allow-Headers", "content-type");
	//クロスドメインで許可されるリクエストメソッド res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
	if (req.method == 'OPTIONS')
		res.sendStatus(200); //オプションでクイック終了を要求します。
		次();
});

その後、プロジェクトを再起動して通常通りアクセスできるようにします。

プロジェクトの内容を変更すると、プロジェクトを手動で再起動する必要があり、少し面倒です。この問題は、プラグインをインストールすることで解決できます。

7. nodemonを使用してサービスを自動的に再起動する

nodemonモジュールをインストールする

コマンドを入力します: npm i nodemon -S

nodemon.jsonファイルを作成する

プロジェクトのルート ディレクトリに nodemon.json ファイルを作成します。

{
	"再起動可能": "rs",
	"無視": [".git", ".svn", "node_modules/**/node_modules"],
	「詳細」:true、
	"実行マップ": {
		"js": "ノード --harmony"
	},
	"時計": []、
	"env": {
		"NODE_ENV": "開発"
	},
	"ext": "js json njk css js"
}

nodemonモジュールの使用

package.jsonファイルにスクリプトコードの行を追加します

"dev": "nodemon ./bin/www"

コードは私の github リポジトリに配置されています。リンクは github.com/wuguanfei/n… に添付されています。

要約する

これで、node.js と express を使用してプロジェクトを自動的にビルドする方法についての記事は終了です。node.js express を使用してプロジェクトを自動的にビルドする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Node koa2 ssr プロジェクト構築手順
  • Alibaba Cloud での Node.js プロジェクトの簡単なデプロイ
  • クラウド サーバーに Node.js プロジェクトをデプロイする方法 (初心者向けシリーズ)
  • ノードでVueプロジェクトを作成する詳細な手順
  • プロジェクトエンジニアリングの自動初期化の標準プロセスを実現するノードコマンドラインツール
  • Node.js プロジェクト内のすべての空のフォルダーに gitkeep を作成する方法
  • vueSSR プロジェクトを 0 から 1 にビルドする: ノードと vue-cli3 の構成
  • PHPStormでNode.jsプロジェクトをユニットテストする方法
  • pm2 を使用してノード プロジェクトを自動的にデプロイする方法
  • node.js が大規模プロジェクトに適さない理由

<<:  MySqlは、外部ネットワーク接続クライアントの低速問題を解決するためにskip-name-resolveを使用します。

>>:  Dockerコンテナのログ処理の詳細な説明

推薦する

Dockerをクリーンアンインストールする方法の詳細な説明

まず、サーバー環境情報: アンインストールの理由:しばらくするとホストマシンのディスクが100%にな...

Win10+Ubuntu 20.04 LTS デュアル システム インストール (UEFI + GPT) (画像とテキスト、複数の画像には注意)

Win10 のインストール (すでにインストールされている場合はスキップしてください) win10...

均一なアニメーション効果を実現するJavaScript

この記事の例では、JavaScriptで等速アニメーションを実装するための具体的なコードを参考までに...

JavaScriptはキャンバスを使用して座標と線を描画します

この記事では、JavaScriptでキャンバスを使用して座標と線を描く具体的なコードを参考までに紹介...

IE6/7 は混乱するだろう: 空のテキスト ノードの高さの問題

序文: ietester でドキュメント コードを表示するには、debugbar を使用します。すべ...

ウェブページのカラーマッチング例分析: 緑色のカラーマッチングウェブページ分析

<br />緑は黄色と青(寒色と暖色)の中間の色で、より穏やかな色です。そのため、緑は最...

Mac に MySQL データベースをインストールし、環境変数を設定するためのグラフィック チュートリアル

目次MySQLをインストールする環境変数の設定MySQLをインストールするmysqlをダウンロードし...

vue.js ルーターのネストされたルートの実例

目次序文Vue CLI での設定基本コードVueルーターの登場ネストされたルートの設定要約する序文V...

XHTML と CSS によるオブジェクト指向プログラミング

<br />XHTML と CSS がオブジェクト指向だったらよかったのに。 。太陽は北...

開発者がデータベースロックを詳細に理解する必要がある理由

1.ロックしますか? 1.1 ロックとは何ですか?ロックの本当の意味は、鍵またはコードで開くことがで...

面接官はReactのライフサイクルについてよく質問します

ReactライフサイクルReactのライフサイクルを理解するのに役立つ2つの図React ライフサイ...

CentOS 7.2 に SuPHP をインストールするための詳細な手順

デフォルトでは、CentOS 7 上の PHP は apache または nobody として実行さ...

MySQL ユーザーのホスト属性を素早く変更する方法

MySQL にリモートでログインする場合、使用するアカウントには特別な要件があります。アカウントのデ...

古い Vue プロジェクトに Vite サポートを追加する方法

1. はじめに会社のプロジェクトを引き継いで2年になります。今では毎回プロジェクトを起動するのに1分...

nginxリバースプロキシのマルチポートマッピングの実装

コードの説明1.1 http:www.baidu.test.com のデフォルトは 80 で、リバー...