React.js + Summernote，如何导入 JavaScript 依赖库

Posted 2023-03-22

【中文标题】React.js + Summernote，如何导入 JavaScript 依赖库

【英文标题】：React.js + Summernote, how to import JavaScript dependency libraries

【发布时间】：2018-08-20 02:32:59

【问题描述】：

我是 React.js 的新手，我想使用特定的所见即所得编辑器 - Summernote 作为组件。

我正在使用

反应 v16.2.0 react-summernote v2.0.0（依赖：

jQuery 和 Bootstrap

）

我尝试了什么：

根据 react-summernote 文档的建议，我做了以下事情：

已安装 react-summernote

在\node_modules\webpack-dev-server\client\webpack.config.js 中添加了以下（下）

 ...
 ...
 plugins: [
    new UglifyJSPlugin(),
    new webpack.ProvidePlugin(
       $: "jquery",
       jQuery: "jquery"
    )
 ]

在我的组件中（WYSIWYG.js）我做了以下操作

 // WYSIWYG.js 
 import React, Component from 'react';

 import ReactSummernote from 'react-summernote';
 import 'react-summernote/dist/react-summernote.css'; // import styles

 // Import bootstrap(v3 or v4) dependencies 
 import 'bootstrap/js/dist/modal';
 import 'bootstrap/js/dist/dropdown';
 import 'bootstrap/js/dist/tooltip';
 import 'bootstrap/dist/css/bootstrap.css';`

我的 package.json 依赖项

...
"dependencies": 
    "bootstrap": "^4.0.0",
    "jquery": "^3.3.1",
    "popper.js": "^1.12.9",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.1.1",
    "react-summernote": "^2.0.0"
  ,

出现错误：（在浏览器中）

在 CLI 中没有什么重要的。我还尝试将import $ from "jquery"; 放入我的组件WYSIWYG.js。我也试过THIS(github problem page)。但同样的问题仍然存在。

请帮忙，谢谢。

【问题讨论】：

您是否添加了jquery 作为依赖项（您是否运行了npm install jquery）？

是的，我也会在这里添加 package.js 文件

你为什么要把它添加到\node_modules\webpack-dev-server\client\webpack.config.js？

在 react-summernote 文档中它说：将 ProvidePlugin 添加到您的 webpack 配置中。是不同的文件吗？

你必须将它添加到 your webpack 文件中，而不是 webpack-dev-server 中的那个。你在使用 create-react-app 吗？

【参考方案1】：

是的，我正在使用 create-react-app。

create-react-app 不会公开 webpack 文件供您编辑，除非您弹出。另一种将 jQuery 设置为窗口的方法如下：

import $ from 'jquery';
import 'bootstrap/dist/css/bootstrap.css';
// Bootstrap JS relies on a global varaible.
// In ES6, all imports are hoisted to the top of the file
// so if we used `import` to import Bootstrap, it would
// execute earlier than we have assigned the global
// variable. This is why we have to use CommonJS require()
// here since it doesn't have the hoisting behavior.
window.jQuery = $;
require('bootstrap');

https://github.com/kevgathuku/react-bootstrap-jquery/pull/1/files

【参考方案2】：

这对我有用。

创建一个 js 文件来包含你的全局变量 //globals.js 从 'jquery' 导入 jquery;窗口.jQuery = jquery;窗口.jquery = jquery; window.$ = jquery;

然后在你的组件 js 文件中 导入“../globals”；从'react-summernote'导入ReactSummernote；导入'react-summernote/dist/react-summernote.css';

资源： https://github.com/summernote/react-summernote/issues/22