Visual Studio [不是代码] 2019 中带有 TypeScript 和 Node（或 ESM）模块的 ASP.NET 5（核心）网站？

Posted 2023-03-13

【中文标题】Visual Studio [不是代码] 2019 中带有 TypeScript 和 Node（或 ESM）模块的 ASP.NET 5（核心）网站？

【英文标题】：ASP.NET 5 (Core) Website with TypeScript and Node (or ESM) modules in Visual Studio [not Code] 2019?

【发布时间】：2021-09-27 04:06:59

【问题描述】：

所以我跟随this guide 在 ASP.NET 5 网站项目（使用 Razor 页面）中设置 TypeScript。我想用 Node 模块输入 TypeScript，而不是仅仅导入为 any。

现在我想添加一个 Node 模块，比如 EthersJS，所以我有：

    "dependencies": 
        "ethers": "^5.4.1"
    

这段代码无法编译：

import  ethers  from "ethers";

export class EthService 

    pro: ethers.providers.BaseProvider;

    constructor() 
        const pro = this.pro = new ethers.providers.WebSocketProvider("");
    

    async getBlockNumberAsync() 
        return await this.pro.getBlockNumber();
    

除非我将"moduleResolution": "Node" 添加到tsconfig.json。显然这实际上不会在浏览器中运行。

我应该如何设置它以便以某种方式编译 Node 模块？如果我能做到以下任何一个，我认为问题可以解决：

使 TypeScript/Gulp/MSBuild 更改 import ethers from "ethers"; 为正确的路径（我可以将编译后的 lib 文件手动复制到 wwwroot 中）。

手动将导入路径设置为 import ethers from "path/to/compiled/ethers.js";，但我需要以某种方式告诉 TypeScript ethers 输入来自 ethers Node 模块。

更新：我认为第三种可能性也非常好，如果我可以像这样声明导入（我只会将 ESM 文件添加到全局范围中）：

declare import  ethers  from "ethers";

以上选项是否可行？或者有什么办法吗？谢谢。

注意：我知道有Triple-Slash Directives，它可能会解决我的问题，但我还不明白他们在做什么。

当前gulpfile.js：

/// <binding AfterBuild='default' Clean='clean' />
/*
This file is the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
*/
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/**/*"]);
);
gulp.task("default", function () 
    gulp.src(paths.scripts).pipe(gulp.dest("wwwroot/Scripts"));
);

tsconfig.json：

    "compilerOptions": 
        "noImplicitAny": true,
        "noEmitOnError": true,
        "removeComments": false,
        "sourceMap": true,
        "target": "ESNext",
        "module": "ESNext",
        "moduleResolution": "Node"
    ,
    "exclude": [
        "wwwroot",
        "node_modules"
    ],
    "compileOnSave": true

【参考方案1】：

我可以通过使用独立的 ethers.js 脚本文件将 ethers 命名空间暴露给全局范围来解决问题：

<script defer src="/libs/ethers.umd.min.js" asp-append-version="true"></script>

现在你需要告诉 TypeScript 在全局范围内有一个ethers“事物”（命名空间/模块）。感谢this article，我找到了解决方案。创建一个.d.ts 文件（任何都可以，我将其命名为globals.d.ts）：

import  ethers as eth  from "ethers";

declare global 

    // @ts-ignore: export typing
    export  eth as ethers ;

现在您可以在任何地方使用ethers，而无需任何声明。例如我的整个EthService.ts 文件：

export class EthService 

    pro: ethers.providers.WebSocketProvider;

    init(server: string) 
        this.pro = new ethers.providers.WebSocketProvider(server);
    

    async getBlockNoAsync() 
        return await this.pro.getBlockNumber();