Webpack无法导入部分npm库，从Grunt迁移至Webpack遇技术问题

刚从Grunt转Webpack的时候确实容易踩模块依赖的坑，毕竟Grunt只是简单把文件拼在一起，而Webpack是基于模块化机制来打包的。针对counterup这类jQuery插件，给你几个可行的解决思路：

1. 先确保依赖安装完整 #

counterup是jQuery插件，首先要把核心依赖装全：

npm install counterup jquery --save

如果你的counterup版本需要waypoints（有些旧版本依赖它触发滚动计数），也得补上：

npm install waypoints --save

2. 全局注入jQuery（适配老插件的常用方案） #

很多jQuery插件默认依赖全局的$或jQuery对象，Webpack默认不会把模块暴露到全局，所以可以用ProvidePlugin自动注入：

修改你的webpack.config.js：

const webpack = require('webpack');

module.exports = {
  // ...你的其他Webpack配置（entry、output等）
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
};

然后在你的业务JS文件里直接导入counterup即可：

// 如果需要waypoints，先导入它
import 'waypoints/lib/jquery.waypoints.js';
// 导入counterup
import 'counterup/jquery.counterup.js';

// 现在就可以正常调用插件了
$('.counter').counterUp({
  delay: 10,
  time: 1000
});

3. 模块化局部引入（不污染全局） #

如果不想把jQuery暴露到全局，也可以手动在模块中挂载counterup：

import $ from 'jquery';
import waypoints from 'waypoints/lib/jquery.waypoints.js';
import counterUp from 'counterup/jquery.counterup.js';

// 把counterup挂载到当前的jQuery实例上
counterUp($);

// 使用插件
$('.counter').counterUp();

4. 排查常见坑点 #

• 注意导入路径：有些npm包的入口文件可能不是你想的那个，比如counterup的主文件是jquery.counterup.js，不是根目录的index.js，所以要写全路径
• 版本兼容：如果是较新的Webpack（比如Webpack 5+），ProvidePlugin的用法不变，但如果遇到模块解析问题，可以检查resolve.alias是否配置了jQuery的别名：

module.exports = {
  resolve: {
    alias: {
      'jquery': require.resolve('jquery')
    }
  }
};

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