typescriptでkoa 2を開発する二三事

6323 ワード
typescript node.js koa2

前言


最近、ブログを書くプロジェクトでは、フロントエンド用のvue+typescript+element-ui、バックグラウンドではkoa2+typescript+mongoDBの組み合わせが選ばれました.このブログを書く目的も楽屋を書く過程でいくつかの問題に遭遇し、多くの資料を調べてやっと解決した.そこで、総括して、記録して、他の人に完全な参考をすることができます.

基本情報


ここにリストされているのは、使用する構成情報です.結局、ずっと更新されています.ここで言ったバージョンはサポートされていないかもしれません.
"nodemon"            : "^1.18.3",
"ts-node"            : "^7.0.1",
"typescript"         : "^3.1.1"
"node"               : "9.0.0"

問題の説明


今回出会った問題は実はtypescriptと関係がある.koa 2は長い間出てきて、開発は基本的に成熟していますが、今回資料を探している間にtypescriptを使って開発されたのは珍しく、あっても簡単で、私の問題を解決することができませんでした.
それは本題に戻り、tsを使用してkoaを開発し、webpackパッケージのコンパイルに関与しないため、いくつかの問題に直面します.
  • コンパイル
  • リアルタイムリフレッシュ、サーバ
    • の再起動
  • debugger

    • これらは确かに初期に私を困らせたところで、nodeを使って开発して、最も简単なのはnode xxx.jsにほかならなくて、更に热い更新です.しかしtsを導入するとコンパイルとリアルタイムリフレッシュの問題を考慮する必要がある.結局、コードを変更するたびに、手動でサーバを再起動し、手動でコンパイルするわけではありません.

    ソリューション


    以下は私の解決策です.後でなぜこのように書いたのか、間に合わないか、答えだけがほしいならコピーすればいいです.
    "watch"      : "ts-node ./app/index.ts",
