ASP.NET项目添加TypeScript模块时遇'Uncaught SyntaxError'问题求助

项目技术栈 #

• Visual Studio 2022
• TypeScript 4.9
• ASP.NET
• jQuery

原有代码示例 #

EmployeeSearch.Control.ts

class EmployeeSearchControl {
  static Name = 'Test Name';
}

EmployeeSearch.Component.ts

class EmployeeSearchComponent extends EmployeeSearchControl {
  public static GetName() {
     // code
  }
}

修改后代码示例 #

为代码添加模块支持后：
EmployeeSearch.Control.ts

export class EmployeeSearchControl {
  static Name = 'Test Name';
}

EmployeeSearch.Component.ts

import { EmployeeSearchControl } from "./EmployeeSearch.Controls";
export class EmployeeSearchComponent extends EmployeeSearchControl {
  public static GetName() {
     // code
  }
}

运行错误 #

代码可正常编译，但浏览器运行时抛出：

Typescript - Uncaught SyntaxError: Unexpected token 'export'

相关配置 #

Bundle Config #

bundles.Add(new ScriptBundle("~/Scripts/Employee")                 
             .IncludeDirectory("~/App/Modules/Employee/", "*.js")
        );

.aspx页面 #

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <%: Scripts.Render("~/Scripts/Employee") %>
</asp:Content>

TS Config #

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es6",
    "module": "esnext"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

问题 #

请问我遗漏了什么？如何在现有TypeScript代码中添加模块？我的项目没有Node.js依赖，恳请提供建议或解决方向。

解决方案 #

错误原因 #

当前TypeScript配置输出ES模块（module: "esnext"），但ASP.NET的ScriptBundle仅做简单的文件合并，不会处理模块依赖；同时浏览器默认无法直接识别ES模块语法（即便给脚本加type="module"，合并后的多模块文件依然会因重复import/export语法报错）。

方案1：使用TypeScript命名空间（无额外依赖） #

这是最贴合现有项目的方案，无需引入任何第三方工具，通过命名空间实现代码模块化组织，编译后生成全局变量，完全兼容原有ScriptBundle的加载方式。

1. 修改TS文件为命名空间格式：
   EmployeeSearch.Control.ts

namespace EmployeeSearch {
    export class EmployeeSearchControl {
        static Name = 'Test Name';
    }
}

EmployeeSearch.Component.ts

namespace EmployeeSearch {
    export class EmployeeSearchComponent extends EmployeeSearchControl {
        public static GetName() {
            // code
        }
    }
}

2. 调整TS Config：
   将module设为"none"或保留"esnext"均可，若需合并输出单个文件，可添加outFile选项：

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es6",
    "module": "none",
    "outFile": "./wwwroot/Scripts/Employee/employee-bundle.js" // 合并所有TS代码到单个JS文件
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

3. 更新Bundle Config：
   若使用outFile合并，直接引用合并后的文件；否则保持原IncludeDirectory配置即可：

bundles.Add(new ScriptBundle("~/Scripts/Employee")                 
             .Include("~/wwwroot/Scripts/Employee/employee-bundle.js")
        );

方案2：使用AMD模块（需引入RequireJS，无Node依赖） #

若想保留模块风格的代码组织，可将TypeScript编译为AMD格式，配合RequireJS加载模块，无需Node.js环境支持。

1. 修改TS Config：

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5", // 兼容更多浏览器
    "module": "amd", // 编译为AMD模块格式
    "outFile": "./wwwroot/Scripts/Employee/employee-bundle.js" // 合并所有模块到单个文件
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

2. 引入RequireJS：
   下载require.js脚本放到项目Scripts目录，在aspx页面添加加载逻辑：

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script src="~/Scripts/require.js"></script>
    <%: Scripts.Render("~/Scripts/Employee") %>
    <script>
        // 启动模块加载，加载完成后可访问模块内的类
        require(['employee-bundle'], function() {
            // 示例：调用模块内方法
            // EmployeeSearch.EmployeeSearchComponent.GetName();
        });
    </script>
</asp:Content>

3. 更新Bundle Config：
   仅引用合并后的AMD模块文件：

bundles.Add(new ScriptBundle("~/Scripts/Employee")                 
             .Include("~/wwwroot/Scripts/Employee/employee-bundle.js")
        );

内容的提问来源于stack exchange，提问作者JGV