導入舊的ES5模塊以在ReactJS組件中使用

Question

我正在嘗試在新的ReactJS應用程序中使用ES5模塊，並且正在努力了解如何正確導入該模塊，以便可以找到並執行其中的主要功能。

我正在加載模塊； import 'air-datepicker';

我知道我在這里做錯了，對於一個沒有適當導出功能的舊庫來說，這不是那么簡單！

無論如何，那么我應該能夠使用現有的div手動初始化日期選擇器；

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

我已經嘗試了導入和需求的多種變體，但是我總是遇到相同的錯誤-“ datepicker不是函數”。

我正在嘗試的庫是air-datepicker 。 我已經使用npm安裝了模塊，沒有任何問題，並且我知道該庫可以完美運行，而無需在將腳本手動加載到script標簽中的簡單頁面上使用React。 我的ReactJS應用程序是從FB教程頁面使用'create-react-app'創建的基本模板。

Answer 1

如果您使用的是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>
}

Answer 2

好吧，那是我一生中永遠都不會回來的一天！

該問題是由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 ，使該模塊可用於所有模塊。

Answer 3

您必須為其指定一個標識符：

import datepicker from 'air-datepicker';