从 Create React App 创建 NPM 包并在 Gitlab 上发布

Question

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

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

.npmrc

添加 scope、repository ID 和 auth token（我选择使用个人令牌）像这样

# 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>"

运行 npm init 初始化包
将 scope 和 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/"
  }
}

运行 npm publish

就像我说的，包被上传到我的 GitLab 帐户，在 scope 下没问题。我现在遇到的唯一问题是我本地存储库中的运行ning yarn start 确实会导致空白屏幕。我还意识到 yarn 不再重定向到 http://localhost:3000 而是重定向到 http://localhost:3000/scope/repository-name.

我在这里错过了什么？

谢谢！

Answer 1

经过大量的尝试和错误（甚至更多的研究），我终于找到了解决问题的方法。我想指出的是，我仍然不完全确定为什么会发生某些事情，但希望这个解决方案能帮助一个人或另一个人避免浪费时间。

目标

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

每当我开始开发时，我都会从 create react app 开始，因为 React 应用程序通常是 单页应用程序， 打包它真的没有意义。尽管如此，如果我们想开发一些稍后将成为应用程序一部分的组件，但仍想在本地测试行为，那么这样做是有意义的。

我将描述如何在 Gitlab 上创建包，但我想它与任何其他存储库托管服务的工作方式相同（除了身份验证和范围的细节）。

设置

我们从设置 React 应用程序开始

npx create-react-app react-package

安装完所有内容后，导航到应用程序文件夹 cd react-package 并开始开发组件。对于我们的示例，我们在名为 PackagedComponent 的 src 文件夹中创建了一个文件夹，其中将包含 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 上创建一个存储库，然后 link 它到我们刚刚创建的项目。然后我们在应用程序的根目录中创建一个 .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

暂时使用所有标准选项。

包装

现在是进行实际构建和打包的时候了。首先，我们必须安装更多的开发依赖项，它们将为我们进行转译（我不会解释所有这些，但请查看 here 了解更多信息）

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

现在我们要修改package.json。首先删除行

"private: true"

然后替换构建命令

"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

如果一切顺利，您应该会在 Packages & Registries.

下看到您在 Gitlab 上的组中打包

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

现在我们想在另一个应用程序中使用我们打包的组件。我们可以再次运行 npx create-react-app test-app。在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 并且您的组件应该出现在 @group-name/packaged-component-package.

下的 node_modules 目录中

然后打开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;

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

希望对您有所帮助！

从 Create React App 创建 NPM 包并在 Gitlab 上发布

Creating an NPM package out of a Create React App and publish on Gitlab

npm

gitlab

create-react-app

npm-publish

npm-package

目标

设置

包装

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