Angular 2
Maak een Angular 2+ NPM-pakket

Invoering

Eenvoudigste pakket

Hier delen we een minimale workflow om een Angular 2+ npm-pakket te bouwen en te publiceren.

Configuratie bestanden

We hebben enkele configuratiebestanden nodig om git , npm , gulp en typescript te vertellen hoe te handelen.

.gitignore

Eerst maken we een .gitignore bestand om te voorkomen dat ongewenste bestanden en mappen worden .gitignore . De inhoud is:

npm-debug.log
node_modules
jspm_packages
.idea
build

.npmignore

Ten tweede maken we een .npmignore bestand om te voorkomen dat ongewenste bestanden en mappen worden gepubliceerd. De inhoud is:

examples
node_modules
src

gulpfile.js

We moeten een gulpfile.js om Gulp te vertellen hoe onze applicatie te compileren. Dit deel is nodig omdat we alle externe sjablonen en stijlen moeten minimaliseren en inline zetten voordat we ons pakket publiceren. De inhoud is:

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

Het bestand index.d.ts wordt door typescript gebruikt bij het importeren van een externe module. Het helpt de editor met automatische aanvulling en functietips.

export * from './lib';

index.js

Dit is het toegangspunt voor het pakket. Wanneer u dit pakket installeert met NPM en in uw toepassing importeert, hoeft u alleen maar de pakketnaam door te geven en uw toepassing leert waar u een EXPORTED-component van uw pakket kunt vinden.

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

We hebben de lib map gebruikt, want wanneer we onze code compileren, wordt de uitvoer in de map /lib geplaatst.

package.json

Dit bestand wordt gebruikt om uw npm-publicatie te configureren en definieert de benodigde pakketten om te werken.

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

Maak een dist-map en plaats dit bestand erin. Dit bestand wordt gebruikt om Typescript te vertellen hoe uw toepassing moet worden gecompileerd. Waar kunt u de typoscriptmap krijgen en waar u de gecompileerde bestanden plaatst.

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

Nadat we de configuratiebestanden hebben gemaakt, moeten we onze component en module maken. Dit onderdeel ontvangt een klik en geeft een bericht weer. Het wordt gebruikt als een html-tag <angular-x-minimal-npm-package></angular-x-minimal-npm-package> . Installeer dit npm-pakket en laad de module in het model dat u wilt gebruiken.

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

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

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

h1{
    color: red;
}

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

Daarna moet u uw pakket compileren, bouwen en publiceren.

Bouw en compileer

Voor build gebruiken we gulp en voor het compileren gebruiken we tsc . De opdracht wordt ingesteld in het bestand package.json, bij de optie scripts.build . We hebben deze set gulp js:build && rm -rf lib && tsc -p dist . Dit zijn onze ketentaken die het werk voor ons zullen doen.

Voer de volgende opdracht uit in de root van uw pakket om te bouwen en compileren:

npm run build

Dit zal de keten activeren en je zult eindigen met je /dist map /dist en het gecompileerde pakket in je map /lib . Daarom index.js we in index.js de code uit de map /lib geëxporteerd en niet uit /src .

Publiceren

Nu moeten we gewoon ons pakket publiceren, zodat we het via npm kunnen installeren. Voer daarvoor gewoon de opdracht uit:

npm publish

Dat is alles!!!