如何在create-react-app中使用jQuery依赖的插件

Question

我想在我的React应用程序中使用bootstrap和其他jQuery插件(datepicker,carousel,...)create-react-app.

以下是我导入jQuery和bootstrap的方法:

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
window.jQuery = window.$ = $;
import 'bootstrap/dist/js/bootstrap.min';

我收到以下错误:

./src/App.js
  Line 5:  Import in body of module; reorder to top  import/first

Search for the keywords to learn more about each error.

请注意,我不想使用react-bootstrap包.

Answer 1

在这种情况下使用bootstrap或bootstrap-datepicker我需要require它而不是导入它.

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
window.jQuery = window.$ = $;
require('bootstrap');
require('bootstrap-datepicker');

Answer 2

为了避免这样做require，还可以创建一个单独的文件来加载 jquery，例如

jquery-loader.js：

import $ from "jquery"

window.$ = $
window.jQuery = $

进而

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './jquery-loader';
import 'bootstrap';
import 'bootstrap-datepicker';