如何创建并发布Angular 5模块？求现有JS库转自定义模块的新手教程

Hey there! I've got you covered on both creating/publishing an Angular 5 module from scratch, and wrapping an existing JS library into one—perfect for beginners. Let's dive in step by step.

Angular 5 doesn't have the built-in ng generate library command that newer versions do, so we'll build the structure manually (don't worry, it's straightforward):

1. 搭建项目基础 #

• 首先确保安装适配Angular 5的CLI版本：npm install -g @angular/cli@1.5
• 创建一个新文件夹作为模块根目录（比如my-angular5-ui-module），并进入该目录
• 初始化npm项目：npm init -y
• 安装Angular 5核心依赖：npm install @angular/core@5 @angular/common@5 rxjs@5.5 zone.js@0.8 --save
• 添加编译所需的开发依赖：npm install typescript@2.6 @angular/compiler-cli@5 @angular/platform-browser@5 --save-dev

2. 编写模块代码 #

• 创建src文件夹存放模块的核心文件
• 在src中创建主模块文件（比如my-ui.module.ts）：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// 导入自定义的组件/指令/服务
import { FancyButtonComponent } from './fancy-button.component';

@NgModule({
  imports: [CommonModule],
  declarations: [FancyButtonComponent], // 注册组件
  exports: [FancyButtonComponent] // 对外暴露组件，让其他应用可以使用
})
export class MyUiModule { }

• 接着创建上面引用的组件（比如fancy-button.component.ts）：

import { Component } from '@angular/core';

@Component({
  selector: 'my-fancy-button',
  template: `<button class="fancy-btn">{{ label }}</button>`,
  styles: [`.fancy-btn { padding: 8px 16px; background: blue; color: white; border: none; border-radius: 4px; }`]
})
export class FancyButtonComponent {
  label = 'Click Me!';
}

3. 配置TypeScript并打包 #

• 在根目录创建tsconfig.json，配置Angular 5兼容的编译规则：

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "declaration": true, // 生成TypeScript类型声明文件
    "outDir": "./dist", // 编译产物输出目录
    "strict": false,
    "lib": ["es2015", "dom"],
    "skipLibCheck": true
  },
  "angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "strictMetadataEmit": false
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

• 在package.json中添加打包脚本：

"scripts": {
  "build": "ngc -p tsconfig.json"
}

• 运行npm run build，会在dist文件夹生成编译后的代码和类型声明文件。

4. 发布到npm #

• 登录你的npm账号（没有的话先去官网注册）：npm login
• 更新package.json里的关键字段：
  • name: 模块的唯一名称（先去npm官网搜一下，避免重名）
  • version: 版本号，建议从1.0.0开始
  • main: 指向编译后的主文件，比如"dist/my-ui.module.js"
  • typings: 指向类型声明文件，比如"dist/my-ui.module.d.ts"
  • peerDependencies: 添加Angular 5依赖，避免用户重复安装：

    "peerDependencies": {
      "@angular/core": "^5.0.0",
      "@angular/common": "^5.0.0"
    }
    

• 最后执行发布：npm publish（如果是私有模块，加上--access restricted参数）

把现成的JS库封装成Angular模块，能让它在Angular项目里更易用，也方便分享给其他人。我们以常用的工具库lodash为例：

1. 安装目标JS库 #

• 安装库本身：npm install lodash --save
• 如果库有TypeScript类型声明（大部分流行库都有），同时安装类型包：npm install @types/lodash --save-dev

2. 创建封装服务 #

服务是封装工具类库的最佳选择，创建src/lodash.service.ts：

import { Injectable } from '@angular/core';
import * as _ from 'lodash';

@Injectable()
export class LodashService {
  // 封装你需要的lodash方法
  debounce(func: Function, waitMs: number) {
    return _.debounce(func, waitMs);
  }

  getUniqueItems(arr: any[]) {
    return _.uniq(arr);
  }

  // 按需添加更多方法！
}

3. 创建模块包装服务 #

创建src/lodash-angular.module.ts，把服务包装成Angular模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LodashService } from './lodash.service';

@NgModule({
  imports: [CommonModule],
  providers: [LodashService] // 让导入该模块的应用可以使用这个服务
})
export class LodashAngularModule { }

4. 发布前本地测试 #

• 在一个测试用的Angular 5项目中，本地安装你的模块：npm install ../path-to-your-lodash-module
• 在测试项目的AppModule中导入你的模块：

import { LodashAngularModule } from 'lodash-angular-module';

@NgModule({
  imports: [BrowserModule, LodashAngularModule],
  // ...
})
export class AppModule { }

• 在组件中使用封装的服务：

import { Component } from '@angular/core';
import { LodashService } from 'lodash-angular-module';

@Component({
  selector: 'app-root',
  template: `<button (click)="testDebounce()">Test Debounce</button>`
})
export class AppComponent {
  constructor(private lodashService: LodashService) {}

  testDebounce() {
    const delayedLog = this.lodashService.debounce(() => {
      console.log('1秒后才会打印这条日志！');
    }, 1000);
    delayedLog();
  }
}

5. 打包并发布 #

按照前面原生模块的打包和发布步骤，执行npm run build然后npm publish即可！

初学者快速提示 #

• 从小模块开始练手：先做一个单一组件（比如按钮）或小型工具封装，熟悉流程后再扩展。
• 发布前一定要本地测试：避免把有问题的模块推到npm上。
• 如果JS库没有TypeScript类型声明，可以临时在tsconfig.json中设置"noImplicitAny": false（不建议长期使用，但能帮你快速上手），或者自己编写简单的.d.ts声明文件。

内容的提问来源于stack exchange，提问作者GiorgosPap