Angular 2
Erstellen Sie ein Angular 2+ NPM-Paket

Einführung

Einfachstes Paket

Hier stellen wir einige minimale Arbeitsabläufe vor, um ein Angular 2+ npm-Paket zu erstellen und zu veröffentlichen.

Konfigurationsdateien

Wir benötigen einige Konfigurationsdateien, um git , npm , gulp und typescript mitzuteilen, wie sie vorgehen sollen.

.gitignore

Zuerst erstellen wir eine .gitignore Datei, um die Versionierung unerwünschter Dateien und Ordner zu vermeiden. Der Inhalt ist:

npm-debug.log
node_modules
jspm_packages
.idea
build

.npmignore

Zweitens erstellen wir eine .npmignore -Datei, um zu vermeiden, dass unerwünschte Dateien und Ordner veröffentlicht werden. Der Inhalt ist:

examples
node_modules
src

gulpfile.js

Wir müssen eine gulpfile.js erstellen, um Gulp mitzuteilen, wie er unsere Anwendung kompiliert. Dieser Teil ist notwendig, da vor der Veröffentlichung unseres Pakets alle externen Vorlagen und Stile minimiert und integriert werden müssen. Der Inhalt ist:

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

Die Datei index.d.ts wird beim Importieren eines externen Moduls von index.d.ts verwendet. Es hilft dem Editor bei der automatischen Vervollständigung und Funktionstipps.

export * from './lib';

index.js

Dies ist der Paketeinstiegspunkt. Wenn Sie dieses Paket mit NPM installieren und in Ihre Anwendung importieren, müssen Sie nur den Paketnamen übergeben, und Ihre Anwendung erfährt, wo sich eine EXPORTED-Komponente Ihres Pakets befindet.

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

Wir haben den lib Ordner verwendet, weil die Ausgabe beim Kompilieren des Codes im /lib Ordner abgelegt wird.

package.json

Diese Datei wird zur Konfiguration Ihrer npm-Publikation verwendet und definiert die erforderlichen Pakete, um zu funktionieren.

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

Erstellen Sie einen dist-Ordner und legen Sie diese Datei darin ab. Diese Datei wird verwendet, um Typescript mitzuteilen, wie Sie Ihre Anwendung kompilieren. Woher bekomme ich den Typoscript-Ordner und wo die kompilierten Dateien abgelegt werden sollen?

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

Nach dem Erstellen der Konfigurationsdateien müssen wir unsere Komponente und unser Modul erstellen. Diese Komponente erhält einen Klick und zeigt eine Nachricht an. Es wird wie ein HTML-Tag <angular-x-minimal-npm-package></angular-x-minimal-npm-package> . Installieren Sie einfach dieses npm-Paket und laden Sie sein Modul in das Modell, das Sie verwenden möchten.

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

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

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

h1{
    color: red;
}

src / angle-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 {}

Danach müssen Sie Ihr Paket kompilieren, erstellen und veröffentlichen.

Bauen und kompilieren

Für Build verwenden wir gulp und zum Kompilieren tsc . Der Befehl wird in der package.json-Datei scripts.build Option scripts.build . Wir haben dieses Set gulp js:build && rm -rf lib && tsc -p dist . Dies sind unsere Kettenaufgaben, die die Arbeit für uns erledigen werden.

Führen Sie zum Erstellen und Kompilieren den folgenden Befehl im Stammverzeichnis Ihres Pakets aus:

npm run build

Dadurch wird die Kette ausgelöst, und am Ende befinden sich der Build im Ordner /dist und das kompilierte Paket im Ordner /lib . Aus diesem Grund index.js wir in index.js den Code aus dem Ordner /lib und nicht aus /src exportiert.

Veröffentlichen

Jetzt müssen wir nur noch unser Paket veröffentlichen, damit wir es über npm installieren können. Führen Sie dazu einfach den Befehl aus:

npm publish

Das ist alles!!!