如何在Blazor JS模块中使用npm包？

问题原因说明 #

TypeScript 本身仅负责 TypeScript 语法到 JavaScript 语法的转译，默认不会处理模块依赖的合并打包，所以你编译后输出的JS文件会保留原始的import语句，不会自动包含npm包的代码，要在不使用Webpack这类全量打包工具的前提下运行代码，可参考以下适配不同运行环境的方案：

方案1：浏览器环境使用原生ES模块 + 导入映射 #

• 首先修改tsconfig.json配置，开启ES模块输出：

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "target": "ES2020",
    "outDir": "./dist"
  }
}

• 执行tsc编译后，输出的JS文件会保留你示例中的import {something} from 'some-lib-from-npm'语句，你只需要在HTML入口文件中加入导入映射，告诉浏览器npm包的实际加载地址即可：

<script type="importmap">
{
  "imports": {
    "some-lib-from-npm": "你的npm包对应的ESM资源地址"
    /* 所有依赖的npm包都可以在这里映射到对应ESM格式的资源地址，也可以映射到本地静态资源路径 */
  }
}
</script>
<script type="module" src="./dist/你的入口文件.js"></script>

方案2：Node.js环境使用原生ESM模块 #

• 修改tsconfig.json配置：

{
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "target": "ES2020",
    "outDir": "./dist"
  }
}

• 在项目根目录的package.json中添加"type": "module"字段，告知Node.js当前项目使用ESM模块规范。
• 只要你安装的npm包本身支持ESM格式，Node.js会自动从node_modules目录解析导入的依赖，无需打包，直接执行node ./dist/你的入口文件.js即可运行。

方案3：开发阶段直接运行TS文件 #

如果是开发阶段不想每次修改都手动编译，可以用tsx或者ts-node这类运行时加载工具，直接执行TS文件，工具会自动处理依赖解析和语法转译，无需额外打包操作。

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