ASP.NET Core MVC项目如何从node_modules导入前端JS模块

直接暴露node_modules作为静态目录的方式无法正常运行ES Module格式的bpmn-js包——这类包内部存在大量裸模块导入逻辑，浏览器无法直接解析import xxx from '包名'这类路径，必须通过打包工具处理依赖映射、合并资源。对新手最友好的方案是用Vite，配置量极小，步骤如下：

方案一：Vite打包（推荐，生产环境可用） #

步骤1：整理前端代码目录 #

在ASP.NET Core MVC项目的wwwroot目录下新建src文件夹，专门存放自定义前端逻辑，比如创建入口文件bpmn-init.js，写入导入和初始化代码：

// wwwroot/src/bpmn-init.js
import BpmnModeler from 'bpmn-js/lib/Modeler';
// 引入bpmn-js默认样式
import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';

// 初始化建模容器，对应页面上的DOM节点
const bpmnModeler = new BpmnModeler({
  container: '#bpmn-container'
});

// 后续自己的业务逻辑写在这里即可

在对应cshtml视图中预留建模器容器：

<div id="bpmn-container" style="height: 80vh;"></div>

步骤2：安装Vite并写极简配置 #

在项目根目录（存放package.json的层级）执行命令安装Vite：

npm install -D vite

在同目录下新建vite.config.js配置文件，内容如下，作用是指定打包入口、将打包产物输出到wwwroot目录下可被MVC静态中间件直接访问的位置：

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  build: {
    outDir: path.resolve(__dirname, 'wwwroot/dist'),
    emptyOutDir: true,
    rollupOptions: {
      input: path.resolve(__dirname, 'wwwroot/src/bpmn-init.js')
    }
  }
});

修改package.json的scripts字段，新增两个可用命令：

{
  "scripts": {
    "build:js": "vite build",
    "watch:js": "vite build --watch"
  }
}

步骤3：打包并在页面引入 #

• 开发阶段执行npm run watch:js，Vite会监听前端代码改动自动重新打包，不用手动重复执行命令
• 正式发布前执行npm run build:js，会生成压缩后的生产环境资源
  打包完成后产物会输出到wwwroot/dist目录，直接在cshtml中引入即可，注意要加type="module"属性：

<script src="~/dist/bpmn-init.js" type="module"></script>

方案二：预构建UMD版本引入（仅适合临时测试，不推荐生产用） #

如果完全不想接触打包工具，可以直接用bpmn-js提前打包好的全局版本，但是后续加自定义扩展、插件会非常麻烦：

1. 从本地已安装的bpmn-js包的dist目录中，找到bpmn-modeler.development.js、diagram-js.css、bpmn-font相关资源，手动复制到wwwroot/lib/bpmn-js目录下
2. 在页面中按顺序引入资源，直接调用全局对象即可：

<link rel="stylesheet" href="~/lib/bpmn-js/assets/diagram-js.css" />
<link rel="stylesheet" href="~/lib/bpmn-js/assets/bpmn-font/css/bpmn.css" />
<script src="~/lib/bpmn-js/bpmn-modeler.development.js"></script>
<script>
  // 预构建版本会把构造函数挂到window全局
  const bpmnModeler = new BpmnJS({
    container: '#bpmn-container'
  });
</script>

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