最簡單的包裝

在這裡，我們分享一些最小的工作流程來構建和釋出 Angular 2+ npm 包。

配置檔案

我們需要一些配置檔案來告訴 git，npm，gulp 和 typescript 如何行動。

.gitignore

首先，我們建立一個 .gitignore 檔案，以避免版本化不需要的檔案和資料夾。內容是：

npm-debug.log
node_modules
jspm_packages
.idea
build

.npmignore

其次，我們建立了一個 .npmignore 檔案，以避免釋出不需要的檔案和資料夾。內容是：

examples
node_modules
src

gulpfile.js

我們需要建立一個 gulpfile.js 來告訴 Gulp 如何編譯我們的應用程式。這部分是必要的，因為我們需要在釋出包之前最小化並內聯所有外部模板和樣式。內容是：

var gulp = require('gulp');
var embedTemplates = require('gulp-angular-embed-templates');
var inlineNg2Styles = require('gulp-inline-ng2-styles');

gulp.task('js:build', function () {
    gulp.src('src/*.ts') // also can use *.js files
        .pipe(embedTemplates({sourceType:'ts'}))
        .pipe(inlineNg2Styles({ base: '/src' }))
        .pipe(gulp.dest('./dist'));
});

index.d.ts

匯入外部模組時，types 指令碼使用 index.d.ts 檔案。它有助於編輯器自動完成和功能提示。

export * from './lib';

index.js

這是包入口點。當你使用 NPM 安裝此軟體包並在應用程式中匯入時，你只需傳遞軟體包名稱，你的應用程式將瞭解在哪裡可以找到軟體包的任何 EXPORTED 元件。

exports.AngularXMinimalNpmPackageModule = require('./lib').AngularXMinimalNpmPackageModule;

我們使用了 lib 資料夾，因為當我們編譯程式碼時，輸​​出被放在/lib 資料夾中。

package.json

此檔案用於配置 npm 釋出並定義必要的包以使其工作。

{
  "name": "angular-x-minimal-npm-package",
  "version": "0.0.18",
  "description": "An Angular 2+ Data Table that uses HTTP to create, read, update and delete data from an external API such REST.",
  "main": "index.js",
  "scripts": {
    "watch": "tsc -p src -w",
    "build": "gulp js:build && rm -rf lib && tsc -p dist"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/vinagreti/angular-x-minimal-npm-package.git"
  },
  "keywords": [
    "Angular",
    "Angular2",
    "Datatable",
    "Rest"
  ],
  "author": "bruno@tzadi.com",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/vinagreti/angular-x-minimal-npm-package/issues"
  },
  "homepage": "https://github.com/vinagreti/angular-x-minimal-npm-package#readme",
  "devDependencies": {
    "gulp": "3.9.1",
    "gulp-angular-embed-templates": "2.3.0",
    "gulp-inline-ng2-styles": "0.0.1",
    "typescript": "2.0.0"
  },
  "dependencies": {
    "@angular/common": "2.4.1",
    "@angular/compiler": "2.4.1",
    "@angular/core": "2.4.1",
    "@angular/http": "2.4.1",
    "@angular/platform-browser": "2.4.1",
    "@angular/platform-browser-dynamic": "2.4.1",
    "rxjs": "5.0.2",
    "zone.js": "0.7.4"
  }
}

DIST / tsconfig.json

建立一個 dist 資料夾並將此檔案放在裡面。該檔案用於告訴 Typescript 如何編譯你的應用程式。在哪裡獲取 typescript 資料夾以及放置編譯檔案的位置。

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "mapRoot": "",
    "rootDir": ".",
    "target": "es5",
    "lib": ["es6", "es2015", "dom"],
    "inlineSources": true,
    "stripInternal": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "removeComments": true,
    "sourceMap": true,
    "outDir": "../lib",
    "declaration": true
  }
}

建立配置檔案後，我們必須建立我們的元件和模組。此元件接收單擊並顯示訊息。它像 html 標籤 <angular-x-minimal-npm-package></angular-x-minimal-npm-package> 一樣使用。只需安裝此 npm 包並將其模組載入到你要使用它的模型中。

SRC /角 -X-最小 -NPM-package.component.ts

import {Component} from '@angular/core';
@Component({
    selector: 'angular-x-minimal-npm-package',
    styleUrls: ['./angular-x-minimal-npm-package.component.scss'],
    templateUrl: './angular-x-minimal-npm-package.component.html'
})
export class AngularXMinimalNpmPackageComponent {
    message = "Click Me ...";
    onClick() {
        this.message = "Angular 2+ Minimal NPM Package. With external scss and html!";
    }
}

SRC /角 -X-最小 -NPM-package.component.html

<div>
  <h1 (click)="onClick()">{{message}}</h1>
</div>

SRC /角 -X-資料 table.component.css

h1{
    color: red;
}

SRC /角 -X-最小 -NPM-package.module.ts

import { NgModule } from '@angular/core';
import { CommonModule  } from '@angular/common';

import { AngularXMinimalNpmPackageComponent } from './angular-x-minimal-npm-package.component';

@NgModule({
  imports: [ CommonModule ],
  declarations: [ AngularXMinimalNpmPackageComponent ],
  exports:  [ AngularXMinimalNpmPackageComponent ],
  entryComponents: [ AngularXMinimalNpmPackageComponent ],
})
export class AngularXMinimalNpmPackageModule {}

之後，你必須編譯，構建和釋出你的包。

構建和編譯

對於構建我們使用 gulp 和編譯我們使用 tsc。該命令在 package.json 檔案中設定，位於 scripts.build 選項。我們有這個設定 gulp js:build && rm -rf lib && tsc -p dist。這是我們為我們完成工作的連鎖任務。

要構建和編譯，請在包的根目錄執行以下命令：

npm run build

這將觸發鏈條，你最終將在/dist 資料夾和/lib 資料夾中的編譯包中構建。這就是為什麼在 index.js 我們從/lib 資料夾匯出程式碼而不是從/src 匯出。

釋出

現在我們只需要釋出我們的包，以便我們可以通過 npm 安裝它。為此，只需執行命令：

npm publish

就這些！！！