我試圖讓 Summernote 與 Webpack 一起作業，但不知何故它不起作用。
我用 yarn 安裝了 Summernote yarn add 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
我試過這個：在此處輸入鏈接描述，但結果相同。
uj5u.com熱心網友回復：
問題
我覺得這里的問題是require錯誤的jquery包名時回購已建成webpack。我確實看過構建的代碼，這里是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;
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/329300.html
標籤：javascript 网络包 夏日笔记