web-dev-qa-db-ja.com

npmコマンドを使用してTypeScriptをコンパイルする方法は？

TypeScriptコードを直接コンパイルして出力を取得するコマンドがあることを知りたいだけです。今、私がしていることは、ファイルを変更するたびに、コマンドを再実行してコンパイルする必要があることです

npm start

これによりブラウザが起動し、ctrl + cを使用して実行を停止し、npmコマンドを使用してファイルを実行する必要があります

node filename

出力を確認します。

私が知りたいのは、.tsファイルをコンパイルし、ファイルを実行している間にファイルに加えた変更を確認するnpmコマンドがありますか？

node filename

コマンド

node.jstypescriptnpm
10
Lijin Durairaj

--watch引数を使用して、tscコマンド（TypeScriptコンパイラ）を起動できます。

ここにアイデアがあります：

  • tsconfig.jsonファイルを使用してTypeScriptを構成する
  • tsc --watchを実行します。したがって、.tsファイルを変更するたびに、tscがコンパイルして出力を生成します（出力を./distフォルダーに配置するように設定したとします） ）
  • nodemonを使用して、./dist内のファイルが変更されたかどうか、およびサーバーを再起動する必要がある場合に監視します。

これを行うのに役立ついくつかのスクリプト（package.jsonに入れる）があります（次のモジュールnpm install --save TypeScript nodemon npm-run-all rimrafをインストールする必要があります）

"scripts": {
    "clean": "rimraf dist",
    "start": "npm-run-all clean --parallel watch:build watch:server --print-label",
    "watch:build": "tsc --watch",
    "watch:server": "nodemon './dist/index.js' --watch './dist'"
}

次に、ターミナルでnpm startを実行するだけです

24
ThomasThiebaud

これは、@ ThomasThiebaudによって提案されたソリューションに基づいています。 nodemonがサーバーを起動しようとする前に、ファイルをdist/でビルドするために少し変更する必要がありました。

"scripts": {
    "clean": "rimraf dist",
    "build": "tsc",
    "watch:build": "tsc --watch",
    "watch:server": "nodemon './dist/index.js' --watch './dist'",
    "start": "npm-run-all clean build --parallel watch:build watch:server --print-label"
  },

全体を開始するには、npm startを実行する必要があります。

7
demisx

ここに私のアプローチがあります。すべてのTypeScriptファイルをsrcフォルダーに保持し、出力されるjavascriptファイルを./distフォルダーに生成するとします。

{
    "name": "yourProjectName",
    "version": "1.0.0",
    "description": "",
    "main": "./dist/index",
    "types": "./dist/index",
    "scripts": {
        "dev": "tsc --watch & nodemon dist"
    },
    "author": "Gh111",
    "license": "ISC",
    "devDependencies": {
        "yourdevDependencies": "^1.0.0"
    }
}

およびTypeScript構成ファイルtsconfig.json

{
  "compilerOptions": {
    "target": "es5",       
    "module": "commonjs",  
    "outDir": "./dist",    
  },
  "include": ["./src/**/*"],
  "exclude": [
    "node_modules"
  ]
}

さて、ここで何が起こっているのか

まず、tsconfig.jsonを作成し、コンパイル済みファイルを./distフォルダーに入れるようにTypeScriptに指示すると同時に、node_moduleフォルダーまたは必要なものをすべて除外して、["./src/**/*"]ディレクトリ。

その後、packages.jsonファイルで、コンパイルされたindex.jsファイルへのパスを指定する必要があります

「メイン」：「./dist/index」

そして最後にtscに--watchにTypeScriptの変更を指示し、nodemonに./distディレクトリ内を監視し、何かが変更された場合はnodemonはサーバーを再起動します。

"scripts": {
    "dev": "tsc --watch & nodemon dist"
 },

スクリプトを実行するには、npm run devと入力します

2
Gh111