Angular 2
Angular 2+ NPMパッケージを作成する

前書き

最も簡単なパッケージ

ここでは、Angular 2+ npmパッケージを作成して公開するための最小限のワークフローをいくつか共有しています。

設定ファイル

git 、 npm 、 gulp 、およびtypescriptどのように動作させるかを伝えるために、いくつかの設定ファイルが必要です。

.gitignore

最初に.gitignoreファイルを作成して、不要なファイルやフォルダをバージョン管理しないようにします。内容は次のとおりです。

npm-debug.log
node_modules
jspm_packages
.idea
build

.npmignore

次に、 .npmignoreファイルを作成して、不要なファイルやフォルダを公開しないようにします。内容は次のとおりです。

examples
node_modules
src

gulpfile.js

gulpfile.jsにアプリケーションのコンパイル方法を伝えるには、 gulpfile.jsを作成する必要があります。パッケージを公開する前に、すべての外部テンプレートとスタイルを最小化してインライン化する必要があるため、この部分が必要です。内容は次のとおりです。

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ファイルは、外部モジュールをインポートするときにtypescriptによって使用されます。自動補完機能とヒント機能を備えたエディターに役立ちます。

export * from './lib';

index.js

これがパッケージエントリポイントです。 NPMを使用してこのパッケージをインストールし、アプリケーションでインポートする場合は、パッケージ名を渡すだけで済みます。アプリケーションは、パッケージのエクスポートされたコンポーネントをどこで見つけるかを学習します。

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

我々は使用lib 、我々は我々のコードをコンパイルするとき、出力が内側に配置されているため、フォルダを/libフォルダ。

package.json

このファイルは、npmパブリケーションを設定するために使用され、動作するために必要なパッケージを定義します。

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

distフォルダを作成し、このファイルを内部に置きます。このファイルは、アプリケーションをコンパイルする方法をTypescriptに伝えるために使用されます。 typescriptフォルダを取得する場所と、コンパイルされたファイルをどこに置くか。

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

構成ファイルを作成したら、コンポーネントとモジュールを作成する必要があります。このコンポーネントはクリックを受け取り、メッセージを表示します。これはhtmlタグ<angular-x-minimal-npm-package></angular-x-minimal-npm-package>ます。このnpmパッケージをインストールし、使用したいモデルにそのモジュールをロードしてください。

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

その後、パッケージをコンパイル、ビルド、パブリッシュする必要があります。

ビルドとコンパイル

ビルドのために我々は使用gulpしてコンパイルするために、私たちは使用tsc 。コマンドはpackage.jsonファイルのscripts.buildオプションで設定します。私たちはこれをgulp js:build && rm -rf lib && tsc -p dist 。これは私たちのために仕事をする連鎖作業です。

ビルドしてコンパイルするには、パッケージのルートで次のコマンドを実行します。

npm run build

これによりチェーンがトリガーされ、 /distフォルダとコンパイルされたパッケージが/libフォルダに/libます。このため、 index.jsでは、 /srcからではなく、 /src /libフォルダからコードをエクスポートしました。

公開する

今すぐパッケージを公開するだけで、npmでインストールできるようになります。そのためには、次のコマンドを実行してください：

npm publish

それはすべてです!!!