Sails.js:找不到变量require(react-bootstrap-datetimepicker)

时间:2015-12-11 10:18:09

标签: node.js twitter-bootstrap module reactjs sails.js

我正在使用Sails js,我想使用nodejs模块 我也使用React js。
我想在我的javascript脚本中使用react-bootstrap-datetimepicker react-bootstrap-datetimepicker
我用npm install react-bootstrap-datetimepicker

安装了我的模块

我在config/boostrap.js尝试添加此行var DateTimeField = require('react-bootstrap-datetimepicker');,但在我的js脚本中无法识别DateTimeField。
Uncaught ReferenceError: DateTimeField is not defined

我也尝试在我的脚本中直接添加这一行,但是我有这个错误:
ReferenceError: Can't find variable: require

在我的剧本中也是这个:import DateTimeField from "react-bootstrap-datetimepicker";

我在导航控制台中遇到了所有这些错误。

编辑1:

我明白你说了什么,谢谢你的回答。 但是,例如react-bootstrap,我可以使用:

var Input = ReactBootstrap.Input; var ButtonInput = ReactBootstrap.ButtonInput;

与react-bootstrap-datetimepicker有完全相同的架构,所以我也许可以这样做?
var DateTimePicker = ... . DateTimePicker
我尝试像你说的那样包含,但它不识别DateTimePicker。

以下是doc: 安装:
npm install react-bootstrap-datetimepicker

然后 JavaScript的
var DateTimeField = require('react-bootstrap-datetimepicker');

render: function() {
  return <DateTimeField />;
}

有关详细信息,请参阅(examples /)。

examples /中,该行为:

import DateTimeField from "react-bootstrap-datetimepicker";

1 个答案:

答案 0 :(得分:1)

好的,首先你要了解服务器端和客户端javascript的划分,甚至认为你使用相同的语言,并且你可以共享库,请记住,对于客户端js你需要提供给用户浏览器需要它们所需的库和脚本,因此必须在为用户提供服务的html中。当您需要sails bootstrap中的任何模块或类似模块时,您将脚本加载到服务器内存中,而不是将其提供给用户浏览器,这意味着您可以在服务器代码中使用,但不能在客户端代码中使用。

对于您的使用案例,您必须下载library code ,并将其放入 assets / js 文件夹中,如果您有脚本标记布局,风帆将自动为您注入,但如果没有,或者您正在使用其他模板引擎,如玉,只需手动添加。

示例:

<html>
  ....
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/<react-version>/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/<react-version>/react-dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/<version>/react-bootstrap.min.js">
  <script src='/js/react-bootstrap-datetimepicker.min.js'></script>
  // The other js files that depend on datetimepicker go here
</html>

现在要清楚,require是一个node.js函数,node.js与javascript不同,它是一个有自己功能的软件,这就是为什么你得到一个与之相关的错误当它试图在浏览器中使用它时,那里没有require方法,所以你不能使用它,至少不能直接使用它。您可以使用browserify来模拟节点工作流,在那里您有一个node_modules文件夹并对其使用require,browserify将捆绑(搜索模块并合并它们)并为您提供一个javascript文件,然后您可以链接在您的HTML代码中。这是更多的设置工作,除非你真的需要它,因为你有很多文件,我认为不值得努力..让我们说只使用require的一个文件。 所以我认为你被github repo误导了,因为它说的是npm-install。只是忽略它(除非你像我说的那样使用browsefify)并下载我上面给你的链接(.min.js)。

所以为了sumarize,你的问题与sails无关,只需将你提供的html中的库链接到用户,就像任何其他客户端脚本一样。