reactjs - 如何将 react with typescript 添加到现有的 asp.net core mvc 应用程序

Question

我正在尝试以 .tsx 文件的形式添加 react 组件( typescript )以在我的一些 asp.net 核心 mvc .cshtml 页面上呈现，但似乎无法正常工作。有什么好的方法吗？

Answer 1

您基本上需要使用 webpack 并修改您的 .csproj 以执行 yarn 构建，然后再运行以转译您的 typescript 并将所有依赖项连接到一个包中。

首先将 Nuget 包添加到您的项目中:Yarn.MSBuild 和 Microsoft.TypeScript.MSBuild。

tsconfig.json:(放入项目的根目录)

{
  "typeAcquisition": {
    "enable": true
  },
  "compileOnSave": false,
  "compilerOptions": {
    "sourceMap": true,
    "module": "commonjs",
    "target": "es6",
    "noImplicitAny": false,
    "jsx": "react",
    "outDir": "wwwroot/dist",
    "moduleResolution": "node"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

^^请注意，这将使您的 .tsx 文件转译到文件夹:wwwroot/dist，如果您想在其他地方更改 outDir

package.json(放入项目的根目录)

{
  "scripts": {
    "webpack": "webpack"
  },
  "devDependencies": {
    "@types/react": "^16.4.6",
    "@types/react-dom": "^16.0.6",
    "@types/webpack-env": "^1.13.6",
    "aspnet-webpack": "^3.0.0",
    "awesome-typescript-loader": "^5.2.0",
    "babel-core": "^6.26.3",
    "bootstrap": "4.3.1",
    "clean-webpack-plugin": "^0.1.19",
    "typescript": "^2.9.2",
    "webpack": "^4.15.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-middleware": "^3.1.3",
    "webpack-hot-middleware": "^2.22.2"
  },
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-hot-loader": "^4.0.0"
  }
}

^^在你的 package.json 中添加你需要的任何 npm 依赖项(显然)以及你的 typescript @type 依赖项。这些只是 react 和热重载的最小可行包。

Webpack.targets(放在项目的根目录下)

<Project>

  <Target Name="EnsureNodeModulesInstalled"
          BeforeTargets="Build"
          Inputs="yarn.lock;package.json"
          Outputs="node_modules/.yarn-integrity">

    <Yarn Command="install" />
  </Target>

  <Target Name="PublishWebpack"
          BeforeTargets="Publish">

    <ConvertToAbsolutePath Paths="$(PublishDir)">
      <Output TaskParameter="AbsolutePaths" PropertyName="AbsPublishDir" />
    </ConvertToAbsolutePath>

    <Yarn Command="run webpack --env.prod --env.publishDir=$(AbsPublishDir)" />
  </Target>

</Project>

^^此文件 Webpack.target 将被添加到您的 .csproj 文件中(我在最后添加了它)并且应该像这样添加: 在您的 .csproj 中:

<Import Project="Webpack.targets" />

webpack.config.js:(放在项目的根目录下)

const path = require('path');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = (env) => {
    const isDevBuild = !(env && env.prod);

    const outputDir = (env && env.publishDir)
        ? env.publishDir
        : __dirname;

    return [{
        mode: isDevBuild ? 'development' : 'production',

        devtool: 'inline-source-map',

        stats: { modules: false },

        entry: {
            'App': './ClientApp/App.tsx',
        },

        watchOptions: {
            ignored: /node_modules/
        },

        output: {
            filename: "dist/[name].js",
            path: path.join(outputDir, 'wwwroot'),
            publicPath: '/'
        },

        resolve: {
            // Add '.ts' and '.tsx' as resolvable extensions.
            extensions: [".ts", ".tsx", ".js", ".json"]
        },

        devServer: {
            hot: true
        },

        module: {
            rules: [
                // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
                {
                    test: /\.tsx?$/,
                    include: /ClientApp/,
                    loader: [
                        {
                            loader: 'awesome-typescript-loader',
                            options: {
                                useCache: true,
                                useBabel: true,
                                babelOptions: {
                                    babelrc: false,
                                    plugins: ['react-hot-loader/babel'],
                                }
                            }
                        }
                    ]
                }
            ]
        },
        plugins: [
            new CleanWebpackPlugin(path.join(outputDir, 'wwwroot', 'dist')),
            new CheckerPlugin()
        ]
    }];
};

^^注意入口点和modules->rules->include。这意味着 webpack 被配置为在名为 ClientApp 的文件夹(在项目的根目录中)中查找要转换的 .tsx 文件。如果您想要其他地方的 .tsx 文件，只需更改这些文件即可。入口点还指定文件入口点是 App.tsx，将最高级别的 React 组件(取决于所有其他组件)放入此处或简单地将其包含在此文件中。

现在将 WebpackDevMiddleware 添加到您的 Startup->Configure 函数中:

app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
{
    HotModuleReplacement = true
});

现在，如果在您的 App.tsx 文件中您选择了一个 div(比如一个带有 id:'root' 的 div)并在其中渲染您的组件，那么将 React 组件添加到您的 .cshtml 文件中所需要做的就是包含将 App.js(在 wwwroot/dist 中)与 id 为“root”和 bam 的 div 一起转译为 .cshtml。您拥有无需使用任何 SPA bs 即可添加到 .cshtml 的 React 组件 🚀

信用: https://natemcmaster.com/blog/2018/07/05/aspnetcore-hmr/