typescript发布npm包添加代码提示

最近在更新d-utils代码的时候将代码语言换成了typescript,目的有两个,一就是本来就打算重新更新一下这个代码,二就是之前的代码在导入代码之后无法支持代码的自动提示,对于我来说是无法接受的,于是使用ts重新更新了一下

1.0.96版本是没有提示的 1.1.15之后是支持代码提示的

实现方式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "name": "@dw/d-utils",
  "version": "1.1.19",
  "description": "d-utils",
  "main": "./lib/index.js",
  "typings": "types/index.d.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production && tsc",
    "build:btp": "webpack --mode production && tsc && npm publish --access=public",
    "build:tsc": "tsc",
    "dev": "webpack-dev-server --mode development --progress --colors",
    "watch": "webpack --progress --colors --watch",
    "publish": "npm publish --access=public"
  },
  "files": [
    "lib/",
    "types/",
    "README.md"
  ],
  // ...
}

tsconfig.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
  "compilerOptions": {
    "target": "es6", 
    "module": "commonjs",
    "removeComments": false,
    "declaration": true,
    "outDir": "./lib",
    "declarationDir": "./types",
    "baseUrl": "./",
    "jsx": "react",
    "allowJs": false,
    "lib": [
      "dom",
      "es2015"
    ],
    "sourceMap": false,
    "noImplicitAny": false
  },
  "files": [
    "./src/lib/index.ts"
  ],
  "include": [
    "src/lib/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

直接使用typescript的编译方式,npm run build:tsc 执行tsc命令 files的属性设置为 src/lib/index.ts 编译的文件是index.ts declaration设置为true 生成d.ts文件 declarationDir生成的d.ts文件地址 typings引用d.ts文件声明地址 这之后会在lib目录下生成ts编译的文件,在types目录下生成d.ts文件 之后发布只发布 /lib, /types, README.md 文件 这样在发布之后是下载代码的时候,import导入的代码,是可以支持动态提示的

但是tsc编译的代码并没有支持代码压缩

所以可以在tsc编译之后再压缩一下,或者压缩玩了之后再获取tsc的types文件就行了 所以可以执行

1
npm run build:tsc

或者

1
npm run build

一键发布

1
npm run build:btp

over!

上一篇 : TypeScript接口,类,函数下一篇 : javascript异步编程