Question

我已经按照quilljs github repo和quilljs文档中概述的步骤，从源代码构建了quilljs。套筒版本为1.3.6。 npm run构建成功，没有错误。问题是，每当我要使用内置软件包时，都不会找到模块Quill（就像从CDN引用预构建版本时通常那样）。

我使用了在github回购中找到的最小的webpack示例。并已使用npm install安装了所有依赖项。我还确保已按照文档正确安装了webpack。由于此操作无效，因此我也尝试了升级到最新的Webpack版本和TypeScript，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"
});

预期结果：正常运行测验并显示用户界面

实际结果：不显示任何测验。控制台给出：“未捕获的ReferenceError：未定义套管”。

除开发人员外，是否有人能够根据提供的文档进行构建？自从构建过程的文档更新以来，似乎已经很长时间了，但是我猜除了更新版本的依赖项没有太大变化了？

Answer 1

这似乎像是Quill的错误。我们的团队能够通过使用webpack.config中的ProvidePlugin来教Webpack有关如何解决Quill的方法来解决此问题。

在您的webpack.config中导入ProvidePlugin

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/

从quill.js源构建成功，但在引用时未找到基尔

1 个答案: