1.0.0 • Published 1 year ago

dummynpmpackage v1.0.0

Weekly downloads
-
License
ISC
Repository
github
Last release
1 year ago

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)
  • npm publish to publish the package