模拟封装一个含ts声明文件的js库并发布npm包

新建一个文件夹

mkdir get-px

项目初始化

npm init

之后填写main入口的时候注意下，写成./dist/get-px.js

{

    "name": "get-px",

    "version": "1.0.0",

    "description": "a demo of ts",

    "main": "./dist/get-px.js",

    "scripts": {

        "test": "echo \\"Error: no test specified\\" && exit 1"

    },

    "keywords": [

        "typescript"

    ],

    "author": "jjyin",

    "license": "MIT"

}

tsc初始化

tsc --init

得到一个带注释的tsconfig.json文件。

接着关闭compilerOptions对象的以下注释，并设置。

"declaration": true, /\* Generates corresponding '.d.ts' file. \*/

// ...
// 设置为./dist
"outDir": "./dist", /\* Redirect output structure to the directory. \*/

// ...

添加一个exclude。

"exclude": [

    "./dist",

    "./example"

]

安装typescript

npm i typescript -D

新建主代码文件——get-px.ts

touch get-px.ts

// get-px.ts
const getPX = (arg: string | number): string => {

    if (typeof arg === 'string') {

        if (arg.substring(arg.length - 2) === 'px') {

            return arg;

        } else {

            throw new Error('the argument of getPX should be a string width \\'px\\'');

        }

    } else {

        return arg + 'px'

    }

}

export = getPX;

编译文件get-px.ts

tsc

之后，dist文件生成

验证一下生成的get-px.js文件。

把get-px.js文件当作是一个库文件引入使用验证一下是否可行。

1、新建一个测试文件，在dist文件夹同级，新建一个example文件夹，里面新建test.ts文件，如下所示。

// test.ts
import getPX = require('./../dist/get-px');

console.log(getPX(1));

2、编译test.ts文件

 cd example
 
 tsc test.ts

3、查看生成的test.js文件

4、node运行一下test.js文件

可行。

发布npm包

登录

npm login

如果在npm官网没注册过账号，先注册一下，再登录。

输入用户名、密码、邮箱。

如果登录遇到npm ERR! no_perms Private mode enable, only admin can publish this module:这个错误，可以尝试如下解决方法。

npm config set registry http://registry.npmjs.org

添加.npmignore文件

/example/

把不需要发布的文件写在里面。

发布

// 回到上一级目录
cd ..

// 发布
npm publish

发布成功

使用发布的包

为防止有冲突，在安装使用get-px之前，先改一下package.json文件的name属性。

安装

npm i get-px@1.0.0

项目中使用

test.ts文件中的引入文件，改写成

import getPX = require('get-px');

console.log(getPX(1));

控制台执行

cd example

tsc test.ts 

node test.js

结果