添加Quill到你的构建系统

Quill的每个版本都可以从各种源（包括NPM或者它的CDN）构建和使用。然而，可能会出现用户希望从源代码构建Quill的用例，这是应用构建流程的一部分。如果这个想法没有发生在你身上，请不要在意！使用预制版本是使用Quill的最简单方法。

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

本指南涵盖的所有内容的基本示例都能在quill-webpack-example中找到。

Webpack

你需要将Webpack和适当的loaders作为开发的依赖项添加到你的应用程序。如果你想从源代码生成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.js的目的是导入和注册必要的依赖关系。你可能在你的应用程序中使用仅包含你使用的格式、模块或者主题的类似入口。

  1. import Quill from 'quill/core';
  3. import Toolbar from 'quill/modules/toolbar';
  4. import Snow from 'quill/themes/snow';
  6. import Bold from 'quill/formats/bold';
  7. import Italic from 'quill/formats/italic';
  8. import Header from 'quill/formats/header';
  11. Quill.register({
  12.   'modules/toolbar': Toolbar,
  13.   'themes/snow': Snow,
  14.   'formats/bold': Bold,
  15.   'formats/italic': Italic,
  16.   'formats/header': Header
  17. });
  19. export default Quill;

样式表（Stylesheets）

在样式表方面从源代码构建中获益并不多，因为规则可以很容易的被覆盖。然而，css-loader的字符前缀在你的应用程序的css文件中包含Quill样式是很有用的。

  1. @import "~quill/dist/quill.core.css"
  3. // 重写你的css样式

例子

作为一个小示例请查看quill-webpack-wxample。