在Visual Studio 2019的ASP.NET Core项目中配置TypeScript与Node/ESM模块并解决EthersJS引入兼容问题

首先，我先逐个分析你提出的三个方案的可行性：

方案1：让TypeScript/Gulp/MSBuild转换导入路径 #

这个方案完全可行，核心思路是利用TypeScript的模块解析能力获取类型，再通过构建工具将Node模块的导入转换为浏览器可识别的路径/格式。你需要调整TS配置和Gulp任务，同时处理模块的打包或复制。

方案2：手动设置导入路径并关联类型 #

这个方案也可行，通过TS的paths配置把导入的模块名映射到类型文件，同时运行时使用wwwroot中的编译文件路径，实现类型检查和运行时兼容的分离。

方案3：声明导入的方式 #

declare import { ethers } from "ethers";这种语法是无效的，但你可以通过全局类型声明结合脚本引入的方式实现类似效果，不过这种方式不如前两种灵活，适合简单场景。

具体实现方案推荐 #

结合你的现有配置，我推荐两种具体的解决路径：

路径一：利用TS路径映射+Gulp复制依赖（方案2的落地）

1. 调整tsconfig.json：
   添加paths配置，让TypeScript在检查类型时从node_modules读取ethers的类型定义，同时保留浏览器兼容的模块设置：

   {
       "compilerOptions": {
           "noImplicitAny": true,
           "noEmitOnError": true,
           "removeComments": false,
           "sourceMap": true,
           "target": "ESNext",
           "module": "ES2020", // 改为浏览器更易支持的模块格式
           "moduleResolution": "Node", // 保留以方便类型查找
           "paths": {
               "ethers": ["./node_modules/ethers/lib/index.d.ts"] // 映射类型文件路径
           }
       },
       "exclude": [
           "wwwroot",
           "node_modules"
       ],
       "compileOnSave": true
   }
   

2. 修改Gulp任务复制EthersJS到wwwroot：
   在gulpfile.js中添加任务复制ethers的浏览器兼容版本，同时调整默认任务执行顺序：

   /// <binding AfterBuild='default' Clean='clean' />
   var gulp = require("gulp");
   var del = require("del");
   var paths = {
       scripts: ["Scripts/**/*.js", "Scripts/**/*.ts", "Scripts/**/*.map"],
   };
   
   gulp.task("clean", function () {
       return del(["wwwroot/Scripts/**/*"]);
   });
   
   // 新增任务：复制ethers的浏览器版本（UMD格式适配全局引入或模块加载）
   gulp.task("copy-ethers", function () {
       return gulp.src("node_modules/ethers/dist/ethers.umd.min.js")
           .pipe(gulp.dest("wwwroot/Scripts"));
   });
   
   gulp.task("default", gulp.series("clean", "copy-ethers", function () {
       return gulp.src(paths.scripts).pipe(gulp.dest("wwwroot/Scripts"));
   }));
   

3. 修改TS文件的导入路径：
   把导入改为指向wwwroot中的ethers文件，TypeScript会通过paths配置自动关联到node_modules中的类型：

   // 路径请根据你的TS文件实际位置调整，确保运行时能正确加载
   import { ethers } from "../wwwroot/Scripts/ethers.umd.min.js";
   
   export class EthService {
       pro: ethers.providers.BaseProvider;
       constructor() {
           const pro = this.pro = new ethers.providers.WebSocketProvider("your-ws-url");
       }
       async getBlockNumberAsync() {
           return await this.pro.getBlockNumber();
       }
   }
   

路径二：全局引入+类型声明（适合简单场景）

如果你的项目不需要模块化导入，也可以直接在页面中通过<script>标签引入ethers，然后在TS中声明全局类型：

1. 在Razor页面中引入脚本：

   <script src="~/Scripts/ethers.umd.min.js"></script>
   

2. 在TS文件中添加全局类型声明：

   // 声明全局的ethers变量，并关联其类型
   declare const ethers: typeof import("ethers");
   
   export class EthService {
       pro: ethers.providers.BaseProvider;
       constructor() {
           const pro = this.pro = new ethers.providers.WebSocketProvider("your-ws-url");
       }
       async getBlockNumberAsync() {
           return await this.pro.getBlockNumber();
       }
   }
   

   这种方式不需要修改moduleResolution，TS会自动从node_modules中读取ethers的类型定义。

关于Triple-Slash Directives的作用 #

三斜线指令是TypeScript的特殊注释，用于告知编译器额外信息：

• /// <reference types="ethers" />：强制TS加载ethers的类型定义文件，相当于在tsconfig中包含该类型，适合未通过import引入模块但需要类型支持的场景。
• /// <reference path="./some-file.ts" />：手动指定依赖的TS文件，多用于旧版TS项目。

在你的场景中，如果用路径映射或全局声明的方式，其实不需要额外使用三斜线指令，但如果遇到类型找不到的情况，可以在TS文件顶部添加/// <reference types="ethers" />来强制加载类型。

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