开发npm包

如何开发npm包

举一个简单的场景，启动不同的前端项目可能需要的命令都不一样

start```、```yarn start:dev```、```yarn dev```等，我们可以简单封装一个通用的启动命令
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

### 开发步骤
1. ```package.json```文件如下
```json
{
  "name": "dev-command",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "bin": {
    "dev": "./bin/dev.js"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "execa": "^0.10.0",
    "fs-extra": "^10.1.0"
  }
}
  • main字段表示当前脚本工具的入口文件
  • bin字段表示 启动命令 我们的工具可以使用 npx dev 启动，另外bin内的命令会被安装到 node_modules/bin目录下，如果是全局安装则会是全局依赖node_modules/bin目录下

  1. 入口文件index.js

    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
    29
    30
    31
    const fes = require('fs-extra')
    const path = require('path')
    const execa = require('execa')

    const baseDir = process.cwd()

    // 预定义好启动命令
    const devCommands = ['dev', 'start:dev', 'start']

    const execLog = (command, args, options = {}) => {
        const promise = execa(command, args, {
            stdio: 'inherit',
            ...options,
        });
        // promise.stdout.pipe(process.stdout);
        // promise.stderr.pipe(process.stderr);
        return promise;
    };

    module.exports = async() => {
        const packageJsonPath = path.resolve(baseDir, 'package.json')

        if (!fes.pathExistsSync(packageJsonPath)) {
            process.exit(1)
        }

        const { scripts = {} } = fes.readJsonSync(packageJsonPath)
        const cmd = devCommands.find((key) => !!scripts[key])
        await execLog('yarn', [cmd])
    }

  2. 准备bin/dev.js文件作为脚本启动文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #!/usr/bin/env node

    const dev = require('../index')

    try {
        dev()
    } catch (e) {
        process.exit(1)
    }

这样我们一个简单的npm包就开发好啦，在项目部内使用npm link将脚本link到全局依赖中即可直接使用 dev 命令

发布

那我们如何发布npm包呢

注册npm账号

  1. npm官方网站
  2. 新建package
    1. package
    2. Organization，可使用@xxx/xxx 进行安装

版本号

  • major 主版本号
  • minor 次版本号
  • patch 修复版本

如何发布

测试版本(以beta版本为例)
  1. npm publish –tag=beta –access=public
  2. npm i dev-command@beta 安装最新的beta版本
正式版本
  1. npm publish –access=public
  2. npm i dev-command@latest 安装最新的正式版本

仓库同步

如果你的项目使用阿里云或者其他公开的镜像仓库，需要等待该服务同步（一般来说时间不会太长），也可在各自平台的npm网站进行手动 sync