将React项目添加到React项目?或转到页面?

时间:2019-02-07 09:45:31

标签: reactjs

我错过了有关部署的信息。在我的React项目中运行npm run build后,我确实获得了一个构建文件夹。

与React.org中“ like button”中的示例不同:https://reactjs.org/docs/add-react-to-a-website.html,我的组件现在更大了,有很多子组件,可以调用...等等-这是一个完整的项目。

在我的另一个项目中,我想将此应用程序用作更大应用程序的另一个部分,以便在其他项目之间共享该项目。

这可能吗? 如是?怎么样?如果不?为什么?还有其他方法吗? 谢谢!

---编辑--- 其他一些项目不是用React编写的。有些是使用jQuery的单页应用程序。一些使用Backbonejs。也不使用npm。 submodule的选项仅适用于其他React项目

2 个答案:

答案 0 :(得分:0)

当然有可能。

我认为您正在寻找的是publish package to a private npm registry

但是,如果您的项目足够小,则使用github submodules可能会更容易。

在很大程度上,它取决于项目的可重用性的大小和范围。如果您的项目只是要导出要在其他项目中使用的某些组件/实用程序,则可能需要使用 private npm注册表,但是如果您想访问该项目的源代码和想要将其作为较大项目存储库的子集,则可能要使用 github子模块

答案 1 :(得分:0)

我想出了一种方法。对于整个项目。 React add to a website之类的许多页面仅涉及单个组件。不是整个项目。

现在我知道了。 在开发过程中,在index.js上我们有这样的内容:

ReactDOM.render(
    <MyMainComponent
        someParam="something"
    />
, document.getElementById('root'));

此代码使它在我的页面上运行。现在,要具有通用性,我可以将其包装在全局函数中的任何地方使用它:

window.reactMyMainComponent = (params, elm) => {
    ReactDOM.render(
        <MyMainComponent
            {...params}
        />
    , elm);
}

然后,我运行yarn build

然后从js复制/build/static/文件夹

然后将其带到任何其他项目,添加其中的3个javascript文件

然后我可以在任何地方调用我的新函数reactMyMainComponent,并在我想要的任何地方使用它:)

例如:

var statsBox = $(".someComp")
reactWordCloud({
    width:statsBox.width(),
    height: statsBox.height(),
    infoId:9260
}, statsBox[0])

Tada,现在每个地方都可以使用它:)所有项目。