如何使用RequiresJs加载打字稿模块（asp.net mvc / Visual Studio环境）

Question

假设我有2个文件：test1.ts和test2.ts。这是test1的内容：

export const x = 1

这是test1的内容：

import { x } from './test2'

alert(x);

运行应用程序时，出现以下错误：Uncaught ReferenceError: exports is not defined at test1.js:2。

根据其他帖子，此错误是由于Web浏览器不支持export和而引起的require(...)。为了解决这个问题，解决方案之一就是使用RequireJs之类的东西。

所以我读了一些书。这篇文章对我来说是最容易理解的。

1. 我已经在_Layout.cshtml文件中添加了这一行。

   <script src="~/Scripts/require.js"></script>

2. 创建一个配置文件。

   requirejs.config({
      baseUrl: '/Scripts/js'
   });
   

3. 我已经将test1和test2放在/Scripts/js文件夹中。

4. 运行该应用程序，但仍然出现相同的错误：Uncaught ReferenceError: exports is not defined at test1.js:2。

如何使用RequireJs修复错误？

感谢您的帮助。

编辑

解决方案不必是RequireJs，而是可以解决问题的任何方法。上有很多很棒的教程typescript，但是他们都假设人们正在使用node或angularjs。我所需要的只是向我的asp.net mvc应用程序添加一些打字稿。只要是一个文件，就可以了。现在，我想重用一些代码，因此将它们组织在不同的文件中。不幸的是，由于这个错误，我无法前进。我已经坐在那里三天了。

编辑2

如您所建议的@artem，我已将commonJs添加到amd中，

{
  "compilerOptions": {
     "module": "amd",
     "noImplicitAny": true,
     "removeComments": true,
     "preserveConstEnums": true,
     "sourceMap": true
 }

}

现在我得到这个错误。

Uncaught Error: Mismatched anonymous define() 
module: function (require, exports, CommonTypes_1) {
//...

似乎这个问题正在处理相同的问题。我应该将此代码放在一个新文件中吗？

Answer 1

我知道这有点老了，但刚刚遇到了这个问题。我是这样解决的。

这篇文章非常有帮助： https://volaresystems.com/blog/post/2014/05/27/Adding-RequireJS-to-an-ASPNET-MVC-project

首先，将 require.js 添加到您的 BundleConfig.cs 中。我的看起来像这样：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
    "~/Scripts/jquery-{version}.js",
    "~/Scripts/require.js"));

接下来，确保 _Layout.cshtml 在捆绑之后呈现“脚本”部分。我的看起来像这样：

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

然后在您的视图中渲染脚本部分，如下所示。我的 Index.cshtml 看起来像这样：

@section scripts
{
    <script>
        require(["Scripts/Init"],
            function (Init) {
                Init.Start();
            }
        );
    </script>
}

我的 ~/Scripts/Init.ts 文件如下所示：

import * as DataBind from "./DataBind"

export function Start() {
    DataBind.SetAllDatabinds(null);
}

从那里，您可以根据需要加载所有模块。我发现重要的是 TypeScript 文件中不要有任何“松散代码”（即示例中的“alert(x)”）。一切都应该出口。