《npm发布ts开发的node js命令行工具》

2,878 阅读5分钟

上一篇中我们借助百度翻译接口,用typescript写了一个node js的命令行工具(commander js),实现的效果就是: 在终端输入命令:ts-node-dev src/cli.ts hello 就会输出翻译结果:你好。

现在想把这个翻译工具发布到npm。需要做哪些事情呢?

一. 设置一个命令别名

希望让用户用起来更简单,比如只需在命令行输入fanyi hello 即可。即想用一个更简洁的命令代替ts-node-dev src/cli

1. 在package.json 里添加 bin 字段

// package.json
"bin": {
    "fanyi": "src/cli.ts"
 },

配置bin字段的作用是,定义好命令的名称以及执行该命令时,所执行脚本的路径。它可以存放一个可执行文件。在这里,src/cli.ts就是这个可执行文件,因为我们要把这个文件放在ts-node-dev后执行。

2. node 脚本解释程序

除了配置bin,还要在指定的可执行文件内,添加一段node 的shebang:放在第一行。

// src/cli.ts
#! /usr/bin/env node

这句话的作用是,指定当前这个脚本要执行 所需要的解释程序,表明这是一个可执行的应用。而且使用node作为脚本的解释程序。env 里规定了很多系统的环境变量,所以我们使用env找到node。

二. tsc命令编译ts文件成js

我们这个项目是用ts写的,在上边package.json里配置bin字段指定的可执行文件是ts文件,所以它只能用ts-node-dev运行,而不能直接用node运行。所以我们要把所有ts文件 编译成js文件。

1. 安装TypeScript

yarn global add typescript

这个命令会在全局环境下安装tsc命令,安装完成之后,我们就可以在任何地方执行 tsc 命令了。要想将一个ts文件编译成js文件,只需tsc xxx.ts

2. 初始化并配置tsconfig.json

为了编译ts文件,我们需要一个配置文件,就是tsconfig.json,首先初始化:

tsc --init  

执行完这个命令后,就会出现一个tsconfig.json文件,一般可以有以下选项:

//tsconfig.json
{
  "compilerOptions": {
    "target": "es5",		//编译后的js代码遵循何种规范
    "module": "commonjs",	//设置编译后的js代码,使用何种模块规范
    "declaration": true,	//是否生成对应的声明文件
    "outDir": "./dist",		//指定编译后的js代码的输出目录
    "strict": true"lib": ["es6"]
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules", "**/__tests__/*"]
}

"include" 属性表明需要包含的文件目录或文件。"exclude"就是指定不编译的目录。

配置好这个编译文件后,就可以开始编译了。

3. 编译

直接执行tsc命令,如果没有语法错误,在项目下就会出现一个dist目录,里边就是编译后的js文件:其中src是源代码ts文件。

三. .gitignore和package.json的files字段

一般我们不想把自动生成的文件或目录上传到远程github,上传到github仓库里的只上传源代码就可以了,所以要设置一下.gitignore文件:

/src/private_data.ts
/dist/
/node_modules/

但是对于发布到npm上的,我们只把自动生成的也就是编译后的代码发布到npm,而源代码不需要发布到npm。这个可以通过配置package.json文件的files字段来实现:

  "files": [
    "dist/**/*.js"
  ],

表示只把dist目录下的所有js文件发布到npm。**/表示递归匹配任何子路径

四. npm发布

接下来就可以发布到npm上了。因为npm的服务器在国外,所以我们平时下载各种包用的都是npm的淘宝源,为了速度更快。但是发布npm包要用回npm的官方源。

1. nrm

nrm 是一个npm的源管理器,可以快速切换npm源。

安装: npm i -g nrm

切换到官方源: nrm use npm

其他用法:nrm ls 列出当前所有源,* 指的就当前用的npm源。

2. 发布

npm adduser 填写信息,然后npm publish发布即可

五. 安装使用

注意要-g全局安装,看到在c盘npm下安装了fanyi的命令,这个命令就是我们在package.jsonbin字段里配置的命令,指向了dist/cli.js,就是它对应的可执行文件。

(这里第一次安装没有-g全局,用fanyi hi这个命令的时候出错了,说没有这个命令。猜想必须要全局安装这个包才行。)

就是用fanyi这个命令代替了node dist/cli.js

补充:

在package.json里的bin字段,应该修改为:

"bin": {
    "fanyi": "dist/cli.js"
  },

因为node不能执行ts文件,而且最终发布到npm上的只有编译后的js代码,也就是dist目录中的,所以fanyi这个命令指向的应该是编译后生成的js文件。

六. 本地通过bashrc文件设置命令别名

上边五个步骤是用npm发布包,并且给ts-node-dev src/cli.ts hi设置成fanyi hi这样更简短的命令。那如果不想发布,只想在本地自己使用,如何设置命令的alias呢?

可以通过在用户目录下的.bashrc文件。

在终端输入vi ~/.bashrc在命令行打开这个文件:使用vi(一个文本编辑器)打开用户目录下面的.bashrc文件 可以看到有很多alias,那在下方直接添加就可以了: 但是src/cli.ts必须要用它的绝对路径

然后输入:wq退出。此时在终端输入fanyi hi也可以得到结果