@mwumli
2015-11-24T10:03:58.000000Z
字数 2047
阅读 2466
web
meteor
Writed by happypetter
至此,一个 meteor+react 的基本项目就跑起来了,我们可以定义自己的 react 组件来添加到项目中来。但幸运的是,网上有现成的 react 组件仓库可以用的,这就是 Material-ui 。 Material-ui 是实现了 Google Material Design 风格的 React 组件套装。本节来看看如何在 Meteor + React 的环境下使用它。
下面所有操作的代码,都在这个 commit 中(需要自己动手写的代码,下面的讨论中都会提到,其他的代码都是自动生成的):
有趣而且强大无比的一点是,meteor 项目中不但能使用 meteor 包(例如前面 meteor add react 中的 react 包),也可以使用原生的 npm 包。参考这里的说明。比如我们这儿要用 materil-ui ,就采用 npm 的形式来装包。
后续操作按照 http://react-in-meteor.readthedocs.org/en/latest/client-npm/ 。
要在 Meteor 项目中使用原生的 npm 包,下面两个包是首先要装的(需要翻墙):
meteor add meteorhacks:npm cosmos:browserify
第一个 meteor 包 npm ,负责把原生的 npm 包添加到咱们的 meteor 应用中运行,后续的 packages.json 文件就是由这个包生成的。
第二个 browserify 在客户端代码中提供了 require 的功能,这个后面是会到处都用到的,相关功能是后面的 app.browserify.js 文件。
安装完成,运行一下
$ meteor
就可以生成一个 packages.json 文件(对,是有 s 的 )。
我们需要在里面填写要安装的原生 npm 包(由 https://www.npmjs.com 提供):
{
"material-ui": "0.13.1",
"externalify": "0.1.0"
}
上面的版本号,都是我在 https://www.npmjs.com 上查到的当前最新版本号。写好之后,不着急安装,先把后续的配置做好。
目前,Meteor 不支持使用 require 语法加载模块,所以需要通过添加 cosmos:browserify 软件包支持的一个特殊文件,来实现这个功能。 在项目中创建一个目录 client/lib,进入到新建目录,创建一个文件名为 app.browserify.js。
在这个新建的文件里面,你可以 require 任意已安装的 NPM 模块,这样可以把它导出成一个在本项目范围内全局使用的变量(意味着项目中的每一个 JavaScript 文件都能访问这个变量)。 例如,要使用 material-ui 模块,在 app.browserify.js 文件添加下面这几行代码:
var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();
mui = require('material-ui');
其实最主要的就是最后一句啦。但是,为何要有 injectTapEventPlugin 相关的这两行代码呢?这个是临时的,加上就是了,不必深究,material-ui 官方的文档 有说明。
我们的意图是让 material-ui 使用 meteor 的 react 包,而不是 npm 提供的 react 包,但是这个行为不是默认的,需要我们手动配置一个 Browserify 的 transforms 。步骤很简单,创建 client/lib/app.browserify.options.json 里面添加
{
"transforms": {
"externalify": {
"global": true,
"external": {
"react": "React.require"
}
}
}
}
上面的各个配置都写好之后,运行
$ meteor
来安装 material-ui 和 externalify 这两个包并加载相关设置。
特别警告:上面两个包如前所述那样一起写到 packages.json 中,然后把相关的配置文件都写好之后然后再运行 meteor 一块儿把这两个包装好。如果操作顺序不对,最后的浏览器终端中就会报错:Uncaught Error: Invariant Violation: addComponentAsRefTo(...)
。
把 Hello.jsx 改成下面这样
const { RaisedButton } = mui;
Hello = React.createClass({
render(){
return (
<div>
<RaisedButton label="Hello World" />
</div>
);
}
});
这样,在 http://localhost:3000/
就可以看到来自 material-ui 的一个按钮了,鼠标点一下可以看到漂亮的波纹效果。