Angular 6应用使用cosmicjs启动时出现process is not defined错误求助

我帮你分析下这个问题：你遇到的Uncaught ReferenceError: process is not defined确实和Angular版本升级后的环境变量配置变化有关——旧教程用的是基于.angular-cli.json的老版本Angular，而Angular 6+改用angular.json后，默认不会在浏览器环境中暴露Node.js的process对象，而CosmicJS的底层代码里直接引用了process.env，所以才会触发这个报错。下面给你几个可行的解决办法：

方案1：用Angular原生环境变量替代process.env（最推荐） #

Angular本身有一套成熟的环境变量系统，完全可以替代process.env，而且更符合Angular的最佳实践：

1. 打开src/environments/environment.ts（开发环境）和environment.prod.ts（生产环境），添加你的CosmicJS配置：

export const environment = {
  production: false,
  cosmicConfig: {
    bucketSlug: '你的Cosmic存储桶Slug',
    readKey: '你的Cosmic只读密钥'
  }
};

2. 在需要使用CosmicJS的组件/服务里，导入Angular的环境变量，替换原来的process.env引用：

import { environment } from '../environments/environment';
import Cosmic from 'cosmicjs';

// 初始化CosmicJS客户端
const cosmic = Cosmic();
const bucket = cosmic.bucket({
  slug: environment.cosmicConfig.bucketSlug,
  read_key: environment.cosmicConfig.readKey
});

方案2：扩展Webpack配置，在浏览器中注入process对象 #

如果一定要沿用process.env的写法，可以通过自定义Webpack配置来实现：

1. 先安装必要的依赖：

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

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

const Dotenv = require('dotenv-webpack');

module.exports = {
  plugins: [
    // 加载根目录的.env文件中的环境变量
    new Dotenv()
  ],
  resolve: {
    // 为浏览器环境提供process的polyfill
    fallback: {
      "process": require.resolve("process/browser")
    }
  }
};

3. 修改angular.json的构建配置，替换默认的builder为自定义Webpack builder：
   找到architect下的build和serve节点，修改如下：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.extra.js"
      },
      // 保留你原来的其他配置（比如outputPath、index、main等）
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    // 保留你原来的其他配置
  }
}

4. 在src/polyfills.ts中添加一行，把process挂载到全局：

import * as process from 'process';
window['process'] = process;

5. 最后在项目根目录创建.env文件，写入你的CosmicJS环境变量：

COSMIC_BUCKET=你的存储桶Slug
COSMIC_READ_KEY=你的只读密钥

方案3：临时全局定义process（仅用于快速测试） #

如果你只是想快速验证功能，不想改太多配置，可以在src/index.html的<head>标签里添加一段脚本，手动定义process对象：

<script>
  window.process = {
    env: {
      COSMIC_BUCKET: '你的存储桶Slug',
      COSMIC_READ_KEY: '你的只读密钥'
    }
  };
</script>

⚠️ 注意：这个方案只适合本地测试，生产环境绝对不要用，因为硬编码密钥会有安全风险。

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