dummynpmpackage
v1.0.0
Published
a package to test npm publish
Downloads
1
Maintainers
Readme
instructions to create a npm package. source: https://betterprogramming.pub/how-to-create-and-publish-react-typescript-npm-package-with-demo-and-automated-build-80c40ec28aca
Step 1. Preparing the Project
- In the command line of your project, execute:
npm init -y
- create src folder
Step 2. Create a react component
- Create your component
- Create an index.ts:
import App from './App'; export { App }
Step 3. Change scripts in package.json
```
"scripts": {
"build": "tsc"
},
```
Step 4. Adding tests with Jest:
npm add -D jest jest-canvas-mock jest-environment-jsdom ts-jest @types/jest @testing-library/react
- Create jestconfig.json:
{ "transform": { "^.+\\.(t|j)sx?$": "ts-jest" }, "testRegex": "(/tests/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$", "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"], "testEnvironment": "jsdom" }
- Change/update tests key in package.json:
"test": "jest --config jestconfig.json"
- replace build to:
Step 5. Test package before publish/update
- add "prepare" and "prepublishOnly" to scripts in package.json:
```
"scripts": {
"build": "tsc",
"prepare": "npm run build",
"prepublishOnly": "npm run test"
},
```
- replace "main" to:
```
"main": "./dist/cjs/index.js",
"module": "./dist/esm/index.js",
"types": "./dist/esm/index.d.ts"
```
Step 6. Add info about git repository:
"repository": {
"type": "git",
"url": "git+https://github.com/gapon2401/my-react-typescript-package.git"
},
Step 7. Specify that the project that will use our package must have the NEEDED DEPENCDENCIES
"peerDependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
Step 8: To ensure that your package does not have any redundant files, use only allowed files and folders that will be added to the package:
"files": [
"dist",
"LICENSE",
"README.md"
],
Step 9: Add keywords key to package.json:
"keywords": [
"react",
"typescript",
"npm",
"package"
],
Step 10: Specify you license:
"license": "MIT",
Step 11: Publishing to NPM
- Check if your package name is available:
- go to: https://www.npmjs.com/ and if page is 404, the package-name is available
-
npm adduser
, if you dont have an user yet. -npm login
-npm publish --dry-run
to check if your files are correct, there are no error, everything is ok (this doesnt publish anything, only check)
- go to: https://www.npmjs.com/ and if page is 404, the package-name is available
-
npm publish
to publish the package