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