我正在尝试让 Summernote 与 Webpack 一起使用,但不知何故它不起作用。
我使用yarn 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目录导入summernote.js时没有此错误(import 'summernote/src/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 ,但结果相同。
最佳答案
问题
我认为这里的问题是当使用 webpack
构建存储库时,require
错误的 jquery
包名称。我确实查看了构建的代码,这里需要 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;
关于javascript - 将 Summernote 与 Webpack 结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69617255/