导入旧的ES5模块以在ReactJS组件中使用

Question

我正在尝试在新的ReactJS应用程序中使用ES5模块，并且正在努力了解如何正确导入该模块，以便可以找到并执行其中的主要功能。

我正在加载模块； import 'air-datepicker';

我知道我在这里做错了，对于一个没有适当导出功能的旧库，它不是那么简单！

无论如何，我应该能够使用现有的div手动初始化日期选择器。

$('#myDiv').datepicker();

我已经尝试了导入和需求的多种变体，但是我总是遇到相同的错误-“ datepicker不是函数”。

我正在尝试的库是air-datepicker。我已经使用npm安装了模块，没有任何问题，而且我知道该库可以完美运行，而无需在通过脚本标签手动加载脚本的简单页面上使用React。我的ReactJS应用程序是从FB教程页面使用’create-
react-app’创建的基本模板。

Answer 1

好吧，那是我生命中的一天，我再也回不来了！

该问题是由Babel导入订购引起的。导入语句被吊起-意味着它们在执行任何其他代码（即，我的窗口分配）之前首先被评估。这是通天的“
设计 ”。

据我所知，避免Babel吊装的唯一方法是完全避免“进口”，而改用require。

因此，当您需要air-datepicker时，将按照以下顺序设置全局$。如果您尝试“导入” air-
datepicker，它将无法正常工作，因为Babel将在执行窗口之前评估所有导入语句。分配。

import $ from 'jquery';
window.$ = $;
require('air-datepicker');

还有一种或两种其他方法也可以使用，但是它们都不是很理想，因为它们需要您手动配置webpack-即“弹出” create-react-
app配置并单独进行…

使用imports-loader ;

// only works if you disable no-webpack-loader-syntax
require("imports?$=jquery!air-datepicker");

或者，使用ProvidePlugin，使该模块可用于所有模块。