将 Summernote 与 Webpack 一起使用

Posted 2023-03-22

【中文标题】将 Summernote 与 Webpack 一起使用

【英文标题】：Use Summernote with Webpack

【发布时间】：2021-12-05 13:53:28

【问题描述】：

我正在尝试让 Summernote 与 Webpack 一起工作，但不知何故它不起作用。

我用纱线yarn add summernote安装了summernote。

在我的 javascript 文件中，我正在导入 webpack：

import $ from 'jquery';
import 'bootstrap';
import 'summernote/dist/summernote';

$('#summernote').summernote();

但我得到了错误：

Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_0___default()(...).summernote is not a function

如果我使用 dist 文件夹中的 summernote js，我的 webpack 控制台上也会出现此错误（从 src 目录 (import 'summernote/src/js/summernote.js') 导入 summernote.js 时没有此错误）：

warning  in ./node_modules/jQuery/dist/jquery.js

There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* /path/to/node_modules/jQuery/dist/jquery.js
    Used by 1 module(s), i. e.
    /path/to/node_modules/summernote/dist/summernote.js
* /path/to/node_modules/jquery/dist/jquery.js
    Used by 534 module(s), i. e.
    /path/to/node_modules/babel-loader/lib/index.js??ref--4-0!/path/to/assets/js/app.js

我试过这个：enter link description here，但结果相同。

【参考方案1】：

问题

我认为这里的问题是 require 错误的 jquery 包名称，当使用 webpack 构建 repo 时。我确实看过构建的代码，这里是 jquery 必需的：

module.exports = factory(require("jQuery")); // this should be `jquery` instead

还有一张罚单，但似乎没有解决任何问题。

解决方案

幸运的是webpack 允许我们通过在resolve.alias 中列出模块来定义如何解析模块，如下所示：

// webpack.config.js

const path from "path";

module.exports = 
  // ...
  resolve: 
    alias: 
      // resolve `jQuery` with actual `jquery` module
      jQuery: path.resolve(__dirname, "node_modules/jquery"),
    ,
  ,
  // ...
;

PS：根据您使用 Symfony 的评论，您可以修改并为 jQuery 添加别名，如下所示：

// fetch the config, then modify it!
const config = Encore.getWebpackConfig();

// Add another alias to jQuery
config.resolve.alias.jQuery = path.resolve(__dirname, "node_modules/jquery")

module.exports = config;

【讨论】：

我将 webpack encore 与 Symfony 结合使用。这已经在配置文件module.exports = Encore.getWebpackConfig(); 中了。所以我想我需要以另一种方式在配置中添加一些东西？

只需覆盖此处提到的配置symfony.com/doc/current/frontend/encore/advanced-config.html。

我现在也为您提供了一个想法作为答案的一部分

谢谢，成功了。这样做的：Encore.addAliases( jQuery: path.resolve(__dirname, "node_modules/jquery"), );

酷。似乎是这样。如果真的有效，请不要忘记接受答案；）