Pre-knowledge point

  • Head over to www.npmjs.com/ to sign up for an NPM account
  • If set up NPM Taobao mirror, please restore it first, the default has been restored in the article, after the completion of the release can be set back
Restore: NPM config Settings: set the registry https://registry.npmjs.org/ NPM config set registry at http://registry.npm.taobao.org/Copy the code
  • NPM filtering part file reference www.jianshu.com/p/6c2f5c31b…
  • NPM has made an optimization for C1.0.0 and C2.0.0 for A and B packages. In short, NPM has helped you optimize, generally we do not need to deal with.
  • Have time to learn about the liaolongdong.com/2019/01/24/…

Create a project

  • Create an empty file and runnpm init, set your own version and package name
  • Modify thepackage.jsonFiles, we will introduce parts of the package:ntypescriptUsed for packaging, formerly TSC,typescriptSuppose we develop a time display kit that we introducemoment.

Here is my personal package.json file, where note the main, types files for output files. More configuration, please refer to www.npmjs.com/package/nty…

{"name": "wd-npm-demo", "version": "1.0.0", "description": "My NPM package written in TS", "main": "index.js", "types": "index.d.ts", "scripts": { "build": "ntsc", "publish": "npm run build && npm publish", "tsp": NTSC - p. "/"}, "author" : "wen. Da", "license" : "ISC", "dependencies" : {" moment ":" ^ 2.29.1 ",}, "devDependencies" : {" ntypescript ":" 1.201706190042.1 ", "typescript" : "^ 4.1.2"}, "file" : [". The idea ", "package - lock. Json", "bin"]}Copy the code

Run the NPM i.

  • newtsconfig.jsonFile, solve the compilation prompt problem"declaration": true

You can set the “allowSyntheticDefaultImports” : true to allow no default default import export module, or “skipDefaultLibCheck” : true to skip the library file declaration file type checking. Here’s my personal, but of course, you can use the latest ES

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["es2017", "es7", "es6", "dom"],
    "declaration": true,
    "outDir": "dist",
    "strict": true,
    "jsx": "react",
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules", "dist"]
}
Copy the code
  • Root Directory Creationindex.tsFile, my file is as follows
import moment from 'moment' export function renderDate(val? : Date){ if (! val) return ''; return moment(val).format('YYYY-MM-DD') } export function renderTime(val? : Date){ if (! val) return ''; return moment(val).format('YYYY-MM-DD HH:mm:ss') } export function renderTimes(val? : Date){ if (! val) return ''; return moment(val).valueOf(); }Copy the code

Publish the project

  • Open the terminal CD to the project
  • npm loginLogin Enter your account, password, and email address
  • performnpm publishRelease the source code
  • If only the dist package is distributed, go tonpm run build, generate the dist file and create it under the dist filepackage.jsonFile, and then release the Dist package
  • In their own projectsnpm i wd-npm-demoOr publish your own package and give it a try
import { renderDate, renderTime, renderTimes } from 'wd-npm-demo';
console.log(renderDate(new Date()))
console.log(renderTime(new Date()))
console.log(renderTimes(new Date()))
Copy the code

tip

  • The package name cannot be the same as an existing package name, and the package name cannot be used within 24 hours after the package is revoked
  • We can also create.mdFile to write developer quotes
  • Remember to change the version number when upgrading the version
  • Revocable within 72 hoursnpm unpublish wd-npm-demo --force
  • To preserve the NPM environment, remove our own test package