1

我想将我的流星应用程序拆分为 web 和移动/cordova 部分，但是我不想复制代码也不想创建 2 个单独的项目。我也想使用 React 而不是 Blaze，因为我更熟悉它（最近才开始使用流星）。有很多讨论如何更好地为 web/mobile 拆分你的代码（只是谷歌），但是我喜欢本地包方法并决定让它工作。

我发现了这个很棒的github 存储库，它展示了如何拆分 web 和应用程序代码，但是在添加 react 时我正在努力实现类似的结果。因此，如果有人有关于如何做的回购或帖子，请分享。如果不是，也许我们可以通过在此问题中提供分步指南来为其他开发人员提供便利。

我没有对流星中的包裹做过任何事情。所以请耐心等待:-)

目前，我什至正在努力使一个包在我的流星应用程序中工作。到目前为止，我有以下内容（在创建和清理流星应用程序之后）：

1）运行以下命令

meteor create --package app-base

2）在项目文件夹中创建root.html并填充它

<head>
  <title>despite</title>
</head>

<body>
  <div id="render-target"></div>
</body>

3) 向 app-base.jsx 添加了一些代码：

if (Meteor.isClient) {
  Meteor.startup(function () {
    // Use Meteor.startup to render the component after the page is ready
    React.render(<App />, document.getElementById("render-target"));
  });
}

4) 添加 App.jsx:

App = React.createClass({
  render() {
    return (
      <div>
        Hello World!
      </div>
    )
  }
})

5) 将 react 和文件添加到 package.js：

...
api.use(['ecmascript', 'react']);
api.addFiles(['app-base.js', 'App.jsx']);
...

6) 将 app-base 添加到 .meteor/packages 文件

此时构建，但打开浏览器窗口时出现以下错误：

Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

似乎 Meteor.startup 在渲染 DOM 之前运行？

更新：我console.log(document.getElementById("render-target")之前添加了ReactDOM.render，这是null出于某种原因......我也试过了

document.body.innerHtml = '<div id="render-target"></div>'
ReactDOM.render(<App />, document.getElementById('render-target'));

接着

const element = document.createElement('div');
documnet.body.appendChild(element)
ReactDOM.render(<App />, element);

现在它在页面上呈现 Hello World！甜的！虽然不确定这种方法的可靠性。同样在项目目录中删除html文件后，应用程序仍然有效

4

0 回答 0