ASP.NET Core 6 MVC项目使用npm替代CDN的配置问题求解

我正尝试在ASP.NET Core 6 MVC项目中使用npm替代CDN引入前端资源，已添加如下webpack.config.js配置文件：

module.exports = {
    entry: [
        "babel-polyfill",
        "./src/main"
    ],
    output: {
        publicPath: "/js/",
        path: path.join(__dirname, "/wwwroot/js/"),
        filename: "main.build.js"
    }
};

运行npm init并安装部分依赖库后，项目已自动生成package.json与package-lock.json文件。我在HTML中按如下方式引用打包生成的main.build.js文件：

<script src="~/js/main.build.js" asp-append-version="true"></script>

且已在program.cs中添加静态文件相关配置：

app.UseDefaultFiles();
app.UseStaticFiles();

遇到的问题 #

• 在main.build.js中编写let Web3 = require('web3');时，抛出错误require is not defined
• 将require语句修改为ES Module写法import Web3 from "web3"后，抛出错误Cannot use import statement outside a module
• 在script标签中添加type="module"属性，即改为<script src="~/js/main.build.js" type="module" asp-append-version="true"></script>后，抛出错误Failed to resolve module specifier "web3". Relative references must start with either "/", "./", or "../"
• 尝试使用相对路径指向node_modules目录，即写为import Web3 from "../../node_modules/web3";，抛出错误GET https://localhost:7101/node_modules/web3 net::ERR_ABORTED 404
• 需要在多个JS文件中使用npm安装的依赖包，而非仅在main.build.js中使用，需要补充webpack.config.js的相关配置

项目结构截图

所有报错的核心原因是当前webpack配置没有完成完整的打包逻辑，你写的require/import语句被原封不动输出到了main.build.js里。浏览器本身不支持CommonJS规范的require，也不会直接解析node_modules下的裸模块导入，自然会连续抛错。

第一步：补全webpack基础配置 #

你现有的配置缺少必要的模块解析规则、loader配置和基础依赖引用，按以下步骤修正：

1. 先安装必须的开发依赖：

   npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/runtime --save-dev
   

2. 替换webpack.config.js为完整配置，注意开头必须引入path模块，原有配置漏写这行会直接运行报错：

   const path = require('path');
   
   module.exports = {
       mode: 'development', // 生产环境发布时改成production
       entry: {
           main: "./src/main.js",
           // 有多个独立JS入口时直接在这里添加，例如 profile: "./src/profile.js"
       },
       output: {
           publicPath: "/js/",
           path: path.resolve(__dirname, "wwwroot/js"),
           filename: "[name].build.js", // 多入口场景下自动按入口名生成对应打包文件
           clean: true // 每次打包自动清空目录下旧的生成文件
       },
       resolve: {
           extensions: ['.js'], // 导入JS文件时自动补全后缀，不用手动写.js
           modules: [path.resolve(__dirname, 'node_modules')] // 明确指定依赖查找路径，正确解析裸模块导入
       },
       module: {
           rules: [
               {
                   test: /\.js$/,
                   exclude: /node_modules/,
                   use: {
                       loader: 'babel-loader',
                       options: {
                           presets: [['@babel/preset-env', {
                               targets: "> 0.25%, not dead" // 按通用浏览器兼容要求自动转译JS语法
                           }]],
                           plugins: ['@babel/plugin-transform-runtime']
                       }
                   }
               }
           ]
       }
   };
   

第二步：修正开发逻辑和引用方式 #

1. 所有业务JS代码统一放在项目根目录的src文件夹下，不要直接修改wwwroot/js目录下的.build.js文件*，这类文件是webpack自动生成的，手动修改的内容会在下次打包时被覆盖。
2. 所有npm安装的依赖，直接在src目录下的业务JS文件里用import Web3 from 'web3'或者const Web3 = require('web3')导入即可，webpack打包时会自动把依赖代码合并到最终生成的build.js文件中，不需要浏览器直接访问node_modules目录。
3. HTML里的script标签不要加type="module"属性，webpack打包输出的是浏览器可直接运行的普通JS脚本，加该属性会触发浏览器原生ES模块解析规则导致报错，保持原有写法即可：

   <script src="~/js/main.build.js" asp-append-version="true"></script>
   

4. 多页面需要独立JS文件的场景，直接在webpack的entry节点添加对应入口配置即可，打包后会自动生成对应名称的*.build.js文件，在对应页面引入对应打包文件即可，每个文件中都可以正常导入npm依赖，不需要重复配置。

第三步：配置打包命令 #

打开项目根目录的package.json，在scripts节点添加打包相关命令：

{
  "scripts": {
    "build:js": "webpack --config webpack.config.js",
    "watch:js": "webpack --config webpack.config.js --watch"
  }
}

• 运行npm run build:js即可执行一次全量打包，生成最新的静态JS文件
• 开发阶段运行npm run watch:js，webpack会自动监听src目录下的JS文件改动，保存后自动重新打包，不用手动重复执行命令

排查要点 #

• 运行打包命令提示找不到path模块时，检查webpack配置开头是否添加了const path = require('path');
• node_modules目录默认不会被ASP.NET Core作为静态资源目录对外暴露，也不应该手动配置暴露该目录，所有依赖打包后都会合并到wwwroot下的JS文件中，不存在直接访问node_modules的场景
• 业务代码中不要写指向node_modules的相对路径导入，webpack会自动完成依赖解析，直接写包名导入即可。

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