在 Asp.Net Core 应用程序中从 TypeScript 引用 node_modules

Posted 2023-03-13

【中文标题】在 Asp.Net Core 应用程序中从 TypeScript 引用 node_modules

【英文标题】：Refering to node_modules from TypeScript in an Asp.Net Core app

【发布时间】：2021-05-09 03:20:03

【问题描述】：

我正在构建一个使用 npm 和 TypeScript 的简单 ASP.NET Core 应用程序。我的项目结构如下：

/ root
  | wwwroot
    | js
      | AutoGenerated         // <-- TS output goes here
    | view
      | index.html            // <-- imports app.js from "AutoGenerated"
  | scripts
    | app.ts
  | node_modules
    | ..
    | ..
  | package.json
  | tsconfig.json
  | Startup.cs
  | Program.cs

tsconfig 设置为 "moduleResolution":"Node"。所有其他配置都是相当标准的，所以现在我不会在此处包含它，以免混乱大局。

在我的app.ts 中，我想引用通过节点下载的包之一，所以我添加了以下行：

import  SomeClass  from "@module/downloadedModule";

上面的导入解析为"/node_modules/@module/downloadedModule"，这正是我需要的。整个项目按预期编译并在/wwwroot/js/AutoGenerated/下生成app.js文件。

问题是生成的 JS 文件仍然包含对 node_modules 的引用：

import  SomeClass  from "@module/downloadedModule";

这没有意义，因为我的应用程序只提供wwwroot 下的文件。

我在 SO:Cannot import libraries from Node_Modules to ASP.NET CORE APP 上发现了一个类似的问题，作者建议扩展静态文件处理程序以包含“node_modules”，但我不想在我的应用程序中这样做。

我想到的潜在解决方案（虽然我不确定它们是否适用）： 1.) 将所需文件从 node_modules 映射到例如/wwwroot/dependencies和TS编译时修改JS文件中的导入路径。 2.) 将我的 TS 文件和所需的 node_modules 依赖项捆绑到一个独立的 JS 文件中。 3.) 任何其他允许我从我的 html 使用 app.js 并且不需要大量包的东西。

【问题讨论】：

捆绑所有模块和包是解决此问题并为用户提供最佳用户体验的最佳选择。如果您不想处理这些包，您通常可以使用类似 unpkg.com

的服务来使用模块的 CDN 版本

感谢您的回复。我想我会去捆绑，因为我在我的产品环境中我不能依赖任何外部资源。我发现 webpack 可以很好地处理捆绑。还有其他值得推荐的工具吗？

我会推荐 Webpack 或 Parcel 来完成这项工作。您可以在线找到很好的教程、文档和示例配置。

@evelynhathaway 找到了，谢谢。你能写一个关于你的 cmets 的简短摘要作为我的问题的答案，以便我接受吗？

【参考方案1】：

捆绑您所有的 npm 包和自定义模块是您最好的选择。如果您将整个 node_modules 目录包含在您的 wwwroot 中，您将提供大量文件，因此解析导入 node_modules 是不切实际的。

如果您想要一个简单的系统，您可以在 unpkg.com 等服务上使用您的 npm 包的 CDN 版本。

但是，我会推荐像 Webpack 或 Parcel 这样的打包工具来完成这项工作。您可以在线为您的特定框架找到好的教程、文档和示例配置。 Webpack's Getting Started 是开始研究捆绑程序配置的好地方。