Webpack Encore 找不到安装的依赖 Spectrum-colorpicker2

Posted 2023-02-16

【中文标题】Webpack Encore 找不到安装的依赖 Spectrum-colorpicker2

【英文标题】：Webpack Encore can not find installed dependency Spectrum-colorpicker2

【发布时间】：2020-07-20 00:55:37

【问题描述】：

简介

我想在我的项目中使用颜色选择器。

由于现代外观和功能，我的选择停止在spectrum-colorpicker2。

Documentation site; Code on github; YarnPKG package。

我正在使用 Symfony v4.4 和 Webpack Encore 捆绑包。

对于 JS 包，我使用YarnPKG。

问题

import 和 require 都会导致相同的错误。

错误

[..]
PS D:\DEV\project> yarn encore dev
yarn run v1.22.4
$ D:\DEV\project\node_modules\.bin\encore dev
Running webpack ...

 ERROR  Failed to compile with 1 errors

This dependency was not found:

* spectrum-colorpicker2 in ./assets/js/file_type_color.js

To install it, you can run: npm install --save spectrum-colorpicker2
[..]

代码 1

'use strict';

// loads the jquery package from node_modules
import $ from 'jquery';
var spectrum = require('spectrum-colorpicker2');
require('spectrum-colorpicker2/dist/spectrum.min.css');

$(function()

    $('#assign_color').spectrum(
        type: "component",
        showAlpha: "false"
    );
);

代码 2

'use strict';

// loads the jquery package from node_modules
import $ from 'jquery';
import spectrum from 'spectrum-colorpicker2';
import 'spectrum-colorpicker2/dist/spectrum.min.css';

$(function()

    $('#assign_color').spectrum(
        type: "component",
        showAlpha: "false"
    );
);

我试过了

我尝试了多次添加和删除包，但结果是一样的。

yarn add spectrum-colorpicker2
yarn remove spectrum-colorpicker2

安装日志

[..]
PS D:\DEV\project> yarn add spectrum-colorpicker2
yarn add v1.22.4
[1/4] Resolving packages...
warning Resolution field "node-notifier@6.0.0" is incompatible with requested version "node-notifier@^5.1.2"
[2/4] Fetching packages...
info fsevents@1.2.11: The platform "win32" is incompatible with this module.
info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > sass-loader@7.3.1" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0".
[4/4] Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ spectrum-colorpicker2@2.0.0
info All dependencies
└─ spectrum-colorpicker2@2.0.0
Done in 5.22s.
[..]

换行

如果我犯了错误，请纠正我。 请就这个问题给我建议。

谢谢！

【参考方案1】：

原来下载的包spectrum-colorpicker2格式不正确！

它在另一个dist 文件夹内有dist 文件夹。

结果Webpack找不到需要的文件。

解决方法是：直接包含 javascript 文件：

var spectrum = require('spectrum-colorpicker2/dist/spectrum.min.js');