【问题标题】：Import quill.js into Laravel using Mix/Webpack使用 Mix/Webpack 将 quill.js 导入 Laravel
【发布时间】：2019-08-27 14:41:23
【问题描述】：

在我最初实现这个的时候，我使用的是 Laravel 5.8，但据我所知，这仍然是相关的，Larvel 7.x 现在已经发布了。我正在尝试使用 Mix 将一个新的 javascript 库导入我的 Laravel 5.8 应用程序。具体来说，quill.js 库。

【问题讨论】：

标签： laravel webpack laravel-mix quill

【解决方案1】：

以下是我安装 quill 并使其在应用程序中全局可访问的步骤。

1

通过 npm 安装 quill

npm install quill --save-dev

2

创建一个新文件/resources/js/quill.js

3

在 quill.js 文件中，我包含了 quill 文档建议的代码：https://quilljs.com/guides/adding-quill-to-your-build-pipeline/

import Quill from 'quill/core';

import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow';

import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import Header from 'quill/formats/header';


Quill.register({
  'modules/toolbar': Toolbar,
  'themes/snow': Snow,
  'formats/bold': Bold,
  'formats/italic': Italic,
  'formats/header': Header
});


export default Quill;

4

在我的 app.js 文件中，我包含了 quill.js 文件并将其分配给全局范围

require('./quill.js');

window.Quill = require('Quill');

5

在 /resources/sass/app.scss 中导入 quill css

@import '~quill/dist/quill.core.css';

为了你的主题

@import '~quill/dist/quill.snow.css';

6

运行npm run dev

【讨论】：

我完全遵循了这一点，它在 localhost 上完美运行，但是当我推送到我的服务器并运行 npm run prod 我收到此错误： ./resources/js/user.js 中的错误 3:15- 31 未找到模块：错误：无法解析 '/home/forge/sieved.co/resources/js' 中的 'Quill' npm run prod 在本地也能完美运行，有什么想法吗？感谢这个问题顺便帮了我很多。
你确定安装成功了吗？你检查过你的伪造日志吗？
我修好了，问题出在 app.js 这一行：window.Quill = require('Quill');需要一个小写的 Q，例如： window.Quill = require('quill');之后一切正常。

【解决方案2】：

如果您不一定要导入特定的 Quill 组件，而只是想模拟 CDN 的行为，您可以：

安装 Quill

npm i quill

在您的resources/js/app.js

import Quill from 'Quill';

在您的元素上附加 Quill

new Quill('.quill-editor', {});

【讨论】：