Help us understand the problem. What is going on with this article?

ASP.Net MVC5 + TypeScript + React + Webpack

More than 1 year has passed since last update.

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

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

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

cmd
npm root -g

例)
RT2_000005.JPG

2.VisualStudioでプロジェクトを作成する

新しい ASP.NET Web アプリケーションから好きなtemplateを選択して作成。

3.プロジェクトのrootフォルダで以下を実行する

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

5.VisualStudioに必要なコンポーネントをインストール(アンインストール)

拡張機能からwebpack task runnerをダウンロードしてインストール
RT2_000003.JPG

6.適当にviewとtsxを書く

View/Home/index.cshtml
@{}
<div>
    <div id="content"></div>
    <script src="~/dist/Home.bundle.js"></script>
</div>
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

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

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

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の設定でトランスパイルされたもの。

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

9.ビルド

cshtml選択してブラウザで表示でもOK

10.参考リンク

調べものは、本家見た方が早い。
- Node.js
- TypeScript
- React
- WebPack
※webpackにcssの設定するの忘れた
→2018/8/10 CSS追加
- [参考]https://blog.hirokiky.org/entry/2018/05/03/172317

alfas
美味そうなモノだけちょっとずつかじってみる人生。 My life for enjoy many wonderful things a little.
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away