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

我是React.js新手，我想使用一个特定的WYSIWYG编辑器——Summernote作为组件

我正在使用

• 反应v16.2.0
• v2.0.0（依赖项：jQuery和引导

我尝试的是： 正如说明文件所示，我做了以下工作：

已安装的注释

在

\node\u 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';`

My 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中没有什么重要的内容。我还试着从“jquery”输入

import$在我的组件中
WYSIWYG.js
。我也试过了。但同样的问题依然存在

请帮忙，谢谢

是的，我正在使用CreateReact应用程序

create react app
不会公开网页文件供您编辑，除非您弹出。将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');


是的，我正在使用CreateReact应用程序

create react app
不会公开网页文件供您编辑，除非您弹出。将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');

这对我来说很有效

创建一个js文件以包含全局文件
//globals.js从“jquery”导入jquery；window.jQuery=jQuery；window.jquery=jquery；window.$=jquery

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

资源：
这对我来说很有效

创建一个js文件以包含全局文件
//globals.js从“jquery”导入jquery；window.jQuery=jQuery；window.jquery=jquery；window.$=jquery

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

资源：
您是否将
jquery
添加为依赖项（是否运行了
npm install jquery
）？是的，我也将在此处添加package.js文件。为什么您要将其添加到
\node\u modules\webpack dev server\client\webpack.config.js
？在react summernote文档中，它说：将ProvidePlugin添加到您的webpack配置中。它是另一个文件吗？您必须将其添加到您的网页包文件中，而不是
webpack dev server
中的文件。您正在使用create react应用程序吗？您是否添加了
jquery
作为依赖项（您是否运行了
npm安装jquery
）？是的，我还将在此处添加package.js文件。为什么要将其添加到
\node\u modules\webpack dev server\client\webpack.config.js
？在react summernote文档中，它说：将ProvidePlugin添加到您的webpack配置中。它是另一个文件吗？您必须将其添加到您的网页包文件中，而不是
webpack dev server
中的文件。您正在使用CreateReact应用程序吗？