通过Create React App创建NPM软件包并发布在Gitlab上 目标设置包装将组件添加到另一个应用程序

编程问答 2022-06-04

问题描述

这可能是一个愚蠢的问题，但我真的不知道发生了什么。

我已经用crate react app创建了一个React App，并将其作为私有存储库上传到了我的 GitLab 帐户。 （默认）React App在yarn start本地运行localhost:3000后按预期启动。由于需要为正在进行的代码开发创建软件包，因此我开始在GitLab上使用 NPM注册表。这实际上很容易：

  1. 在应用目录中创建一个.npmrc
  2. 添加作用域，存储库ID 和身份验证令牌（我已选择使用个人令牌）
# Set URL for your scoped packages.
# This is my top-level group at GitLab

@scope:registry=https://gitlab.com/api/v4/packages/npm/


# Add the token for the scoped packages URL.
# I have chosen to use the personal key -> more infos: https://docs.gitlab.com/ee/user/packages/npm_registry/

//gitlab.com/api/v4/packages/npm/:_authToken="<auth-token>"


# Add token for uploading to the registry.

//gitlab.com/api/v4/projects/<project-ID>/packages/npm/:_authToken="<auth-token>"
  1. 运行npm init初始化程序包
  2. 像这样将作用域和 publishConfig 添加到package.json 
{
  "name": "@scope/package-name","version": "0.1.0","main": "index.js",<-- the entry point 
  ...
  "publishConfig": {
    "@scope:registry": "https://gitlab.com/api/v4/projects/<project-ID>/packages/npm/"
  }
}
  1. 运行npm publish

就像我说过的一样，该软件包会在 scope 罚款的情况下上传到我的GitLab帐户。我现在唯一的问题是从本地存储库运行yarn start会导致白屏。我还意识到，yarn不再重定向到http://localhost:3000，而是重定向到http://localhost:3000/scope/repository-name。

我在这里想念什么？

谢谢！

解决方法

经过反复尝试（甚至更多研究），我终于找到了解决问题的方法。我想指出的是，我仍然不完全确定为什么会发生某些事情，但是希望这种解决方案可以帮助他们避免浪费时间。

目标

基本上，我想将某些反应组件作为 NPM包发布到Gitlab。我正在一个项目中工作，该项目包含许多不同的React组件-其中一些是独立的单页应用程序，而另一些则是“ App”的一部分。作为应用程序一部分的组件也可能在以后的另一个项目中重用。因此，这使它们有资格被包装。

每当我开始开发时，我就从create react app开始，由于React App通常是单页应用程序，因此打包它实际上没有任何意义。但是，如果我们要开发一些组件，这些组件以后将成为应用程序的一部分，但仍然想在本地测试行为，那么这样做是有意义的。

我将描述如何在Gitlab上创建软件包，但我想它与其他任何存储库托管服务都一样（除了带有身份验证和范围的详细信息）。

设置

我们首先设置我们的React App 

npx create-react-app react-package

安装完所有组件后，导航至应用程序文件夹cd react-package，然后开始开发组件。对于我们的示例，我们在src文件夹内创建一个名为PackagedComponent的文件夹，其中将包含2个文件PackagedComponent.jsx和index.js。

我们的组件将非常简单

import React from 'react`;

export const PackagedComponent = () => {
  return (
    <h1>This is my packaged component!</h1>
  );
}

index.js将作为起点 

export { PackagedComponent } from './PackagedComponent';

接下来，我们要做的是在Gitlab上创建一个存储库，并将其链接到我们刚刚创建的项目。然后，我们在应用程序的根目录中创建一个.npmrc文件。这是可选的，但我发现这确实很容易，因为Gitlab上有一个不错的documentation。我的.npmrc文件看起来像这样

# Add token for uploading to the registry. Replace <your_project_id>
# with the project you want your package to be uploaded to.
# The auth toke is only necessary if you have a private package

//gitlab.com/api/v4/projects/< your_project_id>/packages/npm/:_authToken="< your_auth_token>"

接下来要做的是为项目创建package.json，因此我们要做

npm init

暂时使用所有标准选项。

包装

现在是时候进行实际的建筑和包装。首先，我们必须安装更多的dev依赖项，这些依赖项将为我们进行转译（我将不解释所有这些，而是​​查看here以获取更多信息）

npm i --save-dev babel-cli babel-preset-env babel-preset-react babel-preset-stage-0

现在我们必须修改package.json。首先删除该行

"private: true"

然后替换 build命令 

"scripts": {
  "build": "rm -rf dist && NODE_ENV=production npx babel src/PackagedComponent --out-dir dist --copy-files",...
},

然后添加行

"main": "dist/index.js","module": "dist/index.js","files": "/dist","babel": {
   "presets": [ "react","env","stage-0" ]
}

更改name以适应范围。就我而言，我创建了一个包含我的packaged-component项目的组。在这种情况下，组名是范围@group-name/packaged-component-package。

"name": "@group-name/packaged-component-package",

Gitlab需要一个publishConfig，所以我们必须添加

"publishConfig": {
  "@group-name:registry": "https://gitlab.com/api/v4/projects/<your_project_id>/packages/npm/"
}

请注意您正确使用了scope和project id！

现在我们只需要安装缺少的软件包

npm i

运行构建命令

npm run build

并发布到Gitlab 

npm publish

如果一切顺利，您应该会在Gitlab上的软件包中找到您的软件包，该软件包位于 Packages＆Registries 。

将组件添加到另一个应用程序

现在，我们要在另一个应用程序中使用打包的组件。我们可以再次运行npx create-react-app test-app。在应用目录中再次添加.npmrc 

# Set URL for your scoped packages.
@group-name:registry=https://gitlab.com/api/v4/packages/npm/

# Add the token for the scoped packages URL. This will allow you to download
# `@foo/` packages from private projects.
# You only need this if the package is private
//gitlab.com/api/v4/packages/npm/:_authToken="<your_auth_token>"

完成此操作后，运行npm i，您的组件应出现在node_modules下的@group-name/packaged-component-package目录中。

然后打开App.js并添加行

import './App.css';

// import the packaged component
import { PackagedComponent } from '@group-name/packaged-component-package';

function App() {
  return (
    <div className="App">
      <PackagedComponent />
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

理想情况下，您应该看到以下屏幕

enter image description here

希望这对您有所帮助！