TS + Vue：如何将组件发布到 NPM ？

组件封装：TS + Vue：封装可发布组件

本篇内容：编写声明文件、范围包（Scopes）、发布到 npm。

声明文件

由于构建之后的文件是一个 js 文件，所以要在 ts 项目中引用就需要一个声明文件。

package.json

为一个库添加声明文件时，需要用到 package.json 中的一个字段 — types，该字段可以指定声明文件的入口路径：

// package.json

{
  // ...
  "types": "./types/employee-query.d.ts"
}
复制代码

employee-query.d.ts

为 UMD 类库编写声明文件，详见 如何在 TypeScript 中引入外部类库？【具体内容定位：如何编写声明文件？/ 声明文件 / UMD 类库】

import Vue from "vue";

declare class EmployeeQuery extends Vue {
  // 添加成员
  name: string;
  selected: number;
  department: { department: string; departmentId: number }[];
  query(): void;
}

export as namespace EmployeeQuery; // umd 库声明，这条语句必不可少。

export = EmployeeQuery;
复制代码

发布到 NPM

登录到 NPM

$ npm login
复制代码

按步骤输入账号密码邮箱

npm notice Log in on https://registry.npmjs.org/
Username:
Password:
Email: (this IS public)
Logged in as XXXX on https://registry.npmjs.org/.
复制代码

使用范围包发布（Scopes）

npm 版本大于 2.7.0

为了解决 “因为包名已被使用，我怎么也想不出包名” 的难题，决定使用范围包。

范围包就是命名空间，如果包名以 @ 开始，就是一个范围包，比如

@scope/project-name
复制代码

每个 npm 用户都有属于自己的范围，范围名是用户名。

@username/project-name
复制代码

改造包名

// package.json
{
  "name": "@username/project-name"
}
复制代码

或者在 npm init 时，添加

$ npm init --scope=username
复制代码

发布

默认情况下，范围包是私有的。要发布私有模块，是需要交钱滴；但共有模块是 free 的 ?

npm publish --access=public
复制代码

发布成功后，可以在 www.npmjs.com/ 上管理自己的 packages。