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

Question

我是 React.js 新手，我想使用特定的所见即所得编辑器 - 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

Yes am using 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