Creat一个更好用的meteor-react项目

Creat一个更好用的meteor-react项目

当我们开始使用Meteor-react的时候,我们都需要什么?

Meteor是一套惊人的工具来高效地创建伟大的Web应用,我非常喜爱它。而随着spa(不是SPA,是单页应用)的发展,以 react 来说,组件化和状态机的思想真是解放了烦恼的 dom 操作,一切都为状态。state 来操纵 views 的变化。

然而,因为页面的组件化,导致每个组件都必须维护自身的一套状态,对于小型应用还好。但是对于比较大的应用来说,过多的状态显得错综复杂,到最后难以维护,很难清晰地组织所有的状态,在多人开发中也是如此,导致经常会出现一些不明所以的变化,越到后面调试上也是越麻烦,很多时候 state 的变化已经不受控制。对于组件间通行、服务端渲染、路由跳转、更新调试,我们很需要一套机制来清晰的组织整个应用的状态,redux 应然而生,这种数据流的思想真是了不起。

而对于前端来说,我觉得如果我们能有一个实时热重载,ES6模块,资源打包和代码分离,这会让Meteor更加酷,那就是在meteor中使用webpack去构建你的代码!

Mantra 是一种基于 Meteor 1.3+、React 和 ES2015 的 Meteor 应用架构,主要作用让 Meteor 应用代码架构标准化,特别是前端部分,当然它对后端代码的组织也有要求。注意 Mantra 不是一个框架,而是一套如何构建 Meteor App 的说明。Mantra 的目的是写出更易于理解和维护的代码。它对几乎所有的情况都有一个标准,另外还为 Meteor App 增加单元测试覆盖率。
Mantra 使用的原则很有前瞻性,能够很长时间不会过时,同时也允许其他人做必要的改变。

  • react 数据流
  • meteor react 构建工具 —— webpack
  • Mantra 架构思想
  • FlowRouter
  • ......

开始创建项目

创建一个Meteor项目

meteor create meteor-
meteor npm // 安装内需的npm包

开始配置webpack

安装:

meteor remove ecmascript
meteor add webpack:webpack
meteor add webpack:react
meteor add webpack:less
meteor add react-meteor-data
// 运行项目
meteor
// 注意使用npm install 而不是 meteor npm install
npm install
// 再运行的时候,就会发现webpack自动开始配置安装需要的插件
meteor

入口文件:

入口文件被定义在你的package.json文件中,main是项目的server entry,browser是项目的client entry

{
  "name": "meteor-react",
  "private": true,
  "main": "server/main.js",
  "browser": "client/main.js"
}

配置

你可以通过webpack.json配置Webpackwebpack.json文件应该在您的项目的根目录下。
同样,babel也被webpack所自动安装好了,可以通过.babelrc去配置。

修改项目代码

替代原代码:

<head>
  <title>Todo List</title>
</head>
 
<body>
  <div id="render-target"></div>
</body>

使用react:

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
 
import App from './app';
 
Meteor.startup(() => {
  render(<App />, document.getElementById('render-target'));
});
import React, { Component } from 'react';
 
import Task from './task';
 
// App component - represents the whole app
export default class App extends Component {
  getTasks() {
    return [
      { _id: 1, text: 'This is task 1' },
      { _id: 2, text: 'This is task 2' },
      { _id: 3, text: 'This is task 3' },
    ];
  }
 
  renderTasks() {
    return this.getTasks().map((task) => (
      <Task key={task._id} task={task} />
    ));
  }
 
  render() {
    return (
      <div className="container">
        <header>
          <h1>Todo List</h1>
        </header>
 
        <ul>
          {this.renderTasks()}
        </ul>
      </div>
    );
  }
}
import React, { Component } from 'react';
 
import Task from './task';
 
// App component - represents the whole app
export default class App extends Component {
  getTasks() {
    return [
      { _id: 1, text: 'This is task 1' },
      { _id: 2, text: 'This is task 2' },
      { _id: 3, text: 'This is task 3' },
    ];
  }
 
  renderTasks() {
    return this.getTasks().map((task) => (
      <Task key={task._id} task={task} />
    ));
  }
 
  render() {
    return (
      <div className="container">
        <header>
          <h1>Todo List</h1>
        </header>
 
        <ul>
          {this.renderTasks()}
        </ul>
      </div>
    );
  }
}

到这里,一个meteor-react使用webpack的项目就初步配置完成,接下来,还有引入mantra思想,使用redux的配置过程。
当然,如果你用不到,就不用往下看了。

为了方便使用,这是一个基础的meteor-react-webpack-boilerplate

小结

meteor:webpack

Mantra思想构建项目结构

Mantra是一个基于Meteor的应用程序架构,我们试图通过它达成如下两个目的.

  1. 可维护性

可维护性是大规模团队工作成功的关键因素。为了达到这一目标,需要为代码的每一部分添加单元测试,并为各方面内容制定全面的标准。通过这种方式,新的团队成员也可以更加容易的融入到团队之中。

  1. 与时俱进

JavaScript生态系统丰富多样,往往每个问题都有多个优秀方案,很难说谁是当前唯一的最佳选择,以及未来会发生什么变化。

Mantra定义了一些可长期遵守的核心原则,其它部分则可按需变化

Mantra原则很有前瞻性,能够很长时间不会过时。但是我们只使用了他们的原则,而并没有继续使用他们提供的mantra-core,因为他们提出了Mantra思想后,并不对这个mantra-core有太多关心。

启用路由

这里我选择FlowRouter搭配react-mounter

meteor add kadira:flow-router
meteor npm i --save react-mounter react react-dom

React Mounter lets you mount React components to DOM easily.
React Mounter supports Server Side Rendering when used with FlowRouter.

FlowRouter
react-mounter

依赖注入库

Mantra 使用依赖注入的目的是隔离代码。
Mantra 使用 react-simple-di 这个包来进行依赖注入。背后其实就是 React context。这个包接受 ContextActions 作为依赖。

Show Comments