-
Import the CSS Styles in the Root Component
To apply the styles from the npm module throughout your project, add the following import statement in your root component (e.g.,
index.js
orApp.js
):import '@shu0725/test/styles'; // Import the built CSS file
-
Configure TypeScript for Module Resolution
Update your tsconfig.json file to use the bundler module resolution strategy. Your tsconfig.json should include:
"compilerOptions": { // Other options... "moduleResolution": "bundler" }
We are finally ready to publish our component to npm. Here is our publishing checklist:
-
Check Version Number
- Ensure that the version number in your
package.json
file is correct and follows semantic versioning rules. Each time you publish to npm, you must use a new version number.
- Ensure that the version number in your
-
Run Tests
- Ensure all tests pass:
$ npm test
- Ensure all tests pass:
-
Create Build Files
- Create the build files:
$ npm run build
- Both UMD and ESM module formats are created and placed in the
/dist
folder. Note that React is not bundled alongside your component. Only your component code and any dependencies are included.
- Create the build files:
-
Log into npm
- Ensure you are logged into npm. If not, type:
$ npm login
- Ensure you are logged into npm. If not, type:
-
Publish Your Component
- Publish your component:
$ npm publish
- Publish your component: