所以,我正在使用RequireJS和React,尝试加载第三方组件,该组件已安装:
npm install react-autocomplete
结构在这里:https://github.com/rackt/react-autocomplete/tree/master/lib
现在,我有一个main.js文件,在加载requireJS时启动,如下所示:
require.config({
paths: {
"react" : "react/react",
"jsx-transformer" : "react/JSXTransformer",
"react-autocomplete" : "node_modules/react-autocomplete/lib/main"
}
});
require(["react"], function(react) {
console.log("React loaded OK.");
});
require(["jsx-transformer"], function(jsx) {
console.log("JSX transformer loaded OK.");
});
require(['react-autocomplete'], function (Autocomplete) {
console.log("React autocomplete component loaded OK.");
var Combobox = Autocomplete.Combobox;
var ComboboxOption = Autocomplete.Option;
console.log("Autocomplete initiated OK");
});
现在,所有加载都正常,但第三个require语句会为第三方组件中的main.js文件抛出“未定义模块”,如下所示:
module.exports = {
Combobox: require('./combobox'),
Option: require('./option')
};
我一直在读到这与我试图要求一个CommonJS风格的模块有关,但我无法弄清楚如何自己修复它,因为我是新手。
有没有人有一个明确的例子说明我如何解决这个问题?
答案 0 :(得分:26)
RequireJS无法按原样加载CommonJS模块。但是,您可以对它们进行最小程度的修改以加载它们。你必须将它们包裹在这样的define
调用中:
define(function (require, exports, module) {
module.exports = {
Combobox: require('./combobox'),
Option: require('./option')
};
});
如果您需要转换一堆模块,或者如果您使用的是以CommonJS模式编写的第三方库,并希望将其转换为构建过程的一部分,则可以使用r.js
为你执行转换。
答案 1 :(得分:6)
问题是requireJS不支持只有AMD的CommonJS模块。因此,如果第三方图书馆不支持AMD,那么您必须跳过一些环节才能让它发挥作用。
如果您有选项我建议使用browserify或webpack进行模块加载,因为这些是大多数反应社区选择的工具,几乎所有第三方反应组件都已发布在npm上作为CommonJS模块。