Publish Multiple Components to NPM with no package.jsons to Maintain | by Debbie O’Brien | Aug, 2021


Bit will create and manage a package.json file for each of your components. The package.json file can be found in your component’s folder inside your node_modules directory (node_modules/@scope/component-name/package.json). As this file is an auto-generated file created and managed by Bit you cannot edit this file directly. Instead, Bit provides us with the Pkg extension (known as an aspect) which handles the configuration, publishing, and packaging of our components.

The teambit.pkg/pkg aspect is added to the variants section in your workspace.jsonc file and can be applied to all components by using the "{*}" wildcard or to a specific set of components. This gives us better control over publishing our components as we can decide which ones we want to publish and to which remote scopes. For example, a group of base-ui components might be published to a scope on npm called base-ui and the group of components for utility functions might be published to a scope called utilities.

"teambit.workspace/variants": {
"{ui/**}": {
"teambit.pkg/pkg": {
// configuration goes here
}
}
}

To make the package a public package on npm add ["--access public"] to the value for packageManagerPublishArgs.

"teambit.workspace/variants": {
"{ui/**}": {
"teambit.pkg/pkg": {
"packageManagerPublishArgs": [
"--access public"
],
}
}
}

We can override the properties of the package.json for all our components at once. To do this we add the "packageJson" key and inside our object we add any of the properties we want to override. For the name property, we add the dynamic value "@scope/component-name". This will take the scope value from the defaultScope property in the workspace.jsonc file and append it to the name of your component. You can add other key-value pairs to the package.json file. For example, you can add a "license" property to specify the license of your package.

"teambit.workspace/variants": {
"{ui/**}": {
"teambit.pkg/pkg": {
"packageManagerPublishArgs": [
"--access public"
],
"packageJson": {
"name": "@{scope}/{name}",
"private": false
// add more configuration here
}
}
}
}

In order to publish our components to the npm registry we first must login to npm.

npm login

Add a new organization/scope in npm and give your scope a name.

In order for Bit to know where to publish the components, we need to add the name of the organization/scope created in npm to the publishConfig property under the "packageJson" key. Then add the registry url to the registry property which in this case is the URL to the npm registry.

"teambit.workspace/variants": {
"{ui/**}": {
"teambit.pkg/pkg": {
"packageManagerPublishArgs": [
"--access public"
],
"packageJson": {
"name": "@{scope}/{name}",
"private": false,
"publishConfig": {
"scope": "@my-org", // org created in npm
"registry": "https://registry.npmjs.org/"
// or any registry url
}
}
}
}
}

In order to publish components they must be tagged by using the bit tag command. Bit will run all tests and build the components that are new or have been modified or that are affected by this component and will generate a package.json file for each component.

bit tag --all

Your components are now visible on npm and can be installed to any project or application using npm install.

npm install @my-org-on-npm/component-name

You can add a README.md file to your component’s directories to provide more information about your component so they can be understood better on npm.



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here