angular4发布到npm仓库

介绍

通过npm install命令可以从npm仓库下载依赖包,极大方面对依赖包管理,功能类似maven.同样,我们也可以通过npm publish命令将自己编写的代码提交到npm仓库供别人引用.

实现

工程创建

ng new yaya-npm-publish-demo
cd yaya-npm-publish-demo/src/app
## 创建模块
ng g m yaya-module
cd yaya-module
## 创建组件
ng g c yaya-component
## 创建普通类
echo "" >>data.ts

data.ts

export class Data {
    name: string;
    value: string;
}

data类只是示例用来演示如何导出普通类

此时目录结构

src
├── app
│ ├── app.component.css
│ ├── app.component.html
│ ├── app.component.spec.ts
│ ├── app.component.ts
│ ├── app.module.ts
│ └── yaya-module
│     ├── data.ts
│     ├── yaya-component
│     │ ├── yaya-component.component.css
│     │ ├── yaya-component.component.html
│     │ ├── yaya-component.component.spec.ts
│     │ └── yaya-component.component.ts
│     └── yaya-module.module.ts

ng-packagr

在项目根目录执行以下命令安装ng-packagr依赖

npm install ng-packagr --save-dev

在项目根目录下创建ng-package.json文件和public-api.ts文件

ng-package.json

{
    "$schema": "./node_modules/ng-packagr/ng-package.schema.json","whitelistednonPeerDependencies": [
        "."
    ],"lib": {
        "entryFile": "public-api.ts"
    }
}

public-api.ts

/**
 * 导出module模块
 */
export * from './src/app/yaya-module/yaya-module.module'
/**
 * 导出普通类
 */
export * from './src/app/yaya-module/data'
/**如果有其他需要导出的对象都可以写在public-api.ts里**/

修改package.json增加打包命令package,并且修改private为false(这个很重要不然提交不上去)

package.json

{
  "name": "yaya","version": "0.0.0","license": "MIT","scripts": {
    "ng": "ng","start": "ng serve","build": "ng build --prod","test": "ng test","lint": "ng lint","e2e": "ng e2e","package": "ng-packagr -p ng-package.json"
  },"private": false
   ...
}

npm publish

在根目录下执行命令npm run package,命令执行完毕会生成dist目录,该目录就是我们要publish到npm的内容,在执行publish命令前需要先登陆npm仓库,如果没有npm账号,可以点击https://www.npmjs.com/进行注册.

## 设置仓库地址为npm官方仓库地址(国内大部分都使用阿里仓库地址如果没改publish会失败)
npm config set registry https://registry.npmjs.org/

## 登陆npm,用户名密码邮箱需要全部匹配
npm login
Username: xxxxx
Password:
Email: (this IS public) jianfeng.zheng@definesys.com
Logged in as xxxxx on https://registry.npmjs.org/.

# 登陆完就可以publish
cd dist
npm publish

##输出以下信息说明上传成功
npm notice === Tarball Details ===
npm notice name:          yaya-npm-publish-demo
npm notice version:       0.0.0
npm notice package size:  7.6 kB
npm notice unpacked size: 34.4 kB
npm notice shasum:        7ce18c7a0aedaaf902600081a7dffbeb8a17e874
npm notice integrity:     sha512-LjW0wdRb8lYnZ[...]QsXwro5Ih7GHA==
npm notice total files:   27
npm notice
+ yaya-npm-publish-demo@0.0.0

使用

1. 在项目根目录执行命令npm install yaya-npm-publish-demo@0.0.0 --save安装.
2. 修改app.module.ts引入yaya-module

import { browserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { DemoModule } from 'yaya';
import { AppComponent } from './app.component';

import { YayaModuleModule } from 'yaya-npm-publish-demo';


@NgModule({
  declarations: [
    AppComponent
  ],imports: [
    browserModule,YayaModuleModule <===这里
  ],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

普通类可通过import命令导入,如:

import{Data} from 'yaya-npm-publish-demo';

组件和正常组件使用方法一样

<app-yaya-component></app-yaya-component>

升级

升级需要增加版本号,每次都需要修改package.json里version字段,否则会publish失败

其他问题

1. npm最好升级到最新版本,之前用到是老版本,一直无法成功login到npm
2. npm仓库地址要用https://registry.npmjs.org/这个地址,网上很多教程都是用http地址http://registry.npmjs.org/,如果使用这个地址会报以下错误

npm ERR! 301 Could not create user
npm ERR! undefined