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

【问题标题】：How to use jQuery dependant plugins in create-react-app如何在 create-react-app 中使用 jQuery 依赖插件
【发布时间】：2017-10-20 15:46:46
【问题描述】：

我想在我使用 create-react-app 的 React 应用程序中使用 bootstrap 和其他 jQuery 插件（datepicker、carousel、...）。

这是我导入 jQuery 和引导程序的方法：

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 包。

【问题讨论】：

标签： jquery import npm webpack create-react-app

【解决方案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');

【讨论】：

你拯救了我的一天！
非常感谢，你也拯救了我的一天。

【解决方案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';

【讨论】：