web-dev-qa-db-fra.com

comment publier la bibliothèque TypeScript angulaire 2 sur npm

J'ai créé une bibliothèque TypeScript pour angular 2 qui facilite l'accès à mon service principal.

Jusqu'à présent, il s'agit d'un dépôt privé, mais je souhaite le télécharger en tant que bibliothèque open source sur github et l'enregistrer sur npm.

Je ne sais pas trop quoi faire maintenant, car la documentation sur ce sujet n'est pas facile à trouver.

la structure du dossier ressemble à ceci:

src
|--sdk.ts // entry point
|--services
   |--auth.ts
   |--database.ts
   |--5 more ts files
|--utils
   |--utils.ts
   |--interfaces.ts
|--tests (8 ..spec.ts files)

mon point d'entrée (sdk.ts) ressemble à ceci

import { NgModule, ModuleWithProviders } from '@angular/core';
import { Injectable } from '@angular/core';
import { SelfbitsDatabase } from './services/database';
import { SelfbitsAuth } from './services/auth';
import { SelfbitsAppConfig } from './utils/interfaces';
import { SelfbitsFile } from './services/file';
import { SelfbitsUser } from './services/user';
import { SelfbitsDevice } from './services/device';
import { SelfbitsPush } from './services/Push';
import { HttpModule } from '@angular/http';

@Injectable()
export class SelfbitsAngular {
    constructor(
        public auth : SelfbitsAuth,
        public database : SelfbitsDatabase,
        public file : SelfbitsFile,
        public user : SelfbitsUser,
        public device: SelfbitsDevice,
        public Push : SelfbitsPush
    ){}
}

export const SELFBITS_PROVIDERS:any[] = [
    SelfbitsAngular,
    SelfbitsAuth,
    SelfbitsDatabase,
    SelfbitsFile,
    SelfbitsUser,
    SelfbitsDevice,
    SelfbitsPush
];

@NgModule({
    providers:SELFBITS_PROVIDERS,
    imports:[ HttpModule ]
})

export class SelfbitsAngularModule{
    static initializeApp(config:SelfbitsAppConfig):ModuleWithProviders{
        return {
            ngModule:SelfbitsAngularModule,
            providers:[
                { provide: 'SelfbitsConfig', useValue: config }
            ]
        }
    }
}

et voici le webpack.config.js qui ne fait pas vraiment ce que je veux ...

module.exports = {
    entry:'./src/sdk.ts',
    output:{
        path: helpers.root('dist'),
        filename:'selfbitsangular2sdk.js'
    },
    resolve: {
        extensions: ['', '.js', '.ts']
    },

    module: {
        loaders: [
            {
                test: /\.ts$/,
                exclude:'/test/',
                loaders: ['ts-loader']
            }
        ]
    }
};

Je ne suis pas sûr que WebPack soit le bon choix ... ou devrait être groupé et minifié ou non. Toutes les astuces et conseils sont les bienvenus!

À votre santé

angulartypescriptnpmwebpackbundler
14
Han Che

Angular University propose, étape par étape, un bon didacticiel sur la publication d’une bibliothèque Angular 2 sur npm qui répond à vos préoccupations/questions.

Vous pouvez fournir une version groupée et dégroupée si vous le souhaitez, mais je vous fournirai toujours une version dégroupée. Dans mes bibliothèques, je ne fournis pas de version groupée et je laisse le soin au consommateur de grouper et de minimiser.

http://blog.angular-university.io/how-to-create-an-angular-2-library-and-how-to-consume-it-jspm-vs-webpack/

Réponse mise à jour

Les étapes suivantes suivent le processus de création, de test et de publication d'un module angulaire dégroupé destiné à être consommé par un consommateur utilisant un bundle (webpack, angular cli, etc.). Pour obtenir une réponse plus complète comprenant le groupement, voir @ OleksiiTrekhleb's réponse.

Publier une bibliothèque angulaire 2 peut être intimidant, mais quand il le faut, ce n'est vraiment pas différent de publier n'importe quel autre paquet sur NPM. Les informations suivantes utiliseront la structure de dossiers:

  • paquet racine
    • src
    • dist

1. Configurer tsconfig.json

Comme pour toute bibliothèque TypeScript, l'option declaration doit être définie sur true dans votre tsconfig.json sous compilerOptions pour que nos clients puissent tirer parti des types de notre package:

"declaration": true

Dans compilerOptions, nous voulons également spécifier notre outDir pour que le code transpilé soit séparé de la source:

"outDir": "./dist"

Nous voulons que l'option include pointe vers notre dossier source (note include est un frère de compilerOptions):

"include": [
  "./src"
]

Activez les options de décorateur expérimental sous compilerOptions:

"experimentalDecorators": true,
"emitDecoratorMetadata": true

Pour éviter certaines erreurs lors de la transcription, vous devez également activer skipLibCheck:

"skipLibCheck": true

Résultat 

{
  "compilerOptions": {
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'commonjs', 'AMD', 'system', 'umd', 'es2015', or 'ESNext'. */
    "skipLibCheck": true,
    "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    "outDir": "./dist",                        /* Redirect output structure to the directory. */
    "strict": true,                            /* Enable all strict type-checking options. */
    "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
    "emitDecoratorMetadata": true         /* Enables experimental support for emitting type metadata for decorators. */
  },
  "include": [
    "./src"
  ]
}

2. Le module

Cet exemple utilisera un module avec un seul composant. Le composant est assez simple:

./src/helloWorld/helloWorld.component.ts

import { Component } from "@angular/core";

