如何解决通过Create React App创建NPM软件包并发布在Gitlab上 目标设置包装将组件添加到另一个应用程序
这可能是一个愚蠢的问题,但我真的不知道发生了什么。
我已经用crate react app
创建了一个React App,并将其作为私有存储库上传到了我的 GitLab 帐户。 (默认)React App在yarn start
本地运行localhost:3000
后按预期启动。由于需要为正在进行的代码开发创建软件包,因此我开始在GitLab上使用 NPM注册表。这实际上很容易:
- 在应用目录中创建一个
.npmrc
- 添加作用域,存储库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>"
- 运行
npm init
初始化程序包 - 像这样将作用域和 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
就像我说过的一样,该软件包会在 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;
理想情况下,您应该看到以下屏幕
希望这对您有所帮助!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。