"start"      : "nodemon --watch app/index.js",
"build"      : "tsc",
"debugger"   : "nodemon  --watch ./app -e  ts,tsx  --exec node --inspect -r ts-node/register  ./app/index.ts",
"watch-serve": "nodemon  --watch './app/**/*' -e  ts,tsx  --exec ts-node  ./app/index.ts"

    では、私たち一人で話しましょう.

    npm run watch


    このコマンドは、ts-nodeを使用してローカルでサーバを起動します.ts-nodeの説明を見てみましょう.
    TypeScript execution and REPL for node.js, with source map support. Works with typescript@>=2.0.
    これはnode.jsの実行とインタラクティブなtypescript環境で、簡単に言えばtsのために生まれたのです!!
    このコマンドは、現在のエントリに基づいてプログラムを実行します.唯一の問題は、ホット更新がサポートされていないことです.だからpass.

    npm run build && npm run start


    この2つを一緒に言うのは相関性が高いからだ.相互依存関係と言えるでしょう.
    まず、最初のコマンドは、現在のtsプロジェクトファイルをコンパイルすることです.出力ディレクトリはtsconfig.jsonで構成する必要があります.私の運行結果を見せてあげます.appは私のプロジェクトファイルで、コマンドを実行すると、ルートディレクトリの下にdistフォルダを作成して、私がコンパイルしたjsファイルを保存して、開きます.
    2つ目のコマンドは、コンパイルされたファイルエントリに基づいてサーバを起動することです.また、ホット更新はサポートされていますが、 は、コンパイルされたファイルのホット更新のみをサポートしています.実はjsでkoaを開発する起動コマンドです.この場合、ソースファイルの変更は何の役にも立たないのでpassです.

    npm run watch-serve


    ポイントが来て、これこそ問題を解決する鍵です!!!
    ここでは、コードのホット更新、リアルタイムコンパイル、サーバの再起動などの問題を完璧に解決しました.開発体験が向上しました.
    このソリューションにはいくつかの中国語のブログがありますが、当初はなぜこのように使ったのか分かりませんでした.後期に今から見れば低級な間違いを犯しました.これは言いません.しかし、確かにこの命令の意味を説明する人はいません.昨日問題にぶつかって、私はやっとこの悪魔を直視しました.nodemonとts-nodeは前文で紹介しましたが、ここでは具体的な構成について説明するだけです.もともと私の理解では、ここで2つの異なる命令をカンマで区切ったのですが、私はあまりにも無邪気です.文書の紹介を見てみましょう.
    By default, nodemon looks for files with the .js, .mjs, .coffee, .litcoffee, and .json extensions. If you use the --exec option and monitor app.py nodemon will monitor files with the extension of .py. However, you can specify your own list with the -e (or --ext) switch like so: 
    nodemon -e js,jade

    Now nodemon will restart on any changes to files in the directory (or subdirectories) with the extensions .js, .jade. nodemonにはデフォルトで食べるいくつかのファイルタイプがあります.それぞれ.js, .mjs, .coffee, .litcoffee, and .jsonですが、私がここで使っている.tsは、デフォルトのサポートファイルには入っていません.そのため、ここでは-eを使って拡張が必要なファイルタイプを指定します.ここのカンマも異なるタイプを区切るために使われています.では、--execという構成について説明します.原文では、nodemonでapp.pyというファイルを起動すると、.pyという拡張タイプがデフォルトでサポートされます.また、文書には別のものも書かれています.
    nodemon can also be used to execute and monitor other programs. nodemon will read the file extension of the script being run and monitor that extension instead of .js if there's no nodemon.json: 
    nodemon --exec "python -v" ./app.py

    Now nodemon will run app.py with python in verbose mode (note that if you're not passing args to the exec program, you don't need the quotes), and look for new or modified files with the .py extension.
    ここでは、デフォルトでサポートされている拡張子に加えて、この構成により、実行中のスクリプトと同じ拡張子をサポートできます.また,拡張プログラムが伝達パラメータを必要としない場合は,単一引用符を書かなくてもよい.
    以上のように、コマンドは、サポートされているファイルタイプを追加し、他のタイプのプログラムを実行および監視するように構成されています.---watchというパラメータについて.
    By default nodemon monitors the current working directory. If you want to take control of that option, use the --watch option to add specific paths: nodemon --watch app --watch libs app/server.js
    Now nodemon will only restart if there are changes in the ./app or ./libs directory. By default nodemon will traverse sub-directories, so there's no need in explicitly including sub-directories.
    Don't use unix globbing to pass multiple directories, e.g --watch ./lib/*, it won't work. You need a --watch flag per directory watched.
    ここで注意しなければならないのは、nodemonが現在のスクリプトファイルの実行をデフォルトで監視するフォルダと、特定のフォルダを指定する場合は、絶対パスや相対パスなどの詳細なパスが必要で、ワイルドカードは絶対に使用しないことです.したがって、コマンドラインでの使用は無効でルールに違反していますが、このように書かなくても実行に影響しません.
    もともとこれで終わりましたが、昨日npmパッケージを使って、どのように動いているのか見たいと思って、debuggerの問題に遭遇しました.これも私にこの命令を真剣に理解させた理由です.

    npm run debugger


    基本的なデバッグ方式はネット上にあちこちにあるので、私は言わないで、問題はやはりtypescriptを導入した後で、すべてを混乱させます.最初は次のコマンドを試しました.
    'nodemon  --inspect --watch ./app -e  ts,tsx  --exec ts-node ./app/index.ts'
'nodemon  --watch --inspect ./app -e  ts,tsx  --exec ts-node ./app/index.ts'
'nodemon  --watch  ./app -e  ts,tsx  --exec ts-node --inspect ./app/index.ts'

    これらは自分で実行してみることができますが、どうせ何の役にも立たない.そして今日はずっとこのことを考えて、いくつかのキーワードgoogleを変えて、この2つの場所を見つけました.
    https://stackoverflow.com/que...
    https://github.com/TypeStrong...
    stackoverflowとgithubに感謝して、お互いに証明して見れば何が起こっているのかわかるようです.
    ここでは-rというパラメータについて説明します.
    ここでは、モジュールをプリロードするために使用され、このパラメータを複数回使用することができます.それは、私が書いたコマンドでは、ts-node/registerがモジュールであるか、厳密にはregisterがts-nodeの次の方法です.ここで、nodeプリロードts-nodeのregisterモジュールを使用してtsプログラムを実行し、debuggerモードをオンにします.

    後語


    これまで、コンパイル、ホットアップデート、デバグガー側の穴は踏み終わったはずなので、後ろの人が私の書いた文章を見て回り道を少なくしてほしいですね.もしいくつかの間違ったところがあれば、伝言を残して訂正することができます.すべてのソースコードはしばらく放出されないはずです.少なくとも私が書き終わるのを待っていてください.
    味噌紫について、
    [モダンJavaScript]第16章-職業評論
    がんばって