[关闭]
@mwumli 2015-11-24T10:03:58.000000Z 字数 2047 阅读 2466

使用 material-ui

web meteor


Writed by happypetter

至此,一个 meteor+react 的基本项目就跑起来了,我们可以定义自己的 react 组件来添加到项目中来。但幸运的是,网上有现成的 react 组件仓库可以用的,这就是 Material-ui 。 Material-ui 是实现了 Google Material Design 风格的 React 组件套装。本节来看看如何在 Meteor + React 的环境下使用它。

下面所有操作的代码,都在这个 commit 中(需要自己动手写的代码,下面的讨论中都会提到,其他的代码都是自动生成的):

material-ui

npm 装包

有趣而且强大无比的一点是,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 上查到的当前最新版本号。写好之后,不着急安装,先把后续的配置做好。

配置 browserify

目前,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 官方的文档 有说明。

配置 externalify

我们的意图是让 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(...)

使用 material-ui

把 Hello.jsx 改成下面这样

const { RaisedButton } = mui;
Hello = React.createClass({
  render(){
    return (
      <div>
      <RaisedButton label="Hello World" />
      </div>
    );
  }
});

结语

这样,在 http://localhost:3000/ 就可以看到来自 material-ui 的一个按钮了,鼠标点一下可以看到漂亮的波纹效果。

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注