reactjs - Hvordan man tilføjer react med typescript til en eksisterende asp.net core mvc-applikation

Jeg prøver at tilføje React-komponenter (TypeScript) i form af .tsx-filer, som skal gengives på nogle af mine ASP.NET Core MVC .cshtml-sider, men jeg kan ikke få det til at fungere korrekt. Er der en god måde at gøre dette på?

Svar #1

Du skal grundlæggende bruge webpack og ændre din .csproj for at køre et yarn build før kørsel for at transpile din Typescript og forbinde alle afhængighederne i en bundle.

Start med at tilføje Nuget-pakker: Yarn.MSBuild og Microsoft.TypeScript.MSBuild til dit projekt.

tsconfig.json: (sæt i rodmappen af dit projekt)

{
  "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"
  ]
}

^^Bemærk, at dette vil få dine .tsx-filer til at transpile til mappen: wwwroot/dist, skift outDir, hvis du vil have det et andet sted

package.json (placeres i projektets rodmappe)

{
  "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"
  }
}

^^tilføj alle npm-afhængigheder, du har brug for, i din package.json (selvfølgelig) samt dine Typescript @type-afhængigheder. Dette er bare de minimale nødvendige pakker for React og hot reloading.

Webpack.targets (placeres i projektets rodmappe)

<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>

^^denne fil Webpack.target skal tilføjes til din .csproj-fil (jeg tilføjede den til slutningen) og skal tilføjes sådan her: I din .csproj:

<Import Project="Webpack.targets" />

webpack.config.js: (sæt i rodmappen af dit projekt)

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()
        ]
    }];
};

^^Bemærk entry point og modules->rules->include. Det betyder, at webpack bliver konfigureret til at kigge i en mappe kaldet ClientApp (i rodmappen af dit projekt) efter .tsx-filerne, der skal transpileres. Hvis du vil have dine .tsx-filer et andet sted, skal du blot ændre disse. Entry point angiver også, at filens entry point er App.tsx, sæt din højeste niveau React-komponent (som afhænger af alle dine andre komponenter) heri, eller inkluder den simpelthen i denne fil.

Tilføj nu WebpackDevMiddleware til din Startup->Configure-funktion:

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

Nu, hvis du i din App.tsx-fil vælger en div (sig en med id: 'root') og renderer din komponent i den, er alt, hvad du behøver at gøre for at tilføje din React-komponent til din .cshtml-fil, at inkludere den transpilerede App.js (i wwwroot/dist) i .cshtml sammen med en div med id: 'root', og bam. Du har React-komponenter, der kan tilføjes til .cshtml uden at bruge nogen SPA-bs 🚀

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

Relaterede artikler