如何在Angular5应用中本地测试自定义jQuery插件

嘿，我来帮你搞定这个问题——只在index.html里加脚本标签其实不够哦，还得适配Angular的TypeScript模块机制，不然大概率会遇到“变量未定义”的报错。下面是一步步的实操指南：

1. 先把插件文件放到项目里（更稳妥的做法） #

把C://myPlugin里的插件文件（比如myPlugin.js）和它依赖的jQuery（如果有的话）复制到Angular项目的src/assets/plugins文件夹下。这么做是为了避免本地绝对路径带来的跨域问题，也符合Angular的资源管理规范。

要是你不想复制文件，也可以直接用绝对路径，但得额外配置本地开发服务器的跨域规则，不如直接复制来得省心。

2. 在index.html中引入脚本 #

打开src/index.html，在</body>闭合标签之前添加脚本引用，注意依赖顺序（比如jQuery要在你的插件之前加载）：

<!-- 先引入jQuery（如果插件依赖它） -->
<script src="assets/plugins/jquery.min.js"></script>
<!-- 再引入你的自定义插件 -->
<script src="assets/plugins/myPlugin.js"></script>

3. 告诉TypeScript全局变量的存在 #

因为Angular用TypeScript开发，它默认不知道你在全局引入的插件变量，所以得手动声明类型：

• 如果项目里没有src/typings.d.ts文件，就新建一个；
• 在这个文件里添加全局变量声明，替换成你插件实际暴露的全局变量名：

declare var myPlugin: any;
// 如果插件是挂载在jQuery原型上的（比如$('#xxx').myPlugin()），可以不用单独声明jQuery，不过保险起见也可以加：
// declare var $: any;

4. 在组件中调用插件 #

插件通常需要操作DOM，所以最好在组件的ngAfterViewInit钩子（确保DOM已渲染完成）里调用：

import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-plugin-test',
  template: '<div id="plugin-container"></div>'
})
export class PluginTestComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // 假设你的插件是初始化某个DOM元素，比如这样调用
    $('#plugin-container').myPlugin({
      // 这里可以传插件的配置参数
      option1: 'value1'
    });

    // 如果插件是全局方法，直接调用即可
    // myPlugin.doSomething();
  }
}

补充说明 #

要是你只加了index.html的脚本标签，在组件里调用插件时TypeScript会直接报错，因为它识别不了全局变量——这就是为什么第三步的类型声明必不可少。另外，一定要确保插件的依赖（比如jQuery）先于插件加载，不然插件会因为找不到依赖而初始化失败。

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