はじめに
ほとんど以下のURLのまま。ありがとうございます。
http://blog.okazuki.jp/entry/2016/09/03/145059
ただし、ASP.NET MVCでViewを使用しようと思うので、少しだけ違う構造になるのでそこだけ備忘録。
備忘録
webpackの設定
本記事投稿時、webpackのバージョンが4以降になっていたため、設定プロパティが変更されていたため、自動作成されたwebpack.config.jsを以下のようにする。
moduleについてはここを参照。
module.exports = {
// webpack 4 から追加が必要になった。モードはdevelopment、production、noneが存在する。
mode: "development",
// エントリーポイントの設定。
entry: "./scripts/app.tsx",
// 出力の設定。
output: {
// ★注意 「../」にしておかないとプロジェクトの直下に勝手に「dist」フォルダが作成されて、その中に/Scripts/Dist/bundle.jsが作成されていた。
filename: "../scripts/bundle.js"
},
// webpackで変換・バンドルする前に、loaderと呼ばれるモジュールに処理をさせる場合に設定する。
module: {
rules: [
{
// loaderの対象拡張子
test: /\.tsx?$/,
// 使用するloader。事前にnpm installしておく必要がある。
use: "ts-loader"
}
]
}
};
「npm install -s」は「npm install --save」に置き換えて読む。
「-s」のままだと、webpackのコンパイル時にエラーが出る。
npmコマンド覚え書きを参照。
cshtmlの変更
新しく作成されたプロジェクトをそのまま使用することにしたので、「\Views\Home\Index.cshtml」を次のように書き換える。
<div id="content"></div>
さらに、「\Views\Shared_Layout.cshtml」を次のように書き換える。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello React</title>
</head>
<body>
@RenderBody()
<script type="text/javascript" src="~/Scripts/Dist/bundle.js"></script>
</body>
</html>
これで、「@RenderBody」に「
」が置き換えられる。ここをtypescript側（react-dom）が置き換えてくれる。package.jsonをプロジェクトに含める
以下のコマンドを実行すると「package.json」がプロジェクトフォルダ直下（「{projectの名前}\package.json」となる）に作成される。
しかし、プロジェクトに読み込まれていないので、プロジェクトに読み込んでおく。
★「package.config」のことではなく、「package.json」のことを言っている。間違えないように。★
以上。