Question

我正在尝试通过NPM安装quill-image-resize-module。我已经尝试过这些命令npm install --save quill-image-resize-module，npm install quill-image-resize-module，npm install -g quill-image-resize-module。

所有结果均相同。结果是，在quill-image-resize-module内部创建了文件夹node_modules，然后在node_modules内部创建了另一个quill-image-resize-module。在这个新的node_modules子内部，创建了许多文件夹，例如acorn，array-uniq，lodash。

总而言之，NPM并未安装软件包，而是下载了许多软件包并将其放在quill-image-resize-module内的新文件夹中。因此，我无法导入该软件包。

import ImageResize from 'quill-image-resize-module'

这将导致错误。该软件包确实存在，但是没有文件。它有另一个子文件夹，并且在其中还有许多其他文件夹。

基于Old Pro的答案进行记录：

ERROR in ./resources/js/app.js
Module not found: Error: Can't resolve 'quill-image-resize-module' in 'C:\xampp\htdocs\myapp\resources\js'
 @ ./resources/js/app.js 112:0-36
 @ multi ./resources/js/app.js ./resources/sass/app.scss

Answer 1

如果我使用require而不是import，请使用Node 8.14.0为我工作。请发布您在运行时遇到的错误

node -e 'require("quill-image-resize-module")'

我安装的quill-image-resize-module在./node_modules/quill-image-resize-module/node_modules/下有425个目录，我得到的错误是有关window的未定义，这对node来说是正常的，但表明{{1 }}应该在浏览器中运行，因此您的实际问题可能与quill没有关系。

Answer 2

我建议您删除您的 node_modules 然后运行npm i quill-image-resize-module --save，这需要花一些时间来安装，在成功安装后，您应该有一个这样的树：-< / p>

node_modules
├── quill-image-resize-module
│   ├── demo
│   │   ├── index.html
│   │   └── script.js    
│   ├── node_modules             
│   │   └──         //Contains a long list of other dependencies
│   └── src              
│       ├── modules        
│       │   ├── BaseModule.js    
│       │   ├── DisplaySize.js  
│       │   ├── Resize.js  
│       │   └── Toolbar.js   
│       │
│       ├── DefaultOptions.js
│       └── ImageResize.js        
│   
|
├── .editorconfig              
├── .eslintrc
├── .npmignore    
├── CHANGELOG.md               
├── image-resize.min.js
├── npm-shrinkwrap.json  
├── package.json
├── README.md               
└── webpack.config.js

之后，您可以按照以下用法导入软件包：

用法

Webpack / ES6

import Quill from 'quill';
import { ImageResize } from 'quill-image-resize-module';

Quill.register('modules/imageResize', ImageResize);

const quill = new Quill(editor, {
    // ...
    modules: {
        // ...
        imageResize: {
            // See optional "config" below
        }
    }
});

这应该可以解决您的问题，但是您可以阅读quill-image-resize-module上的更多内容。

Answer 3

编辑：给NPM软件包npm i quill-image-resize或yarn add quill-image-resize

这是用于安装依赖项的正确CLI命令。 npm i @appsflare/quill-image-resize-module

由于缺少对appsflare mono的引用，可能安装了其他仓库中的许多其他模块。

https://www.npmjs.com/package/@appsflare/quill-image-resize-module

根据NPM文档，此import { ImageResize } from 'quill-image-resize-module';在使用正确的安装命令后应该可以工作。

祝您好运，希望对您有所帮助。

Answer 4

您可以安装npm i --save quill-image-resize-vue并在组件中使用以下代码：

import { VueEditor,Quill } from 'vue2-editor'

import { ImageDrop } from 'quill-image-drop-module';
import ImageResize from 'quill-image-resize-vue';

Quill.register("modules/imageDrop", ImageDrop);
Quill.register("modules/imageResize", ImageResize);

export default {
    name: 'ImageResize',
    components: { VueEditor},
    data() {
        return {
            content: '<h2>Here goes your content</h2>',
            editorSettings: {
              modules: {
                imageDrop: true,
                imageResize: {},
              }
            }
        }
     },
}

官方网址：Quill image resize vue

安装quill-image-resize-module会在其中创建带有许多模块的“ node_modules”

4 个答案:

用法

Webpack / ES6