如何在ASP.NET MVC应用程序中将d3（v4）导入到脚本中？

我在Visual Studio 2015中构建了一个ASP.NET MVC应用程序，并包含了几个JavaScript库。 jquery旁边最重要的部分是d3（部分页面是v4和部分v3）。现在我深入了解Typescript（这对我来说很新颖）。如何在ASP.NET MVC应用程序中将d3（v4）导入到脚本中？

在我详细介绍之前，我的问题是：什么是从JS切换到TS的最简单方法，以及如何处理moment.js，d3.js和其他依赖项？

不幸的是，我无法将d3模块包含到我的.ts文件中。它说：“找不到模块D3”，如果试图包含它import * as d3 from 'd3';

我也尝试使用类型定义文件，通过手动将它们加载到项目中并通过npm（npm install @types/d3 --save-dev）下载它。他们都没有工作。可能我误解了它是如何工作或应该如何工作的。

在解决这个问题之后，我将不得不处理AMD或CommonJS。你能否提出一个简单的解决方案，不需要额外安装我的项目？

如果我不够精确（这是我的第一个问题），请多多提前致谢。

来源

2016-12-29 Chris

当您使用import * as d3 from 'd3';时，您需要的d3软件包仅在您的node_modules本地可用，因此不适用于浏览器。这就是依赖性错误（比如webpack），他们通过代码读取了所有必需的软件包，并将它们包含在构建输出中。但是，既然你说你是Node.js和TypeScript的新手，我必须警告你，使用这些工具配置一个项目可能会非常困难，学习曲线也相当陡峭。对您的项目需求进行研究，如果您发现某些时候需要它，请开始学习如何使用webpack ASAP，因为稍后调整您的代码可能会更加痛苦。

另一种选择是以旧式方式包含jQuery和D3.js（使用普通脚本标记）。在这种情况下，为了使TypeScript识别jQuery和D3，即使它们是分开加载的，我们使用我们所说的“环境声明”。这些声明公开了这些库的全局变量下的定义，因此TypeScript假定全局变量d3或$将在运行时可用，并将保存我们想要的库的API。因此不需要import。

谢天谢地，“@ types/jquery”和“@ types/d3”已包含这些全局声明。对于D3请确保您正在安装v4的定义npm i --save-dev @types/[email protected]

使用vanilla依赖项可能需要的另一个步骤是对您的tsconfig.json文件进行一些调整。下面是一个例子：以module和moduleResolution和pick the options，更好地适合你

{ 
    "compileOnSave": false, 
    "buildOnSave": false, 
    "compilerOptions": { 
    "target": "es5", 
    "module": "amd", 
    "moduleResolution": "classic", 
    "sourceMap": true, 
    "baseUrl": ".", 
    "types": [ 
     "d3", 
     "jquery" 
    ] 
    } 
}

留意。还请注意types选项，使TypeScript包括来自@types/d3和@types/jquery的环境声明。顺便说一句，这些选项适用于TypeScript 2.0。

说实话，我很难说出你需要做什么才能让每件事都能正常工作，因为每个环境都需要不同的设置。但我希望我至少能让你朝着正确的方向自己找出其他问题。祝你好运！

来源

2016-12-29 16:37:32 cvsguimaraes

嗨snolflake，非常感谢您花时间帮助我。事实上，你把我推向了正确的方向，并使得许多方面更加清晰。感谢你，它正在运行=）。非常感谢！ – Chris

如何在ASP.NET MVC应用程序中将d3（v4）导入到脚本中？

回答

相关问题