Angular v15项目中如何从库构建main.js入口文件？

1. 配置ng-packagr生成单文件UMD包 #

在你的库项目根目录（projects/[你的库名]）下，创建或修改ng-package.json，添加以下配置：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/[你的库名]",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "format": ["umd"],
  "outputHashing": "none"
}

• format: ["umd"] 指定仅生成UMD格式包，该格式会打包为单个文件
• outputHashing: "none" 避免生成带哈希后缀的文件名

2. 调整angular.json的库构建配置 #

打开项目根目录的angular.json，找到你的库对应的build配置，确保配置正确：

"projects": {
  "[你的库名]": {
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:ng-packagr",
        "options": {
          "project": "projects/[你的库名]/ng-package.json",
          "outputPath": "dist/[你的库名]",
          "tsConfig": "projects/[你的库名]/tsconfig.lib.json"
        }
      }
    }
  }
}

3. 构建并生成main.js #

执行库构建命令：

ng build [你的库名]

构建完成后，在dist/[你的库名]/umd目录下会生成[你的库名].umd.js，将其重命名为main.js。

也可以在项目根目录的package.json中添加自动重命名的脚本，简化操作：

"scripts": {
  "build:plugin": "ng build [你的库名] && cp dist/[你的库名]/umd/[你的库名].umd.js dist/[你的库名]/main.js"
}

之后执行npm run build:plugin即可直接得到main.js。

4. 部署到目标位置 #

将生成的main.js复制到项目的src/assets/plugins/my-plugin目录下，就能通过你提供的脚本正常引入。

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