ASP.NET Core 2.0中React JSX文件压缩配置求助（附相关配置）

Hey there! I get why you're frustrated—bundleconfig.json works great for plain JS/CSS, but it doesn't handle JSX out of the box because JSX needs to be transpiled to regular JavaScript first before it can be minified. Let's walk through two solid solutions using either Webpack or Grunt, since you already have those config files in place.

First: Why bundleconfig.json Fails for JSX #

Bundleconfig relies on tools like Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation or BundlerMinifier which don't understand JSX syntax. You need to first convert JSX to valid JS, then minify the result—this is where Webpack or Grunt shines.

Solution 1: Use Webpack for JSX Transpilation + Minification #

Webpack is perfect for this since it can handle both transpiling JSX (via Babel) and minifying the output in one step. Here's how to update your config:

Step 1: Ensure Required Dependencies are Installed #

First, make sure your package.json has these dev dependencies (add them if missing):

"devDependencies": {
  "@babel/core": "^7.x",
  "@babel/preset-react": "^7.x",
  "babel-loader": "^8.x",
  "terser-webpack-plugin": "^5.x",
  "webpack": "^5.x",
  "webpack-cli": "^4.x"
}

Run npm install to install them.

Step 2: Update webpack.config.js #

Modify your config to process JSX files, transpile them with Babel, and minify the output:

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // Entry point: point to your main JSX file (or multiple entries)
  entry: './ClientApp/src/index.jsx',
  output: {
    // Output to wwwroot/dist (or your preferred folder)
    path: path.resolve(__dirname, 'wwwroot/dist'),
    filename: 'bundle.min.js'
  },
  module: {
    rules: [
      {
        // Target all .jsx files
        test: /\.jsx$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react']
          }
        }
      }
    ]
  },
  optimization: {
    minimizer: [
      // Enable minification
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true // Optional: remove console logs in production
          }
        }
      })
    ]
  },
  mode: 'production' // Enables built-in optimizations including minification
};

Step 3: Add a Build Script to package.json #

Add a script to run Webpack easily:

"scripts": {
  "build": "webpack --mode production"
}

Step 4: Integrate with ASP.NET Core Build #

To make sure Webpack runs when you build your .NET project, add this to your .csproj file:

<Target Name="PreBuild" BeforeTargets="PreBuildEvent">
  <Exec Command="npm run build" />
</Target>

Solution 2: Use Grunt for JSX Transpilation + Minification #

If you prefer Grunt, you can use grunt-babel to transpile JSX first, then grunt-contrib-uglify to minify the result.

Step 1: Install Grunt Dependencies #

Add these to your package.json dev dependencies:

"devDependencies": {
  "grunt": "^1.x",
  "grunt-babel": "^8.x",
  "@babel/core": "^7.x",
  "@babel/preset-react": "^7.x",
  "grunt-contrib-uglify": "^5.x"
}

Run npm install.

Step 2: Update Gruntfile.js #

Configure the tasks to transpile JSX, then minify:

module.exports = function(grunt) {
  grunt.initConfig({
    babel: {
      options: {
        presets: ['@babel/preset-react']
      },
      dist: {
        files: {
          // Transpile all JSX files to temp JS files
          'wwwroot/dist/temp/bundle.js': './ClientApp/src/**/*.jsx'
        }
      }
    },
    uglify: {
      dist: {
        files: {
          // Minify the transpiled JS file
          'wwwroot/dist/bundle.min.js': 'wwwroot/dist/temp/bundle.js'
        }
      }
    }
  });

  // Load tasks
  grunt.loadNpmTasks('grunt-babel');
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Define default task: transpile then minify
  grunt.registerTask('default', ['babel', 'uglify']);
};

Step 3: Run the Grunt Task #

Add a script to package.json:

"scripts": {
  "grunt-build": "grunt default"
}

Then add the pre-build event to your .csproj like in the Webpack solution, replacing npm run build with npm run grunt-build.

Verification Steps #

1. Run npm run build (or npm run grunt-build) manually first to test the output.
2. Check the wwwroot/dist folder for your minified bundle.min.js—it should have no JSX syntax and be compressed.
3. Update your ASP.NET Core views to reference the minified bundle instead of raw JSX files.

That should fix your JSX minification issue! Let me know if you hit any snags with your specific config files.

内容的提问来源于stack exchange，提问作者Jitendra Pancholi