Ionic 3项目导入依赖jQuery的外部JS库遇“jQuery未定义”问题

兄弟，我之前也碰到过几乎一模一样的问题！你这个情况的核心原因是：虽然你通过npm install jquery --save装了jQuery，而且在组件里能正常使用，但Ionic 3基于Angular的构建系统（Webpack）会把jQuery封装在模块作用域里，全局window对象上并没有暴露jQuery或$变量，而你的myLibrary.js是直接在全局环境下执行的，它找不到预期的全局jQuery，所以才会报错。

下面给你几个可行的解决思路：

方法一：通过构建配置把jQuery暴露到全局 #

这是最稳妥的方式，让构建工具提前把jQuery注入到全局环境：

1. 找到项目根目录下的.angular-cli.json文件（Ionic 3项目默认自带这个配置文件）
2. 找到apps数组里的第一个对象，在scripts数组中添加jQuery的路径：

"apps": [
  {
    // 其他配置项...
    "scripts": [
      "../node_modules/jquery/dist/jquery.min.js"
    ]
  }
]

3. 重启你的Ionic开发服务（ionic serve），这样Webpack会在打包时先把jQuery加载到全局，之后再加载你的myLibrary.js，它就能顺利找到jQuery变量了。

方法二：手动把jQuery挂载到window对象 #

如果不想修改构建配置，也可以在Angular的入口文件里手动把jQuery暴露到全局：

1. 打开src/app/app.component.ts
2. 先导入jQuery，然后在组件的初始化钩子（比如ngOnInit）里把它挂载到window：

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: 'app.html'
})
export class MyApp implements OnInit {
  constructor() {}

  ngOnInit() {
    // 声明window为any类型避免TypeScript类型报错
    declare var window: any;
    window.jQuery = $;
    window.$ = $;
  }
}

这样你的myLibrary.js在全局环境下就能访问到jQuery变量了。

方法三：调整脚本加载顺序（辅助验证） #

你之前加defer没用，是因为defer只是让脚本在DOM加载完执行，但此时jQuery还被锁在模块里没暴露到全局。可以试试把myLibrary.js的<script>标签放到index.html的body最底部，同时确保前面的方法已经把jQuery暴露到全局，这样能进一步确保加载顺序的正确性。

另外补充一句：你首页的$(document).ready能正常工作，是因为那段代码是在Angular组件内部执行的，你肯定已经在组件里导入了jQuery（比如import * as $ from 'jquery'），所以组件作用域里能拿到jQuery，但全局环境还是没有~

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