整合Meteor + React + Material UI

看了meteor官方教程，觉得这个做快速开发真的不错。于是尝试和react和material-ui进行整合。由于Meteor不是一个普通的node project，对于npm模块的依赖不能够简单的require()就搞定。这里主要参考这篇文章，但是material-ui版本已经更新到0.12.3，所以期间还是花了点时间。

以下，将会用到：

create package in meteor
add local package in meteor
meteor中client端添加npm模块

如果是普通的node项目，整合React和Material-ui只需要npm install & require，但是meteor中却没有这么简单。

Google了一下meteor添加npm模块，发现meteor添加npm模块有几个方法：

meterohacks:npm，用于server端
cosmos:browserify，用于client端

我希望在client端做使用react，因此采用后者（还没有试过server端使用react）。大致思路是：新建一个package，里面使用cosmos:browserify添加对react和material-ui的依赖，在meteor项目中添加此package。
meteor add react可以快速的添加对react的支持，但是这样的方式在使用material-ui时会有些问题，具体在参考文中也有谈到。因此采用browserify添加react依赖。

创建meteor项目

@H_404_39@meteor create meteor-react-material cd meteor-react-material

添加meteor的package路径

@H_404_39@export PACKAGE_DIRS=$HOME/meteor/local-packages

这里需要自己创建一个路径保存本地的meteor包，meteor add时会搜索这个路径去安装包。由于export仅仅对当前termial session生效，所以不用担心对其他项目bao的安装有影响。

下载react相关包

@H_404_39@mkdir $PACKAGE_DIRS/react-packages git clone https://github.com/meteor/react-packages $PACKAGE_DIRS/react-packages meteor add babel-compiler babel-runtime jsx react-meteor-data

创建本地package

@H_404_39@cd $PACKAGE_DIRS meteor create --package ygjack:browserify-deps cd browserify-deps mv browserify-deps.js client.browserify.js

创建package的时候，需要author，这里ygjack是我的用户名，因此前缀之。
创建package的时候，默认会创建通明的js文件，但是这里要使用cosmos:browersify，所以需要有一个client.browserify.js文件，这里直接修改命名。
更多关于创建package。

@H_404_39@// browserify-deps/package.js Npm.depends({ 'react': '0.13.3','material-ui':'0.12.3' }); Package.onUse(function(api) { api.versionsFrom('1.2.0.2'); api.use(['cosmos:browserify'],'client'); api.addFiles(['client.browserify.js'],'client'); api.export('React','client'); api.export('mui','client'); api.export('injectTapEventPlugin','client'); });

添加client全局变量：

@H_404_39@// browserify-deps/client.browserify.js React = require('react'); mui = require('material-ui'); injectTapEventPlugin = require('react-tap-event-plugin');

添加browserify-deps

@H_404_39@cd /path/to/meteor-react-material meteor add ygjack:browserify-deps

这里meteor会build local package。（由于个人创建的package在add时是需要前缀用户名的，所以这个前面是我自己的用户名ygjack）

这样react和material-ui的依赖都添加好了，可以运行项目在浏览器控制台中访问全局的React,mui就能使用相应的功能了。

添加jsx文件

@H_404_39@mkdir client mkdir client/components touch client/startup.jsx touch client/components/App.jsx

client是meteor项目中的特殊目录，详细请参考这里。

@H_404_39@// client/startup.jsx Meteor.startup(function() { injectTapEventPlugin(); // required by material-ui React.render(<App />,document.getElementById('mountNode')); }); @H_404_39@// client/components/App.jsx var DatePicker = mui.DatePicker; var RaisedButton = mui.RaisedButton; App = React.createClass({ render: function() { return ( <div>App <RaisedButton label="BUTTON" /> <DatePicker /> <mui.List> <mui.ListItem primaryText="item" /> </mui.List> </div> ); } }); @H_404_39@// meteor-react-material.html ... <div id="mountNode"></div> ...

run it

@H_404_39@meteor 原文链接：https://www.f2er.com/react/307636.html