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

Gulp에게 응용 프로그램을 컴파일하는 방법을 알려주기 위해 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 를 사용하고 컴파일을 위해서는 tsc 를 사용합니다. 이 명령은 scripts.build 옵션에서 package.json 파일에 설정됩니다. 우리는 이것을 gulp js:build && rm -rf lib && tsc -p dist 설정했습니다 gulp js:build && rm -rf lib && tsc -p dist . 이것이 우리를 위해 일하는 체인 작업입니다.

빌드하고 컴파일하려면 패키지의 루트에서 다음 명령을 실행하십시오.

npm run build

이렇게하면 체인이 시작되고 /lib 폴더에있는 컴파일 된 패키지와 in /dist 폴더로 빌드가 끝납니다. 에 이유이다 index.js 우리의 코드를 수출 /lib 폴더 및하지에서 /src .

게시

이제 패키지를 게시하여 npm을 통해 설치할 수 있습니다. 이를 위해서는 다음 명령을 실행하십시오.

npm publish

그게 다야 !!!