发布Angular 模块 到 npm

来源：https://blog.csdn.net/yiershan1314/article/details/79999726

这一段时间一直在写自己的组件 就突发奇想把这些组件放到npm库上去。所以找来资料学习并记录一下

生成package.json

npm init -y

生成一个package.json文件 内容如下

{
  "name": "npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

可以在此基础上设置默认的生成值 以下我是复制的 根据自己的情况填写

npm config set init-author-name "yiershan"             # 你的名称
npm config set init-author-email "511176294@qq.com" # 你的邮箱
npm config set init-author-url "https://www.jianshu.com/u/8afb7e623b70"  # 你的个人网页
npm config set init-license "MIT"                    # 开源授权协议名
npm config set init-version "0.0.1"                         # 版本号

删掉之前的package.json 再生成一个package.json 

添加一个README.md文件

可以在这个文件里简单介绍下项目

# MZC-Ng-Api

这是一个npm包发布测试项目

## License

请查看 [MIT license](./LICENSE).

添加一个开源协议文件 LICENSE

我是不知道这东西有什么用 但先加上去

MIT License

Copyright (c) 2017 MZC

本项目为测试项目，完全免费。

添加源码

创建一个src文件夹 并在下面添加一个index.ts文件

export class NgGezc{
    private name: string;
    constructor() {
        this.name = 'gezc'
    }
}

再在于src同级的目录下创建一个index.t文件

export * from './src/index

使用typescript编译ts文件

如果没有安装typescript就先安装

npm i -g typescript

再执行初始化tsconfig.json文件命令

tsc --init

就会自动生成一个一个tsconfig.json文件

编译

tsc -p .

执行成功就生成了js文件，这个 . 很重要 不写会找不到想要编译的文件。我一开就眼瞎没看到

文件解构

发布

大致的npm模块结构是出来了

可以先修改package.json文件

{
  "name": "ng-gezc", // 主要是名字别出现 大写字母
  "version": "1.0.0",
  "description": "测试系统",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "gezhenchao <1218969916@qq.com>",
  "license": "MIT"
}

修正下载源

这一步 我觉得大概的原因是防止 将下载源 改为了其他的一些镜像地址 毕竟国内用npm下载的速度。。。

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

登录npm

没有npm账号的可以去注册一个 注册地址 https://www.npmjs.com/signup

注册很方便 只要验证下邮箱就可以了

npm login

输入 账号密码就可以了

发布

想想还有点小激动  可以发布自己的npm模块了

npm publish

现实还是残酷的 我可耻的失败了

错误信息是： you must verify your email before publishing a new package: https://www.npmjs.com/email-edit : ng-gezc

意思大概是我的账号邮箱没有验证  因为一连发了3封邮件 第1封才是验证的邮件 （我以为是第3封）

验证完就发布成功了

发布一个模块确实挺方便的

 

使用

新建一个文件夹  将自己发布的模块下载下来

npm i ng-gezc

下载下来的文件目录

但在开发中使用没有提示（老实说 写博客的时候我并不知道这一点）

编译时生成头文件，*.d.ts。

解决编译器提示功能 
修改tsconfig.json中的设置（在发布的项目那里改，别再node_modules 下改） 

之后

tsc -p .

就生成了*.d.ts文件

tsconfig.json中的设置有时间可以研究下 有时间再写一篇博客

修改package.json 发布指定的文件

{
  "name": "ng-gezc",
  "version": "1.0.0",
  "description": "测试系统",
  "main": "index.js",
  "types": "./index.d.ts", // 添加这个
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "files": [ // 不将 tsconfig.json 发不上去
    "index.js",
    "index.d.ts",
    "src/*.js",
    "src/*.d.ts",
    "src/**/*.js",
    "src/**/*.d.ts",
    "README.md",
    "LICENSE",
    "package.json"
  ],
  "keywords": [],
  "author": "gezhenchao <1218969916@qq.com>",
  "license": "MIT"
}

说一句的是不能将注释写在package.json, 因为json文件里不能写注释的

更新版本

修改了这些就得再发布一次 那模块的版本就得更新

npm version prepatch

版本发布规则

# 版本号从 1.2.3 变成 1.2.4-0，就是 1.2.4 版本的第一个预发布版本。
npm version prepatch

# 版本号从 1.2.4-0 变成 1.3.0-0，就是 1.3.0 版本的第一个预发布版本。
npm version preminor

# 版本号从 1.2.3 变成 2.0.0-0，就是 2.0.0 版本的第一个预发布版本。
npm version premajor

# 版本号从 2.0.0-0 变成 2.0.0-1，就是使预发布版本号加一。
npm version prerelease

规则挺多 让我 思考量不足的大脑好好想想

版本更新好了就再发布一次

npm publish

之后再下载一次

发现少了ts文件和tsconfig.json文件

这篇博客 主要是记录了一下 发布npm包的一些流程  自己也学习了不少。