升级Angular 4至Angular 6后JQuery插件无法调用问题求助

我之前也碰到过类似的升级后jQuery插件罢工的情况，核心原因是Webpack 4的模块封装机制和Angular 6的依赖处理和旧版本有差异，导致jQuery插件找不到全局的$/jQuery对象。下面是一步步的解决办法：

1. 配置Webpack的ProvidePlugin全局注入jQuery #

Webpack 4默认不会将模块暴露到全局作用域，而像datepicker、select2这类插件都是依赖全局的jQuery或$变量的。你需要在webpack.config.js里添加ProvidePlugin配置，把jQuery挂载到全局：

const webpack = require('webpack');

module.exports = {
  // ... 其他配置
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    })
  ]
};

这个配置会让Webpack在每个模块里自动注入$和jQuery，不需要手动import，同时也能让依赖全局变量的插件正常识别到jQuery。

2. 调整vendor.ts的导入顺序（并简化） #

虽然你当前的导入顺序是对的（先导入jQuery，再导入插件），但结合上面的ProvidePlugin配置，其实可以不用在组件里单独import jQuery了。不过要确保vendor.ts里的导入顺序不变：

import 'jquery';
import 'bootstrap/dist/js/bootstrap';
import 'select2/dist/js/select2';
import 'jquery-ui/ui/widgets/datepicker';

注意：如果你的Webpack配置里已经用了ProvidePlugin，组件里的import * as $ from 'jquery'可以删掉，直接使用全局的$即可，避免重复导入导致的实例不一致问题。

3. 安装对应的TypeScript类型定义 #

为了避免TypeScript报错（比如提示$不存在或者datepicker不是函数），需要安装相关的类型包：

npm install @types/jquery @types/jquery-ui @types/select2 --save-dev

安装后，TypeScript就能识别这些插件的方法，不会再出现类型检查错误。

4. 检查Webpack的mode配置（关键） #

Webpack 4新增了mode配置项（development或production），不同模式下的模块优化策略不同。如果是production模式，Webpack可能会对模块进行tree-shaking或者压缩，导致jQuery插件的代码被误删。你可以尝试先把mode设为development测试是否正常，或者在插件导入时添加注释禁止tree-shaking：

// webpack不进行tree-shaking
import 'select2/dist/js/select2';
import 'jquery-ui/ui/widgets/datepicker';

或者在webpack配置里添加sideEffects: true到package.json或者module.rules里，告诉Webpack这些模块有副作用，不能被tree-shaking移除：

// package.json里添加
"sideEffects": [
  "*.js",
  "*.css"
]

5. 验证jQuery实例一致性 #

有时候会出现多个jQuery实例的问题（比如组件里import的和插件依赖的不是同一个），你可以在组件里打印$.fn.jquery和插件初始化前打印$.fn.jquery，看看版本是否一致。如果不一致，说明有重复导入，需要清理依赖或者调整Webpack配置。

按照上面的步骤来，应该就能解决datepicker和select2找不到的问题了。

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