从CreateReact应用程序创建NPM包并在Gitlab上发布

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

我用

cratereact App

创建了一个React App，并将其作为私有存储库上传到我的GitLab帐户。在

localhost:3000

本地运行

warn start

后，（默认）React应用程序按预期启动。因为我需要为正在进行的代码开发创建包，所以我开始在GitLab使用NPM注册表。这其实很简单：

在应用程序目录中创建一个

.npmrc

添加范围，存储库ID和身份验证令牌（我选择使用个人令牌），如下所示

#为您的范围包设置URL。
#这是我在GitLab的顶级团队
@经营范围：注册处=https://gitlab.com/api/v4/packages/npm/
#为作用域包URL添加标记。
#我已选择使用个人密钥->更多信息：https://docs.gitlab.com/ee/user/packages/npm_registry/
//gitlab.com/api/v4/packages/npm/：\u authToken=“”
#添加用于上载到注册表的令牌。
//gitlab.com/api/v4/projects//packages/npm/：_authToken=“”

运行

npm init

初始化包

向

package.json添加作用域和publishConfig，如下所示

{
“名称”：“@scope/package name”，
“版本”：“0.1.0”，
“main”：“index.js”，经过大量的尝试和错误（甚至更多的研究），我终于找到了解决我问题的方法。我想指出的是，我仍然不能完全确定为什么会发生某些事情，但希望这个方法能帮助一方或另一方避免浪费时间

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

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

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

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

npx create-react-app react-package

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

我们的组件将非常简单

从“React”导入React；
导出常量PackagedComponent=（）=>{
返回(
这是我的打包组件！
);
}

index.js
将作为起点

从“/PackagedComponent”导出{PackagedComponent}；

接下来我们要做的是在Gitlab上创建一个存储库，并将其链接到我们刚刚创建的项目。然后我们在应用程序的根目录中创建一个
.npmrc
文件。这是可选的，但我发现这非常容易，因为Gitlab上有一个很好的存储库。我的
.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

"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" ]
}

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;

更改
名称
以适应范围。在我的例子中，我创建了一个包含我的
打包组件
项目的组。在这种情况下，组名称是范围
@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/"
}

运行build命令

npm run build

并发布到Gitlab

npm publish

如果一切顺利，您应该可以在Gitlab上的Packages&Registries下看到您的团队打包

将组件添加到另一个应用程序
现在我们想在另一个应用程序中使用我们的打包组件。我们可以再次运行
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 publish

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

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;