如何在Angular 12 Library项目中正确引入并打包plain-draggable第三方JS库

1. 替换全局声明为ES模块导入 #

删掉你之前在component.ts里加的declare let PlainDraggable: any;代码，改为直接从包导入：

// 组件顶部导入
import PlainDraggable from 'plain-draggable';

如果导入时提示缺少类型声明，可以在库的src目录下新建typings.d.ts文件（已有则直接编辑），添加如下声明：

declare module 'plain-draggable' {
  export default class PlainDraggable {
    constructor(element: Element, options?: any);
    [key: string]: any;
  }
}

如果导入时提示不是默认导出，把导入语句改成import * as PlainDraggable from 'plain-draggable'即可，你原有new PlainDraggable(node)的业务代码不需要修改。

2. 配置库的依赖项 #

打开库项目根目录的package.json（路径为projects/angular-lib/package.json），把plain-draggable加入dependencies配置项：

{
  "name": "angular-lib",
  "version": "你的库版本号",
  "dependencies": {
    "plain-draggable": "^你安装的对应版本号",
    // 保留原有其他依赖
  }
}

该配置会让其他用户安装你的库时，自动同步安装plain-draggable作为依赖。

3. 配置UMD打包映射（可选，仅需支持UMD格式时配置） #

如果你的库需要输出UMD格式供非模块化环境使用，打开库的ng-package.json，添加umdModuleIds配置：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/angular-lib",
  "lib": {
    "entryFile": "src/public-api.ts",
    "umdModuleIds": {
      "plain-draggable": "PlainDraggable"
    }
  }
}

4. Demo应用测试配置（可选） #

如果需要在angular-lib-demo-app中直接测试功能，可在Demo应用对应的angular.json配置中添加scripts，Demo为应用类型项目，天然支持scripts配置：

{
  "projects": {
    "angular-lib-demo-app": {
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "scripts": [
              "node_modules/plain-draggable/plain-draggable.min.js"
            ]
            // 保留其他原有配置
          }
        }
      }
    }
  }
}

你之前在库项目angular.json中加scripts报错的原因是：@angular-devkit/build-angular:ng-packagr是Angular库专用构建器，本身不支持scripts配置项，该配置仅在@angular-devkit/build-angular:browser这类应用构建器中可用。使用ES模块导入的方式不需要配置scripts，ng-packagr会自动处理依赖的打包逻辑。

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