建立一個ng2組件庫開發工程

目標

建立一個基於angular2的組件開發工程，在此工程能夠實現組件打包，組件演示；

目錄結構圖

步驟

一、利用angular2-cli腳手架建立一個默認工程；

二、修改package.json以下：

{
  "name": "glory-ui",
  "version": "0.0.7",
  "description": "component lib for Angular2",
  "main": "dist/index.js",
  "typings": "dist/index.d.ts",
  "files": [
    "dist",
    "resources"
  ],
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "e2e": "ng e2e",
    "watch": "tsc --watch",
    "lint": "tslint 'src/**/*.ts'",
    "pretest": "npm run lint",
    "test": "karma start",
    "prebuild": "rimraf dist",
    "build": "tsc",
    "ngc": "ngc -p .",
    "build-aot": "ngc -p tsconfig-aot.json",
    "build-release": "ngc -p tsconfig-release.json",
    "karma:debug": "karma start --auto-watch --no-single-run --browsers Chrome",
    "typedoc": "typedoc",
    "docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/"
  },
  "devDependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4",
    "@angular/cli": "1.0.0",
    "@angular/compiler-cli": "^4.0.0",
    "@types/hammerjs": "^2.0.32",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "@types/source-map": "^0.5.0",
    "@types/uglify-js": "^2.0.27",
    "@types/webpack": "~2.0.0",
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "^2.0.1",
    "codelyzer": "~2.0.0",
    "copy-webpack-plugin": "^3.0.1",
    "css-loader": "^0.23.1",
    "es6-promise": "^3.1.2",
    "es6-promise-loader": "^1.0.1",
    "es6-shim": "^0.35.1",
    "es7-reflect-metadata": "^1.6.0",
    "exports-loader": "^0.6.3",
    "expose-loader": "^0.7.1",
    "file-loader": "^0.9.0",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.0",
    "gulp-flatten": "^0.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^1.5.3",
    "gulp-uglifycss": "^1.0.6",
    "html-webpack-plugin": "^2.28.0",
    "imports-loader": "^0.6.5",
    "istanbul-instrumenter-loader": "^0.2.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "json-loader": "^0.5.4",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage": "^1.1.0",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-mocha-reporter": "^2.0.4",
    "karma-phantomjs-launcher": "^1.0.1",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^1.7.0",
    "protractor": "~5.1.0",
    "raw-loader": "0.5.1",
    "rimraf": "^2.5.2",
    "source-map-loader": "^0.1.5",
    "style-loader": "^0.13.1",
    "systemjs": "0.19.38",
    "to-string-loader": "^1.1.4",
    "ts-helpers": "1.1.1",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "tslint-loader": "^3.4.3",
    "typedoc": "^0.4.4",
    "typescript": "~2.2.0",
    "url-loader": "^0.5.7",
    "webpack": "2.3.1",
    "webpack-dashboard": "^0.1.8",
    "webpack-dev-middleware": "^1.8.1",
    "webpack-dev-server": "^2.1.0-beta.4 ",
    "webpack-md5-hash": "^0.0.5",
    "webpack-merge": "^0.14.1",
    "webpack-stream": "^3.2.0"
  }
}

三、修改tsconfig.json以下：

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "dist",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

四、根目錄新建tsconfig-aot.json以下：

{
  "compilerOptions": {
    "outDir": "dist",
    "target": "es5",
    "module": "es2015",
    "baseUrl": "src",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true,
    "lib": ["dom","es6"]
  },
  "include": [
    "src/app/components/**/*"
  ],
  "angularCompilerOptions": {
   "genDir": "aot",
   "skipMetadataEmit" : false
 }
}

五、根目錄下建立gulpfile.js文件，內容以下：

'use strict';

var gulp = require('gulp'),
  concat = require('gulp-concat'),
  uglifycss = require('gulp-uglifycss'),
  rename = require('gulp-rename'),
  del = require('del'),
  flatten = require('gulp-flatten');

gulp.task('build-css', function () {
  gulp.src([
    'src/app/components/common/common.css',
    'src/app/components/**/*.css'
  ])
    .pipe(concat('glory-ui.css'))
    .pipe(gulp.dest('resources'));
});

gulp.task('build-css-prod', function () {
  gulp.src([
    'src/app/components/common/common.css',
    'src/app/components/**/*.css'
  ])
    .pipe(concat('glory-ui.css'))
    .pipe(gulp.dest('resources'))
    .pipe(uglifycss({"uglyComments": true}))
    .pipe(rename('glory-ui.min.css'))
    .pipe(gulp.dest('resources'));
});

gulp.task('images', function () {
  return gulp.src([
    'src/app/components/**/images/*.png',
    'src/app/components/**/images/*.gif',
    'src/app/components/**/images/*.svg',
    'src/assets/components/images/*.png',
    'src/assets/components/images/*.gif',
    'src/assets/components/images/*.svg'
  ])
    .pipe(flatten())
    .pipe(gulp.dest('resources/images'));
});

gulp.task('themes', function () {
  return gulp.src(['src/assets/components/themes/**/*'])
    .pipe(gulp.dest('resources/themes'));
});

//Cleaning previous gulp tasks from project
gulp.task('clean', function () {
  del(['resources']);
});

//Building project with run sequence
gulp.task('build-assets', ['clean', 'build-css-prod', 'images', 'themes']);

六、接下來再重點看下app下面的兩個文件夾：

components存放組件相關代碼，showcase存放組件演示代碼；

七、命令行運行npm install安裝所有依賴，到這裏結構已經建立完成，能夠盡情地寫本身的組件了。寫完組件能夠選擇上到到本身的npm賬戶下面，提供項目調用