时间戳

首页 > 解决方案 > 如何将现有的 CRA 应用程序发布到 npm(any) 存储库？

reactjs - 如何将现有的 CRA 应用程序发布到 npm(any) 存储库？

问题描述

我有一个工作应用程序，包含使用 create-react-app 创建的多个组件，每个组件本身都是一个单独的应用程序，再次使用 create-react-app 创建。

所有组件都被弹出，以便我可以将它们集成在一起。

现在，我想将组件发布到 NPM/Private 存储库，但根据 CRA 部署指南，它不支持直接开箱即用地发布基于 CRA 的组件，它建议使用 nwb，但我不知道如何使用 nwb 发布“现有”组件。

我还查看了一篇中篇文章，其中建议使用 babel-cli 生成 dist/build 文件，但是对于某些其他工作良好的 babel 配置，这将失败。（抱歉，目前没有链接，因为我用手机发这个）。

任何帮助表示赞赏。

标签： reactjscreate-react-appnpm-publish

解决方案

您可以使用babel-clinpm 包来编译您的 react 应用程序代码，然后您可以使用npm publish命令发布它，详细步骤如下。

  • npm install babel-cli使用命令在你的 create-react-app 中安装 babel-cli 包。

  • 创建.babelrc文件并添加以下内容以使用 babel 提供的“react-app”预设。

{
        "presets": [["react-app"]],
}
  • 使用以下代码添加distribute命令package.json，此命令将代码从文件夹编译src到dist文件夹。通常，我不会将我的测试文件包含在已发布的库中，因此该--ignore参数会跳过测试文件，例如*spec.js and *test.js，此参数是可选的，--ignore spec.js,test.js如果您想在已发布的库中包含测试文件，可以将其删除。该--source-maps参数包括所包含源文件的源映射：
    "distribute": "set NODE_ENV=production&&babel src --out-dir dist --copy-files --ignore spec.js,test.js --source-maps"
  • 执行将在文件夹npm run distribute中生成文件的命令。dist
  • 在 package.json 中设置private: false以供发布
  • 使用以下命令设置分布式包的主文件，在我的情况下，我直接使用App.js
"main": "dist/App.js"
  • 添加以下代码以发布包并提供与存储库相关的详细信息
"publishConfig": {
    "registry": ""    
  }
  • 您可以使用npm run publish命令将您的反应应用程序源代码分发为库。

推荐阅读