Построение из источника quilljs завершено успешно, но Quill не найден при ссылке - PullRequest
Новая
       9

Построение из источника quilljs завершено успешно, но Quill не найден при ссылке

0 голосов
/ 20 декабря 2018

Мне удалось собрать quilljs из исходного кода, выполнив шаги, описанные в репозитории quilljs github и в документации по quilljs.Перо версия 1.3.6.Построение npm run выполнено без ошибок.Проблема в том, что всякий раз, когда я хочу использовать встроенный пакет, модуль Quill не обнаруживается (как это обычно бывает, когда вы ссылаетесь на предварительно собранную версию из CDN).

Я использовал минимальный пример веб-пакета, который можно найти в репозитории github.И установил все иждивенцы, используя npm install.Я также удостоверился, что webpack был установлен должным образом согласно документации.Поскольку это не сработало, я также попытался обновить его до новейших версий веб-пакетов и новейших версий машинописного текста, ts-loader и html-loader безрезультатно.У меня все та же проблема, что он не может найти Quill.

Однако, как указано, сборка завершается успешно без ошибок и предупреждений.

Код точки входа для сборки (с использованием примера, представленного в репозитории): 

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;

файл конфигурации webpack (слегка изменен для экспорта окончательного пакета в папку моего приложения) 

var path = require("path");

module.exports = {
  entry: "./app.js"),

  output: {
    path: __dirname + "/dist",
    filename: "../../quill_app/dist/quill.js"
  },
  resolve: {
    alias: {
      parchment: path.resolve(
        __dirname,
        "node_modules/parchment/src/parchment.ts"
      ),
      quill$: path.resolve(__dirname, "node_modules/quill/quill.js")
    },
    extensions: [".js", ".ts", ".svg"]
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["es2015"]
            }
          }
        ]
      },
      {
        test: /\.ts$/,
        use: [
          {
            loader: "ts-loader",
            options: {
              compilerOptions: {
                declaration: false,
                target: "es5",
                module: "commonjs"
              },
              transpileOnly: true
            }
          }
        ]
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: "html-loader",
            options: {
              minimize: false
            }
          }
        ]
      }
    ]
  }
};

index.html для запуска Quill из: 

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br /></p>
</div>

<!-- Include the Quill library -->
<script src="quill.js"></script>
<script src="code.js" type="module"></script>
<!-- Initialize Quill editor --

>

с частью его javascript: 

var quill = new Quill("#editor", {
  theme: "snow"
});

ожидаемый результат: Запускает quill как обычно и показывает UI

фактический результат: Перо не отображается.Консоль выдает: «Uncaught ReferenceError: Quill не определен».

Кому-нибудь кроме разработчиков удалось сделать сборку на основе предоставленных документов?Кажется, прошло много времени с тех пор, как были обновлены документы по процессу сборки, но я думаю, что мало что изменилось, за исключением новых версий зависимостей?

1 Ответ

0 голосов
/ 16 июля 2019

Это похоже на ошибку в Quill.Наша команда смогла решить эту проблему, используя ProvidePlugin в нашем webpack.config, чтобы научить Webpack, как разрешать Quill.

импортируйте ProvidePlugin в ваш webpack.config 

const ProvidePlugin = require('webpack/lib/ProvidePlugin');

, а затемиспользуйте плагин в разделе плагинов в конфигурации - см. ниже пример 

const ProvidePlugin = require('webpack/lib/ProvidePlugin');

module.exports = {
  entry: '...',
  output: {
   ...
  },
  module: {
    rules: [
      {
       ...
      }
    ]
  },
  plugins: [
  /// other plugins here 

    new ProvidePlugin({
            "Quill": "quill"
        }),
  ]
};

, вы можете узнать больше о плагинах здесь: https://webpack.js.org/concepts/plugins/

...