如何在Angular+NW.js项目中让CLI识别并打包zip-lib依赖树？

方法1：通过angular.json配置允许CommonJS依赖 #

Angular CLI默认会对CommonJS模块做限制，你可以直接在配置里指定允许zip-lib及其子依赖：

1. 打开项目根目录下的angular.json文件
2. 找到projects -> [你的项目名称] -> architect -> build -> options节点
3. 添加allowedCommonJsDependencies配置，把zip-lib和它的子依赖列进去：

"allowedCommonJsDependencies": [
  "zip-lib",
  "adm-zip", // zip-lib的子依赖，按需添加
  "fs-extra"  // 示例子依赖，根据实际情况调整
]

4. 重新执行构建命令即可生效

方法2：添加显性import触发CLI检测 #

因为nw.require()是动态引用，Angular CLI的静态代码分析无法识别，你可以在使用该依赖的文件顶部添加一个空的import，让CLI检测到这个依赖：

// 在组件/服务文件顶部添加
import 'zip-lib';

// 实际使用还是用nw.require
let zl = nw.require('zip-lib');

这种方法简单直接，CLI会自动把zip-lib及其子依赖打包进产物。

方法3：自定义Webpack配置强制打包 #

如果以上方法无效，可通过自定义Webpack配置来处理：

1. 安装自定义构建器：

npm install @angular-builders/custom-webpack --save-dev

2. 在项目根目录创建webpack.extra.js文件，内容如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        include: /node_modules\/zip-lib/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

3. 修改angular.json中的构建配置，替换默认builder为自定义构建器：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.extra.js"
      },
      // 其他原有配置...
    }
  }
}

4. 安装babel相关依赖（如果没装的话）：

npm install babel-loader @babel/core @babel/preset-env --save-dev

5. 重新构建项目即可

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