visual-studio - 如何在 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 文件夹，“源”.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>
}

重新加载，现在我得到:未捕获错误:尚未为上下文加载模块名称“vue”:_。使用 require([]) 引用 this但该代码现在似乎与 .ts 文件的外观有所不同。

ES6 Test2.ts 文件似乎是人们编码的方式。它希望我在上面的链接中编写 require 语句的方式似乎更加冗长，并且没有出现在我看到的任何代码示例中。所以我一定是错过了什么。如果有帮助，Vue 和 Require 下载来 self 的 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

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

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

注意:以下段落经过编辑

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

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

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