サーバー側Node.jsプロジェクトでTypescriptとWebpackを使用するように設定する方法

Question

TypescriptとWebpackを使用してサーバー側Node.jsプロジェクトをセットアップする方法を示すリソース（youtubeまたは他の記事）を探しています。私は、クライアント/ブラウザ側のプロジェクトにタイスクリプトを追加することを説明する記事が多すぎます。私はAngularを使用しているので、これを知る必要はありません。 webpackはAngularプロジェクトの中に埋め込まれているので、サーバー上で同じ技術を使用することは、学習の観点からは理にかなっているようです。 Typescriptlang.orgに必要な情報が見つからないようです。私はnode.jsプロジェクトを作成する方法を知っているので、node.js初心者チュートリアル/リソースは必要ありません。ここで重要なのは、TypescriptとWebpackをNode.jsサーバープロジェクトに追加する方法です。ありがとう。

Answer 1

クライアント側と異なることはできません。サーバー側のwebpackで同じ種類の設定を使用できます。ちょうどあなたのエントリーポイントを与えれば、それはあなたのためのすべての依存関係とバンドルを解決し、webcapのts-loaderを使ってJavaScriptをあなたのタイスクリプトにコンパイルすることができます

Answer 2

これはブラウザ環境設定と大きく異なりません。まず、あなたはそうのようなエンバイロメントあなたのコードはNodeJSでの使用のためにコンパイルするためにのWebPACKのターゲットオプションを使用する必要があります。ここでは

module.exports = { 
    target: 'node' 
}; 

は、この部分のドキュメントです：Webpack Targets

はまた、あなたは確認する必要があります@types/nodeがインストールされています。

このため、一般的なWebPACKの構成は次のようになります。ここでは

const path = require("path"); 

module.exports = { 
    entry: "./src/index.ts", 
    target: "node", 
    output: { 
     filename: "bundle.js", 
     path: path.resolve(__dirname, "build") 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.tsx?$/, 
       use: 'ts-loader', 
       exclude: /node_modules/ 
      } 
     ] 
    }, 
    resolve: { 
     extensions: [ ".tsx", ".ts", ".js" ] 
    }, 
} 

私はexempleとして作った小さな作業プロジェクト：私はWebPACKのためのnodemonプラグインを使用することをお勧めしnode-typescript-boilerplate

：nodemon-webpack-plugin、それはコードソースを変更するたびにアプリを自動再起動するのに役立ちます。