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

Question

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

我正在使用

• React v16.2.0
• react-summernote v2.0.0（依赖： jQuery和Bootstrap ）

我尝试了什么：

正如 react-summernote 文档建议我做了以下内容：

1. 已安装的react-summernote

2. 在\node_modules\webpack-dev-server\client\webpack.config.js

   中添加了以下（下方）

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

3. 在我的组件中（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)。但同样的问题仍然存在。

请帮助，谢谢。

Answer 1

  

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

除非您弹出，否则

mouseClicked不会公开您要编辑的webpack文件。您可以使用另一种方法将jQuery设置到窗口：

create-react-app

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

Answer 2

对我有用。

创建一个js文件以包含您的全局变量 //globals.js从'jquery'导入jquery; window.jQuery = jQuery; window.jquery = jquery; window。$ = jquery;

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

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