这可能是一个愚蠢的问题,但我真的不知道发生了什么。
我已经创建了一个React App,crate react app
并将其作为私有存储库上传到我的GitLab帐户。(默认)React App在yarn start
本地运行后将按预期启动localhost:3000
。由于我需要为正在进行的代码开发创建软件包,因此我开始开始使用GitLab上的NPM注册表。这实际上很容易:
.npmrc
在应用目录中创建一个# 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
以初始化程序包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帐户中,但罚款范围很小。我现在唯一的问题是,yarn start
从本地存储库运行确实会导致白屏。我还意识到,yarn不再重定向到http://localhost:3000
,而是重定向到http://localhost:3000/scope/repository-name
。
我在这里想念什么?
谢谢!
经过大量的尝试和错误(甚至更多的研究),我终于找到了解决问题的方法。我想指出的是,我仍然不完全确定为什么会发生某些事情,但是希望这种解决方案可以帮助他们避免浪费时间。
基本上,我想将某些React组件作为NPM软件包发布到Gitlab。我正在一个包含大量不同React组件的项目中工作-其中一些是独立的单页应用程序,而另一些则是“应用程序”的一部分。作为应用程序一部分的组件也可能在以后的另一个项目中重用。因此,这使它们有资格被包装。
每当我开始开发时,我都会从头开始,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的文档很好。我的.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依赖项,这些依赖项将为我们进行转译(我将不解释所有内容,但请在此处查看更多信息)
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
如果一切顺利,你应该在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;
理想情况下,你应该看到以下屏幕
希望这对你有所帮助!