Импорт старого модуля ES5 для использования в компоненте ReactJS

Question

Я пытаюсь использовать модуль ES5 в новом приложении ReactJS, и я изо всех сил пытаюсь понять, как правильно импортировать этот модуль, так что основная функция внутри него может быть найденным и исполненным.

Я загружаю модуль; import 'air-datepicker';

Я знаю, что я делаю что-то неправильно здесь и что это не так просто, как для старой библиотеки, которая не имеет надлежащего экспорта!

В любом случае, тогда я должен был бы вручную инициализировать выбор даты, используя существующий div, подобный этому;

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

Я пробовал несколько вариантов импорта и требуют, но я всегда получаю ту же ошибку - "DatePicker не является функцией.

Библиотека, с которой я экспериментирую, - air-datepicker. Я установил модуль с помощью npm без проблем, и я знаю, что библиотека отлично работает без React на простой странице, загружающей скрипт вручную в тег скрипта. Мое приложение ReactJS - это базовый шаблон, созданный с помощью «create-react-app», с страниц учебного пособия FB.

Answer 1

Ну, это день моей жизни, что я никогда не вернусь!

Проблема была вызвана импортным заказом Babel. Операции импорта отображаются, что означает, что они сначала оцениваются перед выполнением любого другого кода (т. Е. Моих оконных заданий). Это «by design» в Babel.

Единственный способ избежать подъема Вавилона, исходя из того, что я могу сказать, заключается в том, чтобы избежать «импорта» в целом и использовать вместо него.

Таким образом, в следующем порядке глобальные $ будут установлены, когда вы придете, чтобы потребовать передачу данных air-datepicker. Если вы попытаетесь «импортировать» air-datepicker, это не сработает, потому что Babel будет оценивать все ваши операторы импорта перед выполнением окна. назначение.

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

Есть один или два других подхода, которые также работали бы, но все они менее желательны, потому что им нужно вручную настроить Webpack - то есть «выталкивания» создавание реагирующими-приложение конфигурации и в одиночку ...

Используйте imports-loader;

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

или используйте ProvidePlugin, что делает модуль доступен для всех модулей.

Answer 2

Вы должны дать ему идентификатор:

import datepicker from 'air-datepicker'; 

Answer 3

Если вы используете create-react-app, вы должны быть в состоянии импортировать его как

import 'air-datepicker/dist/css/datepicker.min.css'; 
import 'air-datepicker'; 

Если вы добавили ваш JQuery с использованием тега в <script> ваш HTML-код, вам нужно добавить эту строку до импорта воздуха-datepicker

const $ = window.jQuery; 
const jQuery = window.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> 
}