TypeScript（target:es6、module:amd）下模块扩展导入方法及问题求助

我之前帮不少开发者处理过这类问题——用AMD模块系统结合ES6目标编译时，这类给全局库打补丁的扩展经常会因为加载顺序、模块配置或类型定义的问题失效。下面一步步给你拆解解决方案：

1. 先补全TypeScript类型定义 #

首先别忽略类型支持，这不仅能避免编译报错，还能让IDE识别扩展后的方法：

• 针对Knockout Validation：npm install @types/knockout @types/knockout-validation --save-dev
• 针对jQuery UI：npm install @types/jquery @types/jquery-ui --save-dev

2. 调整tsconfig.json的关键配置 #

你的基础配置是target: es6和module: amd，还需要补充几个选项来适配AMD模块的导入逻辑：

{
  "compilerOptions": {
    "target": "es6",
    "module": "amd",
    "moduleResolution": "node", // 让TS能正确解析node_modules里的AMD模块
    "allowSyntheticDefaultImports": true, // 支持无默认导出模块的导入语法
    "esModuleInterop": true, // 兼容UMD/AMD模块的导入规则
    "baseUrl": "./", // 根据你的项目结构调整，确保模块路径正确
    "paths": {
      // 可选：如果模块不在默认路径，在这里映射（示例路径）
      "knockout": ["node_modules/knockout/build/output/knockout-latest"],
      "knockout-validation": ["node_modules/knockout-validation/dist/knockout.validation"]
    }
  }
}

3. 正确的导入顺序和语法 #

这类扩展的核心是给全局的ko或$对象注入方法，所以必须先导入主库，再导入扩展，而且不需要导入扩展的具体变量，只需要让模块执行即可：

示例：Knockout + Knockout Validation #

// 先导入Knockout主库
import * as ko from "knockout";
// 导入Validation扩展，它会自动给ko对象添加验证方法
import "knockout-validation";

// 现在可以正常使用验证功能了
const username = ko.observable("").extend({
  required: { message: "用户名不能为空" },
  minLength: 3
});

// 初始化验证规则
ko.validation.init({ grouping: { observable: true } });
const errors = ko.validation.group([username]);

示例：jQuery + jQuery UI #

// 先导入jQuery主库
import * as $ from "jquery";
// 导入jQuery UI扩展
import "jquery-ui";

// 现在可以调用UI组件方法了
$("#dragMe").draggable({
  containment: "parent"
});

4. 配置AMD加载器（比如RequireJS） #

因为你用的是module: amd，浏览器端需要用RequireJS来加载编译后的模块。在HTML里引入RequireJS并配置依赖：

<script src="path/to/require.js"></script>
<script>
require.config({
  paths: {
    "knockout": "node_modules/knockout/build/output/knockout-latest",
    "knockout-validation": "node_modules/knockout-validation/dist/knockout.validation",
    "jquery": "node_modules/jquery/dist/jquery",
    "jquery-ui": "node_modules/jquery-ui/dist/jquery-ui"
  },
  shim: {
    // 确保扩展在主库加载完成后再执行
    "knockout-validation": {
      deps: ["knockout"],
      exports: "ko"
    },
    "jquery-ui": {
      deps: ["jquery"],
      exports: "$"
    }
  }
});

// 加载你的主TS编译后的模块
require(["path/to/your/main-module"]);
</script>

为什么你之前改target到es5用require不行？ #

当你把target改成es5时，如果用的是CommonJS风格的同步require()，但模块系统是AMD，这会导致加载机制不兼容——AMD模块需要用RequireJS的异步require()回调，而不是CommonJS的同步语法。用TypeScript的import语句会自动编译成符合AMD规范的代码，所以不需要手动写RequireJS的回调。

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