首页 > 解决方案 > webpack 和 jquery-minicolors : TypeError: element.minicolors is not a function

问题描述

我需要使用 webpack 在我的 Angular 应用程序中使用 jquery-minicolors NPM 包。

我安装了它,yarn add jquery-minicolors并且还在import 'jquery-minicolors'我的应用程序中添加了它,但出现以下错误:

TypeError: element.minicolors is not a function
    at initMinicolors (https://localhost/packs/application-4e03b2893762c0222662.js:244728:19)
    at Object.link (https://localhost/packs/application-4e03b2893762c0222662.js:244751:9)
    ...

进一步查看源代码,我看到以下内容:

(function (factory) {
  if(typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['jquery'], factory);
  } else if(typeof exports === 'object') {
    // Node/CommonJS
    module.exports = factory(require('jquery'));
  } else {
    // Browser globals
    factory(jQuery);
  }
}(function ($) {
  ...

所以我猜webpack没有正确导入它。

我已经更新了我的 webpack 配置,添加了这个:

environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
}))

environment.loaders.append('jquery-minicolors', {
  test: require.resolve('jquery-minicolors'),
  loader: 'imports-loader?this=>window,define=>false,$=jquery'
})

但是我仍然有JS错误。

你能帮我解决这个问题吗?

标签: javascriptjquerywebpack

解决方案


推荐阅读