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

Question

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

我正在使用

React v16.2.0
react-summernote v2.0.0 (dependency: jQuery and 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)。但同样的问题仍然存在。

请帮忙，谢谢。

Answer 1

Yes am using create-react-app.

create-react-app 除非你弹出，否则不会公开 webpack 文件供你编辑。将 jQuery 设置为 window 的另一种方法是：

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

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

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

React.js + Summernote, how to import JavaScript dependency libraries

javascript

reactjs

summernote

我尝试了什么：

获取错误：（在浏览器中）