Adding Quill to Your Build Pipeline

每个版本的Quill都可以使用各种来源，包括NPM或其CDN。 但是，可能存在一些用例，您希望从源代码构建Quill，作为应用程序构建管道的一部分。 如果你没有想到这种欲望，就不要大费周章啦！ 使用预建版本是使用Quill的最简单方法。

Quill是使用Webpack构建的，本指南主要针对Webpack用户。 但是，某些原则可能会转换为其他构建环境。

在quill-webpack-example中可以找到本指南中涵盖的所有内容的一个最小的工作示例。

Webpack

您需要将Webpack和适当的加载器作为开发依赖项添加到您的应用程序中。 如果你想从源代码构建Parchment，那么Typescript编译器是必需的。

• Quill源代码 - babel-core，babel-loader，babel-preset-es2015

• Parchment源代码 - ts-loader，typescript

• SVG图标 - html-loader

您的Webpack配置文件还需要将Quill和Parchment别名指向其各自的条目源文件。 如果没有这个，Webpack将使用NPM中包含的预构建文件，而不是从源代码构建。

Entry

Quill被发布会构建quill.js和quill.core.js。用于构建的条目文件的目的，quill.js和core，是导入和注册必要的依赖项。您可能希望应用程序中有一个类似的入口点，该入口点只包含您使用的格式、模块或主题。

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;

Stylesheets

在样式表领域从源代码构建中没有多少好处，因为规则很容易被覆盖。 但是，css-loader的波形符前缀可能有助于在应用程序css文件中包含Quill样式。

@import "~quill/dist/quill.core.css"
// Rest of your application CSS

Example

看一下quill-webpack-example以获得最小的工作示例。