使用 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 的一个按钮了，鼠标点一下可以看到漂亮的波纹效果。