Webpack 无法导入某些 npm 库

Question

我正在将我的整个设置从 grunt 切换到 webpack，我之前在我的 grunt 文件中包含这样的库。

https://www.npmjs.com/package/counterup

module.exports = function(grunt) {

  grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
      watch: {
          scripts: {
              files: ['js/*.js'],
              tasks: ['concat:dist1', 'uglify:dist2min']
          },
      },
      concat: {
          options: {
              separator: '\n',
              sourceMap: true
          },
          dist1: { 
              src: [
                  'node_modules/counterup/jquery.counterup.js',
              ],
              dest: 'dist/dist.js'
          },
      },
      uglify: {
          dist2min: {
              options: {
                  mangle: false,
                  drop_console: false
              },
              files: {
                  'dist/bundle.min.js': ['dist/bundle.js']
              }
          }
      },
  });

  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.registerTask('default', ['watch', 'concat:dist1', 'concat:dist2', 'uglify:dist2min', 'cssmin:dist3min']);

};

这很好，我只是将代码包含在我的文档中并且可以使用它。

我是 webpack 的新手，我正在使用 import 语句尝试以下操作。

import $ from 'jquery';
import 'counterup'; 

$(document).ready(function() {

    $('.counter').counterUp({
    delay: 10,
    time: 1000
});

});

我明白了

您可能需要适当的加载程序来处理此文件类型。

我看过几个不同的教程，但不知道我做错了什么我还尝试了几个不同的计数库，结果都一样。

谁能告诉我哪里出错了？

谢谢

Answer 1

我不知道是什么问题，但是countUp jQuery 插件太旧了，太久没有更新了。
您可以改用countUp.js。 这是countUp.js 和Webpack 4 的工作示例。 webpack.config.js

const path = require('path');
const HtmlPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const CleanPlugin = require('clean-webpack-plugin');
module.exports = {
  mode: 'production',
  entry: {
    app: './src/index.js',
  },
  output: {
    filename: '[name].[hash].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new CleanPlugin(['./dist']),
    new HtmlPlugin({
      title: 'test',
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ],
};

src/index.js

import CountUp from 'countup.js';
$('body').html('<span id="counter">1,234,567.00</span>');
var numAnim = new CountUp('counter', 24.02, 99.99);
if (!numAnim.error) {
  numAnim.start();
} else {
  console.error(numAnim.error);
}