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

时间:2016-11-24 22:03:25

标签: javascript reactjs npm

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

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

我知道我在这里做错了,而且这并不像这样简单,对于一个没有适当出口的旧图书馆来说!

无论如何,那么我应该可以使用这样的现有div手动初始化日期选择器;

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

我尝试了导入和要求的多种变体,但我总是得到同样的错误 - ' datepicker不是函数'。

我正在试验的图书馆是air-datepicker。我已经使用npm安装了模块而没有任何问题,我知道在没有React的情况下,库可以在一个简单的页面上完美地工作,在脚本标记中手动加载脚本。我的ReactJS应用程序是使用FB教程页面中的' create-react-app'创建的基本模板。

3 个答案:

答案 0 :(得分:2)

如果您正在使用create-react-app,则应该能够像

一样导入它
import 'air-datepicker/dist/css/datepicker.min.css';
import 'air-datepicker';

如果您在HTML中使用<script>标记添加了jQuery,则需要在air-datepicker导入之前添加此行

const $ = window.jQuery;
const jQuery = window.jQuery;

如果您使用npm install添加了jQuery,则必须添加以下这些行

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>
}

答案 1 :(得分:2)

嗯,那是我生命中的一天,我永远不会回来!

问题是由Babel导入订单引起的。提升导入语句 - 意味着在执行任何其他代码(即我的窗口。分配)之前首先评估它们。这是巴贝尔的“by design”。

从我所知道的,避免Babel吊装的唯一方法是完全避免“导入”并改为使用require。

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

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

还有一两种其他方法也可行,但它们都不太理想,因为它们需要您手动配置webpack - 即“弹出”create-react-app配置并单独行动...... < / p>

使用imports-loader;

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

或使用ProvidePlugin,使模块可用于所有模块。

答案 2 :(得分:0)

你必须给它一个标识符:

import datepicker from 'air-datepicker';