Blazor 使用 npm 依赖包

使用node包时，经常会有 import interactjs from '@interactjs/interactjs'; 这样类似的引用；这是 node 的语法，非node环境都不支持这种写法。所以 Blazor 要用 node 包，需要再用 js 封装一层。

示例项目

下面是一个 node 项目

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack ./index.js --output-path ../ --output-filename index.bundle.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@interactjs/actions": "^1.10.27",
    "@interactjs/auto-start": "^1.10.27",
    "@interactjs/interactjs": "^1.10.27",
    "@interactjs/snappers": "^1.10.27"
  }
}

入口文件是 index.js, 所以我们在 index.js 里封装 node 包

import interactjs from '@interactjs/interactjs';

console.log("测试....");

window.test = ()=> {
    console.info("window.test");
    console.info("interactjs", interactjs);
}

安装Webpack和打包

之前说了，import interactjs from '@interactjs/interactjs'; 这样的语法无法直接在 Blazor 里运行，所以还要把 node项目打包。就是配置文件里的 “build” 命令，当然还需要提前装 webpack

npm install webpack -g
npm install webpack-cli -g

为了避免每次项目修改，都是用命令行打包 node，可以在 csproj 文件里加编译事件

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

这样每次编译项目都会先打包 node 项目。

其他

webpack打包出来的 js 全是闭包，所以里面的方法要被 blazor 使用，必须挂在 window 对象下；export 的用法在这里行不通了。

为什么 blazor 使用 node 如此麻烦，我依然使用 blazor 做前端，而不使用 vue。因为 blazor 最方便的地方不是使用 c# 写前端，而是可以实时同步服务端的数据状态，这在使用 H5 做设备 UI 时十分便利，且极易维护