Question

即使这涉及VueJS。我怀疑它也适用于任何其他JavaScript语言，如Angular或React。

我一直在学习Vue.js并喜欢它。知道我有更大的应用程序，我想开始使用TypeScript。现在似乎是时候这样做了。我现在已经牢牢掌握了Vue，但找不到任何关于如何设置TS并实际让它运行的文档（超过两周的时间找到确切的MINIMUM要求）。

以下是一些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文件夹，其中＆＃34; source＆＃34; .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。

这看起来很简单，我想我只是将以下行添加到Scripts部分并删除对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 文件似乎是人们编码的方式。它希望我在上面的链接中编写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

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

对于test2.ts文件，你提到这是ES6，但你在Vue库中'require'。这意味着代码现在正在尝试使用模块，但是使用CommonJS模块，而不是ES6模块。（你会在哪里写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。我的团队目前正在研究这个问题，并希望在不久的将来能够改进这一点。

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

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

1 个答案: