Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8833

Node.js & TypeScriptのプロジェクトの開始

$
0
0

こちらに全部書いてあります。
Node.js & TypeScriptのプロジェクト作成
https://typescript-jp.gitbook.io/deep-dive/nodejs

・package.json作成
npm init -y

・TypeScript・node.jsの型ファイルインストール
npm i --save-dev typescript @types/node

・tsconfig.json作成
npx tsc --init

・tsのバージョン確認
npx tsc --version

・ts-node,nodemonをインストール
npm i --save-dev ts-node nodemon

・scriptsにコマンドを記載
"scripts": {
    "start": "npm run build:live",
    "build": "tsc -p .",
    "build:live": "nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/index.ts"
  }

tsc -p .ってなんだ?

・ヘルプ参照
tsc --help
→
-p FILE OR DIRECTORY, --project FILE OR DIRECTORY  Compile the project given the path to its configuration file, or to a folder with a 'tsconfig.json'.
設定ファイルへのパスを指定してプロジェクトをコンパイルするか、'tsconfig.json' のあるフォルダを指定してください(DeepL訳)

→tscoinfig.jsonへのパスを指定するんだな。tsconfig.jsonはルートディレクトリに生成するし、buildもルートディレクトリで実行するから、.でおk。

...和訳が不安(ここのgivenってなんだ?)だったので、ちょっと試してみる。

tsconfig.jsonを./sampleディレクトリに隠してbuildを実行
$ mkdir sample
$ mv tsconfig.json sample/tsconfig.json
$ npm run build
→Cannot find a tsconfig.json file at the specified directory: '.'.

おお!和訳通り、tsconfig.jsonを探している。DeepLすごい。

build:live

"build:live": "nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/index.ts"

→常に、srcディレクトリ以下のtsファイルをnodemonwatch()監視して、変更があれば、ts-node' src/index.tsを実行する、ってことかな。
src/**/*.tsは、src/index.tsも検知(srcディレクトリ以下じゃないと検知しない)、ts-nodeを実行するのは、src/index.tsだけ。
nodemonを手動で再起動したい場合は、nodemonが起動しているターミナルでrsとだけ入力。

参考

nodemonを使用して、コード変更後に自動でNode.jsのアプリを再起動する方法。
https://blog.officekoma.co.jp/2020/05/nodemonnodejs.html

ts-node で TypeScript + node をサクッと実行する
https://qiita.com/mangano-ito/items/75e65071c9c482ddc335

[番外編]ついでになんとなく理解していたところを調べる

src/**/*.ts

パスでのワイルドカードの使用
https://help.sumologic.jp/03Send-Data/Sources/04Reference-Information-for-Sources/Using-Wildcards-in-Paths

ファイルごとに名前を入力するのではなく、Source パスにワイルドカードを使用すると、1 つ以上のディレクトリにある特定の種類のすべてのファイル、または多数のディレクトリから多数のファイルを収集できます。
* は、単純で非再帰的なワイルドカードであり、パスやファイル名に使用できる 0 個以上の文字を表します。
** は再帰的なワイルドカードであり、パスのみに使用できます。ファイル名には使用できません。
/var/log/** は /var/log 内のすべてのファイルと、すべての子ディレクトリ内のすべてのファイルを再帰的に照合します。
/var/log/*/.log は、/var/log 内の名前が .log で終わるすべてのファイル、およびすべての子ディレクトリ内のすべてのファイルに再帰的に一致します。

*.tsはなんとなく、拡張子がtsのファイルすべてってわかったけど、/**は、再帰的に、つまり、そのディレクトリ 以下全ての、ってことなんだな。

package.jsonscripts

package.json内にscriptsの記述を設定する(npm-scripts)
https://blog.officekoma.co.jp/2020/02/packagejsonscriptsnpm-scripts.html

"scripts": {
    "start": "ng serve",
    "test": "ng test",
    "build": "ng build"
}

とscripts内にいくつかのコマンドを設定しておきます。そして、

$ npm run [スクリプト名]

と打てば上記で設定したコマンドが実行されます。
よく使うコマンドは独自に作っておけば結構楽な場合があります。

こちらは思っていた通り。でも、公式見ると、preとかpostとか、いろいろあるらしい。。。
scripts
https://docs.npmjs.com/cli/v6/using-npm/scripts

Pre & Post Scripts
To create "pre" or "post" scripts for any scripts defined in the "scripts" section of the package.json, simply create another script with a matching name and add "pre" or "post" to the beginning of them.

{
  "scripts": {
    "precompress": "{{ executes BEFORE the `compress` script }}",
    "compress": "{{ run command to compress files }}",
    "postcompress": "{{ executes AFTER `compress` script }}"
  }
}

これって、compress実行したら、勝手に、precompresspostcompressも実行してくれるのかなぁ?(そんな感じでは書いてないけど)

package.json
"scripts":{"presample":"echo \"pre〜コマンドですよ\"","sample":"echo \"sampleコマンドですよ\"","postsample":"echo \"post〜コマンドですよ\""}
$ npm run sample
> echo "pre〜コマンドですよ"
pre〜コマンドですよ
> echo "sampleコマンドですよ"
sampleコマンドですよ
> echo "post〜コマンドですよ"
post〜コマンドですよ

うお!実行された。どう使うかパッと思いつかないですが、便利ですね。
「毒を喰らわば皿まで」と思って調べて見ましたが、発見でした。


Viewing all articles
Browse latest Browse all 8833

Trending Articles