0

I am recently studying Meteor which is absolutely convenient and powerful. But so far it is still not clear what is the entry point of a Meteor APP, in other words, which file/function will be executed first?

A simple example:

client/hello.jsx:

import React from 'react';

export const Welcome = ({name}) => (
    <div>
        Hello, {name}.
    </div>
);

client/routes.jsx:

import React from 'react';
import {mount} from 'react-mounter';
import {Layout, Welcome} from './hello.jsx';

FlowRouter.route("/", {
  action() {
    mount(Layout,
      {content: (<Welcome name="My Shining Name" />)}
     );
  }
});

then I use command:

meteor -p 12345

Then a webpage is launched! It looks pretty magic: where is the server running? how the webpage is generated? Most importantly, which piece of code will be executed first?

Thanks

Derek

4

1 回答 1

3

Meteor 捆绑源客户端文件并将捆绑包发送到客户端。JS 可能会被转译，并且样式表可能会在此过程中自动添加前缀。最后，客户端执行捆绑包。

源客户端文件是指名为'client'的文件夹中的文件。这些源文件按照本文档中描述的顺序执行，引用如下。

  1. HTML 模板文件总是在其他所有内容之前加载
  2. 以 main 开头的文件。最后加载
  3. 接下来加载任何 lib/ 目录中的文件
  4. 接下来加载具有更深路径的文件
  5. 然后按整个路径的字母顺序加载文件

给定列表，为自己建立一些关于 Meteor 应用程序文件结构的初步知识至关重要，例如，哪个文件去哪里（客户端/服务器）以及哪些文件被急切地加载对于决定如何构建一个应用。

回到你的应用程序。您呈现的网页本质上是Layout包含另一个 React 组件的 React 组件Welcome。它们被挂载react-mounter到 HTML 模板中的 DOM 节点上，我相信在您的示例应用程序中是一个名为“client/index.html”或“c​​lient/hello.html”的文件。上述节点通常是一个div具有指定属性的节点，或者是在运行时id创建的 DOM 节点。react-mount

说到服务器端，当您启动 Meteor 应用程序时，Meteor 会运行一个增值的 HTTP Web 服务器，并且您可以使用Meteor API 编写您喜欢的功能。

我希望以上信息可以帮助您继续使用 Meteor 构建应用程序。享受！

于 2016-09-28T08:10:39.087 回答