npm发布angular库构建UI库，以满足angular项目使用，各个项目风格统一。简介，易用。把需要发布的com

目标

构建UI库，以满足angular项目使用，各个项目风格统一。

简介，易用。

依赖包

gulp
gulp-less
gulp-typescript
gulp-imagemin
gulp-replace
angular-cli
ng-zorro-antd-mobile
less
typeScript

准备

npm账号

步骤

安装angular-cli

npm install -g @angular/cli

新建项目

ng new my-dream-app

安装gulp相关

npm install -g gulp
npm install gulp-imagemin -D -S
npm install gulp-less -D -S
npm install gulp-typescript -D -S
npm install gulp-replace -D -S

安装ng-zorro-antd-mobile

ng add ng-zorro-antd-mobile

项目目录

新建component

cd src/app/components
ng g ng-zorro-antd-mobile:nav-bar-basic --name=header

在components文件夹中初始化jsconfig

tsc --init

内容

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./../../../lib",
    "sourceMap": false,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "lib": ["es2018", "dom"]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

新建page

cd src/app/components
ng generate component home

router配置

app-routing.module.js

配置测试页面路由

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './page/home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

app.module.ts

引入路由模块（AppRoutingModule）

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { NgZorroAntdMobileModule } from 'ng-zorro-antd-mobile';


@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    NgZorroAntdMobileModule,
   // IndexModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

package.json

配置发布目录
配置发布命令

主要代码

"republish": "rimraf /lib/&&node convert"
 "name": "包名",
 "version": "0.0.0",
 "main": "lib/index.module.js",
 "files": [
    "lib",
    "package.json"//需要发布的文件
  ],

package.json代码

{
  "name": "包名",
  "version": "0.0.0",
  "main": "lib/index.module.js",
  "files": [
    "lib",
    "package.json",
    "README.md"
  ],
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 0 --open",
    "build": "ng build",
    "republish": "rimraf /lib/&&node convert"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.1.9",
    "@angular/common": "~9.1.9",
    "@angular/compiler": "~9.1.9",
    "@angular/core": "~9.1.9",
    "@angular/forms": "~9.1.9",
    "@angular/platform-browser": "~9.1.9",
    "@angular/platform-browser-dynamic": "~9.1.9",
    "@angular/router": "~9.1.9",
    "ng-zorro-antd-mobile": "^2.0.1",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.7",
    "@angular/cli": "~9.1.7",
    "@angular/compiler-cli": "~9.1.9",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "babel-cli": "^6.26.0",
    "codelyzer": "^5.1.2",
    "gulp": "^4.0.2",
    "gulp-imagemin": "^7.1.0",
    "gulp-less": "^4.0.1",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }
}

convert.js

配置转码命令
输出gulp转码后文件

const gulp = require("gulp");
const gulpless = require("gulp-less");
const ts = require("gulp-typescript");
const tsProject = ts.createProject("src/app/components/tsconfig.json");
var imageMin = require("gulp-imagemin");
var replace = require("gulp-replace");
let output = "lib";
gulp
  .src(["src/app/components/**/*.less", "src/app/components/**/*.css"])
  .pipe(gulpless())
  .pipe(gulp.dest(output));
gulp.src(["src/app/components/*.md"]).pipe(gulp.dest(output));
gulp.src(["src/app/components/**/*.html"]).pipe(gulp.dest(output));

gulp
  .src(
    [
      "src/app/components/**/*.png",
      "src/app/components/**/*.jpg",
      "src/app/components/**/*.svg",
    ],
    {
      sourcemaps: true,
    }
  )
  .pipe(imageMin({ progressive: true }))
  .pipe(gulp.dest(output, { sourcemaps: true }));
tsProject
  .src()
  .pipe(replace(".less", ".css"))
  .pipe(tsProject())
  .js.pipe(gulp.dest(output));

发布

转码发布代码

npm run republish

可看到生成了lib文件夹文件，lib文件夹中的文件即为发布使用的

发布到npm

npm publish

注意点

因为静态资源引入在模版中不能使用相对路径，所以图片资源要在less/css文件中引入

思路总结

把需要发布的components转码为es2015，输出到lib文件夹，然后发布到npm。