我正在尝试在新的 ReactJS 应用程序中使用 ES5 module，但我正在努力理解如何正确导入该module，以便可以找到并执行其中的主要功能。
我正在加载module；
import 'air-datepicker';
我知道我在这里做错了，对于一个没有正确导出的旧图书馆来说，事情并不像这样简单！
无论如何，那么我应该能够使用这样的现有 div 手动初始化日期选择器；
$('#myDiv').datepicker();
我已经尝试了 import 和 require 的多种变体，但我总是遇到同样的错误——“datepicker 不是一个函数”。
我正在试验的图书馆是air-datepicker。我已经使用 npm 毫无问题地安装了该module，并且我知道该库在没有 React 的简单页面上可以完美运行，在脚本标签中手动加载脚本。我的 ReactJS 应用程序是使用 FB 教程页面中的“create-react-app”创建的基本模板。
如果你正在使用create-react-app，你应该能够像这样导入它
import 'air-datepicker/dist/css/datepicker.min.css';
import 'air-datepicker';
如果您<script>在 HTML 中添加了 jQuery using标记，则需要在 air-datepicker 导入之前添加此行
const $ = window.jQuery;
const jQuery = window.jQuery;
如果您使用 jQuery 添加了 jQuery npm install，则必须添加以下几行
import $ from 'jquery';
import jQuery from 'jquery';
window.$ = $;
window.jQuery = jQuery;
//... air-datepicker imports
确保在您的内部componentDidMount或某个地方初始化它，您确定该元素已经安装。
componentDidMount() {
$('#my-element').datepicker();
}
render() {
return <div>
<input
id="my-element"
type='text'
className="datepicker-here"
data-position="right top" />
</div>
}
好吧，那是我一生中再也回不去的一天！
问题是由 Babel 导入顺序引起的。导入语句被提升 - 这意味着它们首先被评估，在任何其他代码（即我的窗口。赋值）被执行之前。这是babel 中的“按设计”。
据我所知，避免 Babel 提升的唯一方法是完全避免“导入”并使用 require 来代替。
因此，当您需要 air-datepicker 时，将按照以下顺序设置全局 $。如果您尝试“导入” air-datepicker 它将不起作用，因为 Babel 将在执行窗口之前评估您的所有导入语句。任务。
import $ from 'jquery';
window.$ = $;
require('air-datepicker');
还有一两种其他方法也可以使用，但它们都不太理想，因为它们需要您手动配置 webpack - 即“弹出” create-react-app 配置并单独进行...
使用导入加载器；
// only works if you disable no-webpack-loader-syntax
require("imports?$=jquery!air-datepicker");
或者，使用ProvidePlugin，使module可用于所有module。
你必须给它一个标识符：
import datepicker from 'air-datepicker';