AngularJS+Babel+Webpack项目部署后报错求助

Hey Rajesh, let's break down these two errors you're facing and walk through practical fixes based on common pitfalls with AngularJS, Babel, and Webpack production setups.

1. Fixing ReferenceError: production is not defined #

This error usually means your code is referencing a bare production variable somewhere, but it's not being injected or defined during the build process. Here's what to check:

• Verify Webpack's DefinePlugin setup: In your production Webpack config, make sure you're explicitly defining environment variables with webpack.DefinePlugin. If your code uses production directly (instead of process.env.production), add it to the plugin:

  const webpack = require('webpack');
  
  module.exports = {
    // ... other config
    plugins: [
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify('production'),
        'production': JSON.stringify(true) // Match the variable name your code uses
      })
    ]
  };
  

• Audit your codebase: Search for every instance of the production variable. Ensure it's either wrapped in process.env or properly declared somewhere—don't rely on implicit environment variable access.
• Check build script environment: Confirm your package.json build script sets the NODE_ENV correctly, like:

  "scripts": {
    "build": "NODE_ENV=production webpack --config webpack.prod.config.js"
  }
  

2. Fixing TypeError: Cannot read property 'map' of undefined #

This points to an array/collection that's resolving to undefined when your code tries to call .map() on it. AngularJS + production compression often triggers this—here's how to debug:

• Fix AngularJS dependency injection: Production minifiers rename function parameters, which breaks AngularJS's implicit dependency injection. Make sure all controllers, directives, and services use the array syntax for injection:

  // Bad (will break in production)
  angular.module('myApp').controller('MyCtrl', function($scope, myService) {});
  
  // Good
  angular.module('myApp').controller('MyCtrl', ['$scope', 'myService', function($scope, myService) {}]);
  

• Add null safety to map calls: Temporarily wrap map calls to prevent crashes while debugging:

  // Instead of myData.map(...)
  (myData || []).map(item => { /* ... */ });
  

  Then trace why myData is undefined—check if an API request is failing in production, a service isn't initializing, or a module is being tree-shaken incorrectly.
• Adjust Webpack Tree Shaking settings: If you've enabled sideEffects: false in package.json, AngularJS directives/services often have side effects that shouldn't be removed. Update your package.json to whitelist these files:

  "sideEffects": [
    "./src/**/*.directive.js",
    "./src/**/*.service.js",
    "./src/**/*.module.js"
  ]
  

• Debug with source maps: Add devtool: 'source-map' to your production Webpack config. This will let you see the original code line where the error occurs, making it way easier to pinpoint the problematic map call.

Extra Debugging Steps #

• Reproduce locally: Run your production build locally (e.g., with npm run build then serve the dist folder with a static server like serve dist)—this lets you debug the production bundle without deploying to test servers.
• Compare dev vs prod configs: Look for differences in plugins (like Terser/Uglify) or module rules that might be altering your code in production. For example, ensure Babel is using the same presets/plugins across both environments.

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