[英]Importing an old ES5 module for use in a ReactJS component
I'm trying to use an ES5 module in a new ReactJS application and I'm struggling to understand how to correctly import that module, such that the main function within it can be found and executed. 我正在尝试在新的ReactJS应用程序中使用ES5模块,并且正在努力了解如何正确导入该模块,以便可以找到并执行其中的主要功能。
I'm loading the module; 我正在加载模块; import 'air-datepicker';
I know I'm doing something wrong here and that it's not as simple as this, for an old library that doesn't have proper exports! 我知道我在这里做错了,对于一个没有适当导出功能的旧库来说,这不是那么简单!
Anyway, then I should be able to manually initialise a date picker using an existing div like this; 无论如何,那么我应该能够使用现有的div手动初始化日期选择器;
$('#myDiv').datepicker();
I've tried multiple variations of the import and require, but I'm always getting the same error - 'datepicker is not a function'. 我已经尝试了导入和需求的多种变体,但是我总是遇到相同的错误-“ datepicker不是函数”。
The library I'm experimenting with is air-datepicker . 我正在尝试的库是air-datepicker 。 I've installed the module using npm without problems and I know the library works perfectly without React on a simple page loading the script manually in a script tag. 我已经使用npm安装了模块,没有任何问题,并且我知道该库可以完美运行,而无需在将脚本手动加载到script标签中的简单页面上使用React。 My ReactJS app is a basic template created using 'create-react-app', from the FB tutorial pages. 我的ReactJS应用程序是从FB教程页面使用'create-react-app'创建的基本模板。
If you're using create-react-app
, you should be able to import it like 如果您使用的是create-react-app
,则应该可以将其导入
import 'air-datepicker/dist/css/datepicker.min.css';
import 'air-datepicker';
If you added your jQuery using <script>
tag in your HTML, you need to add this line before the air-datepicker imports 如果您在HTML中使用<script>
标签添加了jQuery,则需要在air-datepicker导入之前添加此行
const $ = window.jQuery;
const jQuery = window.jQuery;
If you added jQuery using npm install
, you'll have to add these following lines 如果使用npm install
添加了jQuery,则必须添加以下几行
import $ from 'jquery';
import jQuery from 'jquery';
window.$ = $;
window.jQuery = jQuery;
//... air-datepicker imports
Make sure to initialize it inside your componentDidMount
or somewhere you're sure that the element has been mounted already. 确保在您的componentDidMount
或您确定已安装该元素的某个位置中对其进行初始化。
componentDidMount() {
$('#my-element').datepicker();
}
render() {
return <div>
<input
id="my-element"
type='text'
className="datepicker-here"
data-position="right top" />
</div>
}
Well, that's a day of my life that I'm never getting back! 好吧,那是我一生中永远都不会回来的一天!
The problem was caused by Babel import ordering. 该问题是由Babel导入订购引起的。 Import statements are hoisted - meaning they are evaluated first, before any other code (ie my window. assignments) are executed. 导入语句被吊起-意味着它们在执行任何其他代码(即,我的窗口分配)之前首先被评估。 This is ' by design ' in babel. 这是通天塔设计的。
The only way to avoid Babel hoisting, from what I can tell, is to avoid 'import' altogether and use require instead. 据我所知,避免Babel吊装的唯一方法是完全避免“进口”,而改用require。
So, in the following order the global $ will have been set when you come to require air-datepicker. 因此,当您需要air-datepicker时,将按照以下顺序设置全局$。 If you try to 'import' air-datepicker it won't work because Babel will evaluate all of your import statements before executing the window. 如果您尝试“导入” air-datepicker,它将无法正常工作,因为Babel将在执行窗口之前评估所有导入语句。 assignment. 分配。
import $ from 'jquery';
window.$ = $;
require('air-datepicker');
There are one or two other approaches that also would have worked, but they are all less desirable because they need you to manually configure webpack - ie 'ejecting' the create-react-app config and going it alone... 还有另外一种或两种方法也可以使用,但是它们都不是很理想,因为它们需要您手动配置webpack-即“弹出” create-react-app配置并单独进行...
Use the imports-loader ; 使用imports-loader ;
// only works if you disable no-webpack-loader-syntax
require("imports?$=jquery!air-datepicker");
or, use the ProvidePlugin , making the module available for all modules. 或者,使用ProvidePlugin ,使该模块可用于所有模块。
您必须为其指定一个标识符:
import datepicker from 'air-datepicker';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.