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