如何在 Visual Studio 2017 年配置 TypeScript 和 Require

Question

虽然这里说的是 VueJS。我怀疑它也可以与任何其他 JavaScript 语言一起使用，例如 Angular 或 React。

我一直在学习 Vue.js 并且热爱它。知道我有一个更大的应用程序，而且我想开始使用 TypeScript。现在似乎是时候这样做了。此时我对 Vue 有了很深的了解，但找不到任何关于如何设置 TS 并实际将其设置为运行.

的文档（超过 2 周的时间找到确切的最低要求）

这是一些 HTML 和 Vue 代码的示例，仅使用脚本标签和普通 JavaScript。

HTML

<div id="app">
  <h4>{{ Value }}</h4>
</div>

@section Scripts {
  <script src="~/lib/vue/vue.js"></script>
  <script src="~/js/test.js"></script>
}

JavaScript - test.js

var app = new Vue({
  el: "#app",
  data: {
    Value: "Hello there"
  }
});

这有效并在页面上生成 Hello there。

配置 TypeScript

这看起来很简单，我的 js 文件夹下有一个 TypeScripts 文件夹，"source" .ts 文件将位于该文件夹中。输出文件将作为 .js 文件位于 js 文件夹中。这是我位于 TypeScripts 文件夹中的 tsconfig.json：

{
  "compileOnSave": true,
  "compilerOptions": {
    "noEmitOnError": true,
    "noImplicitAny": false,
    "outDir": "../",
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "module": "amd"  // <-- Should this be used?
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

这有效，每次保存 .ts 文件时我都会得到 .js 文件。

但是，现在我想以我在视频和在线代码中看到的方式将 Vue 合并到 .ts 中。以下代码编译无误：

JavaScript - ES6 - test2.ts

const Vue = require("vue")
const app = new Vue({
  el: "#app",
    data: {
      Value: "Hello there"
    }
})

现在我将 HTML 更新为以下内容：

HTML

<div id="app">
  <h4>{{ Value }}</h4>
</div>

@section Scripts {
  <script src="~/js/test2.js"></script>
}

我重新加载页面，但我得到的只是 {{ Value }} 标记。加上 JavaScript 错误：Uncaught ReferenceError: require is not defined.

这看起来很简单，我想我只是将以下行添加到脚本部分并删除对 test2.js 文件的单个引用：

@section Scripts {
  <script src="~/lib/require.min.js" data-main="/js/test2.js"></script>
}

重新加载，现在我得到：Uncaught Error: Module name "vue" has not been loaded yet for context: _. Use require([]) 引用了 this 但该代码现在似乎与 .ts 文件的外观不同。

ES6 Test2.ts 文件似乎是人们编码的方式。它希望我在上面的 link 中编写 require 语句的方式似乎要冗长得多，而且在我见过的任何代码示例中都没有出现。所以我一定是错过了什么。如果有帮助，Vue 和 Require 下载来自我的 package.json (npm) 文件，如下所示：

"devDependencies": {
  "@types/node": "^9.4.7",
  "requirejs": "^2.3.5",
  "vue": "^2.5.16"
  ...
}

我的 bundleconfig.json 将它们放在它们应该去的 wwwroot/lib 文件夹中。

{
  "outputFileName": "wwwroot/lib/require.min.js",
  "inputFiles": ["node_modules/requirejs/require.js"]
},
{
  "outputFileName": "wwwroot/lib/vue/vue.js",
  "inputFiles": [ "node_modules/vue/dist/vue.js" ]
}

我不得不相信我离得到它是如此之近。能够在更现代的 ES 版本中编写代码很棒。我只是找不到合适的拼图来拼凑它们。

Answer 1

上面的主要问题是因为在第一个 "plain JavaScript" 示例中，您根本没有使用模块。您直接在页面中加载 Vue 库，这会创建全局 Vue 对象，然后您的脚本是全局的（即不是模块）并直接引用 Vue 对象。

对于 test2.ts 文件，你提到这是 ES6，但你在 Vue 库中 'require'。这意味着代码现在尝试使用模块，但不是 ES6 模块，而是 CommonJS 模块。（你会在哪里写类似 import Vue from "vue" 的东西）。这意味着它将在运行时需要一个加载程序（例如，您尝试使用的 require.js 库），如果配置正确，可以工作，但通常您需要类似的东西WebPack 将 Vue.js 和你的代码打包成一个独立的包，页面在运行时加载。

注意：已编辑以下段落

我创建了一个示例 ASP.NET 核心项目，展示了如何配置 TypeScript 和 WebPack 以通过脚本标记使用全局 Vue.js 对象为每页生成一个包。我已经在上面放了一份详尽的自述文件来解释所有的工作原理。你可以在 https://github.com/billti/SimpleVueApp 看到它。如果大家有进一步的反馈，我会继续更新，做到better/clearer.

也就是说，当您深入 Vue 时，需要注意一个 Visual Studio 限制。目前没有对 .vue 文件的丰富支持（在文档中称为 "single file components"）。我所说的 "rich support" 的意思是，这些文件具有我们现在无法推断的特定上下文以提供良好的 IntelliSense（即完成列表、错误、工具提示等）。此外，Visual Studio 中的 HTML 文件（这是你打开 .vue 文件的方式）也只支持 <style> 标签中的普通 CSS 和普通 JavaScript 目前在 <script> 标签中，而通过正确的 Vue 和 WebPack 设置，您可以直接在样式标签中编写 LESS 代码，并直接在脚本标签中编写 TypeScript。我的团队目前正在研究这个问题，并希望在不久的将来对此进行改进。

如果有任何不清楚的地方，请告诉我。很乐意进一步提供帮助。

如何在 Visual Studio 2017 年配置 TypeScript 和 Require

How To Configure TypeScript and Require in Visual Studio 2017

visual-studio

requirejs

typescript