ASP.Net MVC5 + TypeScript + React + Webpack

どこにもまとまってなかったので構築メモ
わけあってCOREじゃないです。
公開しますが、責任は持てません。

## 1.Node.jsをインストール

インストールフォルダはdefaultで、C:\Program Files\nodejs
環境変数`NODE_PATH`に下記のコマンドで得た文字列を追加する。

``` ruby:cmd
npm root -g
```
例)
![RT2_000005.JPG](https://qiita-image-store.s3.amazonaws.com/0/147620/ae52bc5d-fc12-9298-7e0e-639fd21845ed.jpeg)

## 2.VisualStudioでプロジェクトを作成する
新しい ASP.NET Web アプリケーションから好きなtemplateを選択して作成。

## 3.プロジェクトのrootフォルダで以下を実行する
``` ruby:cmd
npm install --save react react-dom @types/react @types/react-dom
npm install --save-dev typescript awesome-typescript-loader source-map-loader
npm install --save-dev webpack webpack-cli
```
## 4.VisualStudioの外部WebツールのPATH順を変える
※変えないと古いnode.jsが使われるかも。
![RT2_000004.JPG](https://qiita-image-store.s3.amazonaws.com/0/147620/480514cf-c7c9-c632-308d-24fcba9b3a99.jpeg)

## 5.VisualStudioに必要なコンポーネントをインストール(アンインストール)
拡張機能からwebpack task runnerをダウンロードしてインストール
![RT2_000003.JPG](https://qiita-image-store.s3.amazonaws.com/0/147620/dfd89913-9848-31c2-919d-22b5dc65842f.jpeg)

## 6.適当にviewとtsxを書く

``` ruby:View/Home/index.cshtml
@{}
<div>
    <div id="content"></div>
    <script src="~/dist/Home.bundle.js"></script>
</div>
```
``` ruby:Script/Home/index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Hello } from "./components/Hello";//依存コンポーネント

ReactDOM.render(
    <Hello compiler="TypeScript" framework="React" />,
    document.getElementById("content")
);
```

## 7.構成ファイルを作成
tsconfig.jsonとwebpack.config.jsをプロジェクト直下に作成。

![タイトルなし.png](https://qiita-image-store.s3.amazonaws.com/0/147620/1302c1fa-9b07-80df-85da-a50613af1df5.png)

※`TypeScript JSON構成ファイル`が選択できない場合はvisual studioのTypeScript関連を整える(TypeScript Tools for Microsoft Visual Studioとか)。

tsconfig.jsonの内容は以下のように記載。

``` ruby:tsconfig.json
{
  "compilerOptions": {
    "outDir": "./src/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es6",
    "jsx": "react"
  },
  "include": [
    "./Scripts/**/*"
  ]
}
```
webpack.config.jsの内容は以下のように記載。entryの内容はviewやtsxに合わせる。下記はコントローラー(画面)毎に作るよう設定。画面が増えたら画面分付け足していく。
※index.jsはindex.tsxが上記tsconfig.jsonの設定でトランスパイルされたもの。

``` ruby:webpack.config.js
module.exports = [
	{
	    entry: {
	        "Home": "./src/Home/index.js"
	    },
	    output: {
	        filename: "[name].bundle.js",
	        path: __dirname + "/dist"
	    },
	    devtool: "source-map",
	    resolve: {
	        extensions: [".ts", ".tsx", ".js", ".json"]
	    },
	    module: {
	        rules: [
	            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
	            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
	        ]
	    },
	    externals: {
	        "react": "React",
	        "react-dom": "ReactDOM"
    },
    {
        mode: 'development',
        entry: {
            'Sample.css': './Content/Less/Sample.less'
        },
        output: {
            path: __dirname + "/dist",
            filename: '[name]'
        },
        module: {
            rules: [
                { 
                   test: /\.less$/,
                   use: ExtractTextPlugin.extract({ use: 'css-loader!less-loader' }) }
            ],

        },
        plugins: [
            //new ExtractTextPlugin('[name]')//これだとだめ
            new ExtractTextPlugin({
                filename: (getPath) => { return getPath('[name]') }
            })
        ],
    }
];
```

## 8.タスクランナーを設定
その後、タスクランナーエクスプローラーで以下のようにバインドする。
![RT2_000000.JPG](https://qiita-image-store.s3.amazonaws.com/0/147620/44f09956-1fba-26ed-856a-224a16cdb94c.jpeg)

## 9.ビルド
cshtml選択してブラウザで表示でもOK

## 10.参考リンク
調べものは、本家見た方が早い。
- [Node.js](https://nodejs.org/ja/)
- [TypeScript](http://www.typescriptlang.org/index.html)
- [React](https://reactjs.org/)
- [WebPack](https://webpack.js.org/)
※webpackにcssの設定するの忘れた
→2018/8/10 CSS追加
- [参考]https://blog.hirokiky.org/entry/2018/05/03/172317