Angular 2
एक कोणीय 2+ एनपीएम पैकेज बनाएं

परिचय

सबसे सरल पैकेज

यहां हम एक कोणीय 2+ एनपीएम पैकेज बनाने और प्रकाशित करने के लिए कुछ न्यूनतम वर्कफ़्लो साझा कर रहे हैं।

विन्यास फाइल

हमें 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 बनाने की आवश्यकता है। यह हिस्सा आवश्यक है क्योंकि हमें अपने पैकेज को प्रकाशित करने से पहले सभी बाहरी टेम्पलेट्स और शैलियों को कम से कम इनलाइन करना होगा। सामग्री है:

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 फ़ाइल बाहरी मॉड्यूल आयात करते समय टाइपस्क्रिप्ट द्वारा उपयोग की जाती है। यह ऑटो-पूर्ति और फ़ंक्शन युक्तियों के साथ संपादक की मदद करता है।

export * from './lib';

index.js

यह पैकेज एंट्री पॉइंट है। जब आप एनपीएम का उपयोग करके इस पैकेज को स्थापित करते हैं और अपने आवेदन में आयात करते हैं, तो आपको बस पैकेज नाम को पारित करने की आवश्यकता होती है और आपका आवेदन आपके पैकेज के किसी भी निर्यात किए गए घटक को खोजने के लिए सीखेगा।

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

जिले / tsconfig.json

एक डिस्टर्ब फोल्डर बनाएं और इस फाइल को अंदर रखें। यह फ़ाइल टाइपस्क्रिप्ट को आपके एप्लिकेशन को संकलित करने का तरीका बताने के लिए उपयोग की जाती है। टाइपस्क्रिप्ट फ़ोल्डर को कहाँ से लाएँ और संकलित फ़ाइलों को कहाँ रखें।

{
  "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 / कोणीय-एक्स कम से कम-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 / कोणीय-एक्स कम से कम-NPM-package.component.html

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

src / कोणीय-एक्स-डेटा-table.component.css

h1{
    color: red;
}

src / कोणीय-एक्स कम से कम-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 उपयोग करते हैं। आदेश scripts.build विकल्प में package.json फ़ाइल में सेट किए गए हैं। हमारे पास यह सेट है gulp js:build && rm -rf lib && tsc -p dist । यह हमारी श्रृंखला के कार्य हैं जो हमारे लिए काम करेंगे।

बनाने और संकलित करने के लिए, अपने पैकेज के मूल में निम्नलिखित कमांड चलाएँ:

npm run build

यह चेन को ट्रिगर करेगा और आप अपने बिल्ड /dist इन फोल्डर और अपने /lib फोल्डर में संकलित पैकेज के साथ समाप्त हो जाएंगे। यही कारण है कि index.js हमने /lib फ़ोल्डर से कोड निर्यात किया है और /src से नहीं।

प्रकाशित करना

अब हमें बस अपना पैकेज प्रकाशित करने की आवश्यकता है ताकि हम इसे npm के माध्यम से स्थापित कर सकें। उसके लिए, बस कमांड चलाएँ:

npm publish

बस इतना ही!!!