Angular 2
Créer un paquet Angular 2+ NPM

Introduction

Forfait le plus simple

Nous partageons ici un flux de travail minimal pour créer et publier un paquet Angular 2+ npm.

Fichiers de configuration

Nous avons besoin de fichiers de configuration pour indiquer à git , npm , gulp et typescript comment agir.

.gitignore

Tout d'abord, nous créons un fichier .gitignore pour éviter de .gitignore les fichiers et dossiers indésirables. Le contenu est:

npm-debug.log
node_modules
jspm_packages
.idea
build

.npmignore

Deuxièmement, nous créons un fichier .npmignore pour éviter de publier des fichiers et des dossiers indésirables. Le contenu est:

examples
node_modules
src

gulpfile.js

Nous devons créer un gulpfile.js pour indiquer à Gulp comment compiler notre application. Cette partie est nécessaire car nous devons minimiser et intégrer tous les modèles et styles externes avant de publier notre package. Le contenu est:

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

Le fichier index.d.ts est utilisé par typecript lors de l'importation d'un module externe. Il aide l'éditeur avec l'auto-complétion et les conseils de fonction.

export * from './lib';

index.js

C'est le point d'entrée du paquet. Lorsque vous installez ce package à l’aide de NPM et que vous l’importez dans votre application, il vous suffit de passer le nom du package et votre application apprend où trouver tout composant EXPORTED de votre package.

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

Nous avons utilisé le dossier lib car lorsque nous compilons notre code, la sortie est placée dans le dossier /lib .

package.json

Ce fichier est utilisé pour configurer votre publication npm et définit les paquets nécessaires à son fonctionnement.

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

Créez un dossier dist et placez ce fichier à l'intérieur. Ce fichier est utilisé pour indiquer à Typescript comment compiler votre application. Où trouver le dossier dactylographié et où placer les fichiers compilés.

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

Après avoir créé les fichiers de configuration, nous devons créer notre composant et notre module. Ce composant reçoit un clic et affiche un message. Il est utilisé comme une balise html <angular-x-minimal-npm-package></angular-x-minimal-npm-package> . Installez simplement ce paquet npm et chargez son module dans le modèle que vous souhaitez utiliser.

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

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

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

h1{
    color: red;
}

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

Après cela, vous devez compiler, compiler et publier votre package.

Construire et compiler

Pour la construction, nous utilisons gulp et pour la compilation, nous utilisons tsc . La commande est définie dans le fichier package.json, à l'option scripts.build . Nous avons cet ensemble gulp js:build && rm -rf lib && tsc -p dist . Ce sont nos tâches de chaîne qui feront le travail pour nous.

Pour générer et compiler, exécutez la commande suivante à la racine de votre package:

npm run build

Cela déclenchera la chaîne et vous vous retrouverez avec votre dossier build /dist et le paquet compilé dans votre dossier /lib . C'est pourquoi, dans index.js nous avons exporté le code du dossier /lib et non de /src .

Publier

Maintenant, nous avons juste besoin de publier notre paquet pour que nous puissions l'installer jusqu'à npm. Pour cela, lancez simplement la commande:

npm publish

C'est tout!!!