Visual Studio - 引擎盖下(NPM/Typescript)

Posted

技术标签:

【中文标题】Visual Studio - 引擎盖下(NPM/Typescript)【英文标题】:Visual Studio - Under the hood (NPM/Typescript) 【发布时间】:2017-06-02 23:18:01 【问题描述】:

Visual Studio (2015) 如何与 NPM 和 Typescript 编译器 (tsc.exe) 等外部工具配合使用。?我想,在构建解决方案或项目时,一定有什么东西告诉 MSBuild 运行这些额外的工具。我想了解这个幕后操作。

【问题讨论】:

【参考方案1】:

这一切都取决于...

Visual Studio 有多种服务和功能在这里相互关联:

Language Services - Visual Studio 可以使用所谓的语言服务进行扩展,这些服务提供智能感知、语法分析、突出显示等。对于 javascript 和 Typescript,Microsoft 提供了提供此类信息的语言服务。 MsBuild - 大多数 Visual Studio 项目的下面都有一个 MsBuild 项目。如果您搜索您的程序文件目录,您会发现一个 MsBuild 文件夹,在该文件夹下有许多目标文件。这包括用于 Typescript 的一个,它将在构建期间转换您的 .ts 文件。这些目标文件要么直接使用exec MsBuild 任务来运行工具,要么以实现特定接口的 .NET 程序集的形式提供自定义 MsBuild 任务。这些任务可以自己执行所需的操作,也可以使用工具让其执行操作。 Roslyn - 对于 C# 和 VB.NET,项目的解析和源代码的后台编译由名为 Roslyn 的新编译器处理。这实际上在您键入时在后台运行,并且具有非常强大的内存模型,用于您项目中的所有代码。 Roslyn 还以分析器和重构操作的形式支持加载项,这些加载项既可以为用户提供常见错误的反馈,也可以提供自动重写/更改代码的方法。 Task Runner - Visual Studio 任务运行器是 Visual Studio 的插件,最初作为扩展发布,现在是 Visual Studio 的一部分。它对 IDE 中的事件(构建、测试等)做出反应,并可以在您的 package.json 或 grunt 或 bower 等脚本中关联操作。该插件将确保您的脚本命令在构建期间的正确时间点执行。 Test Runners - Visual Studio 测试窗口也支持扩展,因此项目中的 Mocha 和 Chutzpah extension 将被选中,在测试执行期间,这些插件将被要求首先列出并随后执行测试。这些运行器充当一种代理,在执行后反馈测试列表及其状态。 Custom extensions - 一些供应商通过提供通用扩展来扩展 Visual Studio,还有许多其他方式。这些扩展可能包含上述任何元素,也可能只是在您工作时侦听 Visual Studio 生成的事件并对其做出反应。

【讨论】:

谢谢!我现在可以把这些点联系起来了。【参考方案2】:

如果您打开 .csproj,您可以看到对打字稿项目的引用 使用文本编辑器(或从 Visual Studio:卸载项目,右键单击项目并选择编辑 myproject.csproj)

你会看到打字稿资源:

<ItemGroup>
    <TypeScriptCompile Include="src\config.ts" />

构建目标:

<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />

外部工具,在 Tools/Options 中配置:

【讨论】:

以上是关于Visual Studio - 引擎盖下(NPM/Typescript)的主要内容,如果未能解决你的问题,请参考以下文章

Visual Studio 中设置npm

Visual Studio 2017 外部工具 npm 不工作

Visual Studio 无法识别导入的 npm 包?

在 Visual Studio Code 中从 NPM 包自动导入

如何在 Visual Studio 2019 中使用具有功能的 .net core + typescript + webpack + npm 模块?

为虚幻引擎4设置Visual Studio