@Component({
    selector: 'hello-world',
    template: '<div>Hello, world</div>'
})
export class HelloWorldComponent {

}

Le module devrait ajouter des composants consommables à declarations et exports. Nous devons ajouter aux exportations afin que, lorsque les consommateurs importent notre module, ils puissent également utiliser nos composants.

./src/helloWorld/helloWorld.module.ts

import { NgModule } from '@angular/core'
import { HelloWorldComponent } from './helloWorld.component';

const components: any[] = [
    HelloWorldComponent
];

@NgModule({
    declarations: components,
    exports: components // Don't forget to export!
})
export class HelloWorldModule {

}

3. Le tonneau

Pour simplifier l'importation de nos modules, nous utilisons un baril, fichier qui exporte tout ce qui doit être consommé par nos consommateurs.

./src/index.ts

export { HelloWorldModule } from './helloWorld/helloWorld.module';
export { HelloWorldComponent } from './helloWorld/helloWorld.component';

4. Mise en place du NPM

Package.json

Dans package.json, modifiez la propriété main pour qu'elle pointe vers notre baril transpilé, ./dist/index.js. Ajoutez également la propriété typings pour qu'elle pointe vers notre fichier de définition de barils ./dist/index.d.ts.

Ajoutez la propriété prepublish sous les scripts dans votre package.json.

"scripts": {
    "prepublish": "tsc"
}

Notez également que vos dépendances angulaires et connexes doivent être sous peerDependencies et non dependencies

NPM Ignore

Créez un fichier .npmignore à la racine de votre package et ignorez le dossier src et tous les autres fichiers que vous ne souhaitez pas publier avec votre package.

src/
*.log

5. Test

Vous pouvez facilement tester vos paquets npm localement avec npm link . Dans le dossier de votre module, exécutez la commande npm link.

Ensuite, dans votre projet de test, exécutez la commande npm link <my package name>

Vous pouvez maintenant importer votre module et l'ajouter à vos importations de projets de test sans avoir à le publier.

6. Publication

Votre paquet peut maintenant être publié avec un simple npm publish

1
Clint

Le processus de publication lui-même est assez facile:

# Login with your existing npm user
npm login

# Bump library version
npm version --patch

# Publish your library
npm publish

Le plus difficile est de préparer correctement le contenu de votre package.json et du dossier qui contiendra votre bibliothèque de construction (l’un des moyens usuels de le nommer est dist).

Votre dossier dist doit contenir des fichiers prêts à être utilisés par Angular projets JIT ainsi que par Angular projets AOT. Il doit également contenir votre ensemble de bibliothèques que le navigateur est prêt à utiliser (par exemple, via SystemJS).

En conséquence, votre dossier dist devrait contenir les fichiers suivants:

  • index.umd.js - Ensemble UMD prêt à être utilisé par SystemJS
  • index.umd.min.js - version simplifiée du paquet pour enregistrer le trafic de l'utilisateur
  • index.umd.js.map , index.umd.min.js.map - à des fins de débogage
  • * .js - [produit par tsc, rappelez-vous que ngc est un wrapper] Représentation JavaScript compilée du fichier composant ou service * .ts de votre bibliothèque.
  • * .d.ts - [produit par tsc, rappelez-vous que ngc est un wrapper] fichiers de déclaration. Comme les fichiers * .ts de types sont transpilés en fichiers * .js qui ne prennent pas en charge les typages, le compilateur TypeScript doit mettre toutes les informations de types dans des fichiers * .d.ts distincts pour pouvoir utiliser ces fichiers * .js. dans les projets TypeScript plus tard. A propos, il existe un projet DefinitelyTyped avec beaucoup de définitions de types qui ont déjà été apportées pour de nombreuses bibliothèques JS non-TypeScript.
  • * .metadata.json - métadonnées associées au composant actuel (ou à NgModule). C'est une sorte de représentation JSON des objets que nous transmettons aux décorateurs @Component, @NgModule. Ce fichier contient les informations nécessaires au projet (pas à la bibliothèque) du projet, qui se trouvaient dans les fichiers * .ts de la bibliothèque d’origine, mais non incluses dans les fichiers * .d.ts. 

Dans ce cas, votre package.json doit être averti de vos fichiers de génération via les champs main, module et typings:

 {
   ...
   "main": "./dist/index.umd.js",
   "module": "./dist/index.js",
   "typings": "./dist/index.d.ts",
   ...
 }

Vous trouverez une description plus détaillée des fichiers dans le dossier dist et de leur compilation dans Comment créer une bibliothèque Angular 4 compatible AOT/JIT avec des modèles externes SCSS/HTML article

3
Oleksii Trekhleb

Pour ceux qui essaient encore de comprendre comment le faire:

  1. Créez votre bibliothèque en utilisant le générateur Angular Lib Yeoman de @ jvandemo

  2. Après cela, vous lancez simplement: npm adduser et npm publish

2
Juan Herrera

J'ai travaillé avec/écrit quelques Angular (2+) bibliothèques et le processus de regroupement et de publication a toujours été pénible, j'ai trouvé cet outil qui fait tout le travail et rend le bibliothèque prête à être livrée au format ES5, ES6 et CommonJS.

C'est très facile à utiliser, il vous suffit de mettre un fichier (fichier d'entrée) dans votre tsconfig, d'explorer tous vos fichiers et de regrouper votre bibliothèque Angular, ainsi que des styles intégrés et des modèles de composants!

Je pensais que ce serait utile pour les autres.

Bonne chance.

0
PRAISER