整合Meteor + React + Material UI

2024年4月26日 181次阅读 来源: 外籍杰克

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

以下，将会用到：

  1. create package in meteor

  2. add local package in meteor

  3. meteor中client端添加npm模块

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

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

  1. meterohacks:npm，用于server端

  2. 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.jsx

client是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
    原文作者：外籍杰克
    原文地址: https://segmentfault.com/a/1190000003868781
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