整合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项目
meteor create meteor-react-material cd meteor-react-material添加meteor的package路径
export PACKAGE_DIRS=$HOME/meteor/local-packages这里需要自己创建一个路径保存本地的meteor包，meteor add时会搜索这个路径去安装包。由于export仅仅对当前termial session生效，所以不用担心对其他项目bao的安装有影响。
下载react相关包
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
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 。
// 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全局变量：
// browserify-deps/client.browserify.js React = require('react'); mui = require('material-ui'); injectTapEventPlugin = require('react-tap-event-plugin');添加browserify-deps
cd /path/to/meteor-react-material meteor add ygjack:browserify-deps这里meteor会build local package。（由于个人创建的package在add时是需要前缀用户名的，所以这个前面是我自己的用户名ygjack）
这样react和material-ui的依赖都添加好了，可以运行项目在浏览器控制台中访问全局的React, mui就能使用相应的功能了。
添加jsx文件
mkdir client mkdir client/components touch client/startup.jsx touch client/components/App.jsxclient是meteor项目中的特殊目录，详细请参考 这里 。
// client/startup.jsx Meteor.startup(function() { injectTapEventPlugin(); // required by material-ui React.render(<App />, document.getElementById('mountNode')); });// 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> ); } }); // meteor-react-material.html ... <div id="mountNode"></div> ...run it
meteor正文到此结束
热门推荐
相关文章
近期评论
-
666
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
-
-
-
-
-
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
