最簡單的包裝
在這裡,我們分享一些最小的工作流程來構建和釋出 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
來告訴 Gulp 如何編譯我們的應用程式。這部分是必要的,因為我們需要在釋出包之前最小化並內聯所有外部模板和樣式。內容是:
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
匯入外部模組時,types 指令碼使用 index.d.ts
檔案。它有助於編輯器自動完成和功能提示。
export * from './lib';
index.js
這是包入口點。當你使用 NPM 安裝此軟體包並在應用程式中匯入時,你只需傳遞軟體包名稱,你的應用程式將瞭解在哪裡可以找到軟體包的任何 EXPORTED 元件。
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": "bruno@tzadi.com",
"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 /角 -X-最小 -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 /角 -X-最小 -NPM-package.component.html
<div>
<h1 (click)="onClick()">{{message}}</h1>
</div>
SRC /角 -X-資料 table.component.css
h1{
color: red;
}
SRC /角 -X-最小 -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
資料夾中的編譯包中構建。這就是為什麼在 index.js
我們從/lib
資料夾匯出程式碼而不是從/src
匯出。
釋出
現在我們只需要釋出我們的包,以便我們可以通過 npm 安裝它。為此,只需執行命令:
npm publish
就這些!!!