能否将JS库内置到UMD打包产物中？Angular ng-packagr打包date-fns问题

ng-packagr 提供了embedded配置项，可指定需要内置到最终UMD产物中的第三方依赖，不会将其标记为外部依赖，配置方法如下：

{
  ...
  "lib": {
    "umdModuleIds": {
      // 其余自带UMD的第三方依赖照常配置
      "ngx-mask": "ngx-mask"
    },
    "embedded": [
      "date-fns",
      "date-fns/locale",
      "date-fns-tz"
    ]
  }
  ...
}

配置完成后重新打包，原先的告警会自动消失，打包工具会自动对date-fns做tree-shaking，仅将你代码中实际用到的date-fns代码嵌入UMD包，不会全量引入，体积可控。如果当前使用的ng-packagr版本过低不支持embedded配置，将ng-packagr升级到v12及以上版本即可。

如果不方便调整库的打包配置，已经产出的UMD包默认依赖全局对象上的date-fns相关变量，使用方可通过手动挂载全局变量的方式适配：

1. 安装date-fns、date-fns-tz依赖
2. 在引入你的UMD库之前，先执行全局挂载逻辑，示例代码如下：

// 浏览器环境运行
import * as dateFns from 'date-fns';
import * as dateFnsTz from 'date-fns-tz';
import * as locale from 'date-fns/locale';

// 挂载到window全局对象
window.dateFns = dateFns;
window.dateFnsTz = dateFnsTz;
window.locale = locale;

// 挂载完成后再引入你的UMD库文件即可正常运行

如果使用方是通过script标签引入资源，也可自行打包一份date-fns的IIFE产物，直接通过script标签引入即可自动挂载对应全局变量，无需手动写挂载逻辑。

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