Angular 2
Skapa ett Angular 2+ NPM-paket

Introduktion

Enklaste paketet

Här delar vi lite minimalt arbetsflöde för att bygga och publicera ett Angular 2+ npm-paket.

Konfigurationsfiler

Vi behöver några konfigurationsfiler för att berätta för git , npm , gulp och typescript hur man ska agera.

.gitignore

Först skapar vi en .gitignore fil för att undvika versionering av oönskade filer och mappar. Innehållet är:

npm-debug.log
node_modules
jspm_packages
.idea
build

.npmignore

För det andra skapar vi en .npmignore fil för att undvika att publicera oönskade filer och mappar. Innehållet är:

examples
node_modules
src

gulpfile.js

Vi måste skapa en gulpfile.js att berätta för Gulp hur man sammanställer vår applikation. Den här delen är nödvändig eftersom vi måste minimera och ange alla externa mallar och stilar innan vi publicerar vårt paket. Innehållet är:

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

index.d.ts används av typskript vid import av en extern modul. Det hjälper redaktören med automatisk komplettering och funktionstips.

export * from './lib';

index.js

Detta är paketets ingångspunkt. När du installerar detta paket med NPM och importerar i din applikation, behöver du bara skicka paketnamnet och din applikation kommer att lära sig var du kan hitta en EXPORTD komponent i ditt paket.

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

Vi använde lib mappen eftersom när vi sammanställer vår kod placeras utgången inuti /lib mappen.

package.json

Denna fil används för att konfigurera din npm-publikation och definierar nödvändiga paket för att den ska fungera.

{
  "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": "[email protected]",
  "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

Skapa en dist-mapp och placera den här filen inuti. Denna fil används för att berätta för TypeScript hur du sammanställer din applikation. Var kan man få typskriptmappen och var man ska placera de kompilerade filerna.

{
  "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
  }
}

När vi har skapat konfigurationsfilerna måste vi skapa vår komponent och modul. Den här komponenten får ett klick och visar ett meddelande. Det används som en html-tagg <angular-x-minimal-npm-package></angular-x-minimal-npm-package> . Installera bara detta npm-paket och ladda dess modul i den modell du vill använda det.

src / vinkel-x-minimal-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 / vinkel-x-minimal-NPM-package.component.html

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

src / vinkel-x-data-table.component.css

h1{
    color: red;
}

src / vinkel-x-minimal-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 {}

Efter det måste du sammanställa, bygga och publicera ditt paket.

Bygg och kompilera

För byggnad använder vi gulp och för sammanställning använder vi tsc . Kommandot är inställt i package.json-filen, på alternativet scripts.build . Vi har denna set gulp js:build && rm -rf lib && tsc -p dist . Detta är våra kedjeuppgifter som kommer att göra jobbet för oss.

För att bygga och kompilera, kör följande kommando i roten till ditt paket:

npm run build

Detta utlöser kedjan och du kommer att hamna med din inbyggda /dist mapp och det kompilerade paketet i din /lib mapp. Det är därför vi i index.js exporterade koden från mappen /lib och inte från /src .

Publicera

Nu behöver vi bara publicera vårt paket så att vi kan installera det via npm. För det, kör bara kommandot:

npm publish

Det är allt!!!