TypeScript development projects from scratch using packaged and released to npm

Foreword

typescript mainstream front-end development framework for the future, will be increasingly important in the process of front-end development, I believe this article will tell you a great help!

Development environment to build

Creating ming-npm-package folder

我在桌面上创建了一个ming-npm-package的文件夹，然后在编辑器里面打开

Initialize the project

npm init

To create a user package.json by npm init initialization file project

Can npm init -y This is the default configuration used, I personally use is npm init

Setting configuration item

package name: (ming-npm-package)
version: (1.0.0)
description: use ts
//这下边的entry point: 这个是指定的最后使用的文件，而不是编译文件
entry point: (index.js) ./dist/ming-npm-package.js
test command:
git repository:
keywords: typescript
author: xiaoming
license: (ISC) MIT
About to write to C:\Users\明\Desktop\ming-npm-package\package.json:

{
  "name": "ming-npm-package",
  "version": "1.0.0",
  "description": "use ts",
  "main": "./dist/ming-npm-package.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "typescript"
  ],
  "author": "xiaoming",
  "license": "MIT"
}


Is this OK? (yes)

This is my set of configuration items, no problem you can enter yes and then enter the

Create a file tsconfig.json

tsc --init

It will generate a file tsconfig.json

Modify the default file tsconfig.json

Open these two comments

"declaration": true, //打包之后是否生成声明文件

"outDir": "./dist", //输出文件

Add exclude, ignore the dist file

In the package there will be excluded when the path specified file

"exclude": [
    "./dist"
  ]

Installation depends

npm install typescript -D

Start coding

Creating ming-npm-package.ts file

Used to write function

const arrayMap = (array: [], callback:(item: any,index: number, arr: any[]) => any): any => {
    let i = -1
    const len = array.length
    let resArray = []
    while (++i < len){
        resArray.push(callback(array[i],i,array))
    }
    return resArray
}
export = arrayMap

Compile the code

tsc

At this time, our project will be more of a dist directory

Login npm

You can not sign up for an account npm

This is the URL

https://www.npmjs.com

Then the editor input terminal which

npm login

Then it will come out the user name, password, email them in order to fill out

Create a file .npmignore

Create a .npmjgnore in the project root directory

This fact, and .gitignor almost, that is, when you send npm package, which files or folders hope not to send on this npm

Here I do not write the node_modules, which is the default ignored

version number

In package.json inside the version number,
every time we change released

release

npm publish

Successfully posted

Installation

We package.json file inside the name change:
ming-npm

goal is we want to install the package can not be package.json inside the package name is the same

And then install it in our package:

npm install [email protected]

With other packages as npm install the package name

Successful installation:

Publish again

If you need to publish the name must be a change of version number change again before

And then compile the code tsc

npm publish publishing

Source

This is my code

https://github.com/shifengming/ming-npm-package

At last

Would like to see the article of the students have a harvest!

If there is something wrong article also hope to correct me!

Finally I wish you all getting good!

Welcome to join, learn the front together, progress together!