使用Bit来发布多个包，每个包都有自己的自动生成的package.json
用一个命令将多个组件发布到npm。学习如何 :)照片：Paul Esch-LaurentonUnsplash
在多个项目中或与其他开发者共享组件似乎是最复杂的事情，但它真的不应该是这样。有了诸如npm或GitHub包之类的包注册机构，我们应该可以很容易地通过发布包来分享我们的组件。
如果你曾经向npm注册中心发布过一个包，那么你会知道你需要创建一个package.json文件来发布它。
发布到注册中心的包必须包含一个package.json文件，该文件列出了你的项目所依赖的包，使用语义版本规则指定了你的项目可以使用的包的版本，并使你的构建可以重现，以便你可以轻松地与其他开发人员或在多个项目中分享它。
这听起来不像是太多工作，通过遵循npm文档上的步骤，我们可以将该组件发布到npm上，供任何人下载。这意味着，如果你创建了一个实用函数、一个无服务器函数、一个React钩子、一个UI组件、一个CSS样式表或CSS动画，你想与其他人或另一个项目分享，那么这就是你的方法。
但是，如果你想分享50个组件或100个组件，甚至是1000个组件，会发生什么情况。你绝对没有办法管理这些组件的package.json文件。
如果这些都是组件，有太多的package.jsons需要管理。照片：CHUTTERSNAPonUnsplash
复制和粘贴组件文件以在你的其他应用程序中重新使用它们，可能只是更快。但现在你要维护两个相同的组件，这一点都不理想，尤其是在大型企业或跨多个团队工作时。你开始失去了跨应用程序的一致性。
如果我告诉你，有一种方法可以发布多个组件，而不必为每个组件管理package.json。听起来好得令人难以置信，对吗？
这个解决方案是 位.
Bit将为你的每个组件自动生成一个package.json文件，这意味着你不需要创建或维护多个package.jsons。通过使用Bit，我们可以用一个命令同时发布多个组件。bit标签--all命令将构建你工作空间中所有新的或已修改的组件。
Bit在一个专门的、临时的目录中构建每个组件，以验证所有的依赖关系都被正确定义，并且在它创建组件的新版本之前，该组件可以真正在任何项目中重复使用。
你可以通过指定版本或从--补丁、--小号或--大号标记中选择你的组件应该有的版本。如果你不添加一个版本，那么将创建一个补丁版本。
作为构建管道的一部分，Bit将运行所有组件的测试以确保测试通过。如果测试失败，你的组件将不会被发布。你可以通过一个标志来跳过测试，但这只是违背了编写测试的目的，所以并不推荐这样做。
一旦测试通过，你的每个组件都会被创建一个完全隔离的版本，包括它们自己的dist文件夹、package.json和node_modules文件夹，其中包括你的组件所依赖的所有库或其他组件。这意味着你不需要管理每个组件的依赖关系。Bit会自动为你找到组件中的所有导入语句，并生成一个依赖列表和devDependencies（静态代码分析）。
组件包含其源文件、依赖关系图和任何使组件运行所需的工具。
当你运行比特标签时，比特为每个组件创建了一个单独的、隔离的工作空间，称为capsule。这就是使你的组件完全隔离和独立的原因，发布就是在这里进行的。
你的新的或修改过的组件会被发布到你选择的包注册表上。一条命令就有数百个组件被添加到包注册表中。
当你更新一个组件并运行bit tag --all时，Bit会自动检查其他组件是否需要更新，例如使用更新后的组件的组件，并会建立、更新和发布所有受影响的组件。
在任何时候，你都可以完全控制这个过程，如果你想只发布一个组件，你可以在命令的最后加上该组件的ID，而不是--all标志。
由于每个组件都有自己的构建管线，一个工作区可以很容易地包括许多类型的组件。由于没有严格的目录结构，你可以有深度嵌套的组件，你可以在工作空间中移动组件而不需要对组件或配置进行任何重构。
这种发布组件的过程是如此的用户友好，并且消除了管理每个组件的多个 package.json文件的痛苦。
因为你有更少的维护，你可以发布更小的组件，并真正使一切变得更加模块化。Bit可以帮助你管理和扩展到一个单一的 repo中的100多个组件。
那么有什么好处呢？
没有。 比特是开源的因此可以免费使用。
安装Bit
要使用Bit，你必须使用BVM，即Bit的版本管理器来安装它。
npm i -g @teambit/bvm # install bvm
创建一个工作区
然后创建一个工作区来放置你的组件。你可以在一个新的目录下或者在一个已经存在的项目中创建一个工作区。
bit new react-workspace my-workspace
创建一个组件
所有的组件都必须在自己的文件夹中，并包含一个导出组件的index.js文件。你可以用bit create来创建你的组件，或者用bit add来添加你已经存在的组件。
bit create react ui/my-component
这个命令将创建一个基本的
启动开发服务器
要看到你的组件在用户界面上运行，在localhost:3000上运行位启动命令。
bit start
UI有很多功能，可以让你阅读组件的文档，看到组件的组成，检查你的测试是否通过，可视化组件的依赖关系图，检查组件的代码，以及查看组件的更新日志和配置。
产品卡组件的依赖关系图，每一个单独的包都可以发布到npm，并在许多应用程序中重复使用。
配置工作区
Bit将为你的每个组件创建和管理一个package.json文件。package.json文件可以在你的node_modules目录下的组件文件夹中找到_（node_modules/@scope/component-name/package.json）。_由于这个文件是由Bit创建和管理的自动生成的文件，你不能直接编辑这个文件。相反，Bit为我们提供了Pkg扩展（被称为一个方面），它可以处理我们组件的配置、发布和打包。
teambit.pkg/pkg aspect被添加到你的workspace.jsonc文件中的variants部分，可以通过使用"{*}"通配符应用于所有组件，也可以应用于一组特定的组件。这使我们能够更好地控制发布我们的组件，因为我们可以决定我们要发布哪些组件以及发布到哪些远程作用域。例如，一组base-ui组件可以发布到npm上一个叫做base-ui的作用域，而一组实用功能的组件可以发布到一个叫做utilities的作用域。
"teambit.workspace/variants": {
让你的包成为公共包
为了使包成为npm上的公共包，在packageManagerPublishArgs的值中添加["--access public"]。
"teambit.workspace/variants": {
覆盖Package.json
我们可以一次性覆盖所有组件的package.json的属性。要做到这一点，我们添加 "packageJson "键，并在我们的对象中添加我们想要覆盖的任何属性。对于名称属性，我们添加动态值"@scope/component-name"。这将从workspace.jsonc文件中的defaultScope属性中获取范围值，并将其附加到你的组件名称中。你可以在package.json文件中添加其他_键值_对。例如，你可以添加一个 "license "属性来指定你的包的许可证。
"teambit.workspace/variants": {
在npm中创建一个Ogranization
为了将我们的组件发布到npm注册中心，我们首先必须登录到npm。
npm login
在npm中添加一个新的组织/范围，并给你的范围起个名字。
将npm组织名称添加到你的Workspace.json中。
为了让Bit知道在哪里发布组件，我们需要将在npm中创建的组织/范围的名称添加到 "packageJson "键下的publishConfig属性。然后在注册表属性中添加注册表的网址，在本例中是npm注册表的网址。
"teambit.workspace/variants": {
发布你的组件
为了发布组件，必须使用bit tag命令来标记它们。Bit将运行所有的测试，并建立新的或已修改的或受此组件影响的组件，并将为每个组件生成package.json文件。
bit tag --all
从npm使用你的组件
你的组件现在在npm上是可见的，可以用npm安装到任何项目或应用程序中。
npm install @my-org-on-npm/component-name
你可以在你的组件的目录中添加一个README.md文件，以提供更多关于你的组件的信息，这样它们就可以在npm上被更好地理解。
结论
这就是你如何将多个组件发布到npm，100%免费。不需要账户或登录到Bit。你的代码是100%属于你的。没有锁定。你可以发布到npm或你选择的包注册处。欢迎来到开放源代码。欢迎来到Bit。
了解更多
将多个组件发布到NPM，不需要维护package.jsons最初发表在Medium上的Bits and Pieces，在那里人们通过强调和回应这个故事继续对话。
