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

Question

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

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

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

我还查看了一篇中篇文章，其中建议使用 babel-cli 生成 dist/build 文件，但是对于某些 babel 配置来说失败了，否则效果很好。（抱歉，目前没有链接我是通过手机发布的）。

任何帮助表示赞赏。

Answer 1

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

• 使用npm install babel-cli命令在 create-react-app 中npm install babel-cli 。

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

{
        "presets": [["react-app"]],
}

• 使用以下代码在package.json添加distribute命令，该命令将代码从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命令将您的 React 应用程序源代码作为库分发。