AngularJS常量跨文件注入及gulp-ng-constant环境配置问题

问题1：将其他文件的常量注入到AngularJS工厂或常量中 #

AngularJS的constant（常量）在配置和运行阶段都能被注入，跨文件复用完全可以通过模块依赖实现，步骤很清晰：

1. 定义独立的常量模块
   你通过gulp生成的configConst.js会自动生成带常量的模块，比如：

   angular.module('myApp.config', [])
     .constant('appConfig', {
       apiEndpoint: 'https://dev-api.example.com',
       requestTimeout: 5000
     });
   

2. 让目标模块依赖常量模块
   不管是要注入到工厂还是另一个常量，都得先让你的主模块或目标模块依赖这个常量模块：

   // 主模块声明时关联常量模块
   angular.module('myApp', ['myApp.config']);
   

3. 在工厂/常量中注入使用

   • 注入到工厂：

     angular.module('myApp')
       .factory('apiService', function(appConfig, $http) {
         return {
           fetchUserList: function() {
             return $http.get(`${appConfig.apiEndpoint}/users`);
           }
         };
       });
     

   • 注入到另一个常量（AngularJS允许常量依赖其他常量）：

     angular.module('myApp')
       .constant('apiSubPaths', function(appConfig) {
         return {
           loginUrl: `${appConfig.apiEndpoint}/auth/login`,
           profileUrl: `${appConfig.apiEndpoint}/user/profile`
         };
       });
     

问题2：结合gulp-ng-constant完成环境切换与常量整合 #

既然已经能把JSON转成JS文件，接下来把环境切换逻辑整合进去，同时确保生成的常量能被项目正常调用：

1. 准备多环境配置文件
   给不同环境单独准备JSON配置，比如configConst.dev.json、configConst.prod.json：

   // configConst.prod.json
   {
     "appConfig": {
       "apiEndpoint": "https://prod-api.example.com"
     }
   }
   

2. 配置gulp任务实现环境切换
   修改你的gulpfile.js，添加支持命令行参数切换环境的任务：

   const gulp = require('gulp');
   const ngConstant = require('gulp-ng-constant');
   
   // 生成配置文件的任务，支持--env参数指定环境
   gulp.task('generate-config', function() {
     // 读取命令行的环境参数，默认用开发环境
     const targetEnv = process.argv.find(arg => arg.startsWith('--env='))?.split('=')[1] || 'development';
     const configFilePath = `./configConst.${targetEnv}.json`;
   
     return gulp.src(configFilePath)
       .pipe(ngConstant({
         name: 'myApp.config', // 必须和问题1中依赖的模块名一致
         dest: './app/scripts/configConst.js', // 生成文件的输出路径
         wrap: false // 如果不用模块化打包工具，保持false即可
       }))
       .pipe(gulp.dest('./'));
   });
   
   // 把配置任务整合到构建流程里
   gulp.task('build', gulp.series('generate-config', function(done) {
     // 这里放你原来的构建步骤，比如压缩JS/CSS、打包资源等
     done();
   }));
   

3. 通过命令切换环境构建
   现在只需通过命令就能切换环境生成对应配置：

   • 开发环境构建：gulp build --env=development
   • 生产环境构建：gulp build --env=production

4. 确保项目加载生成的常量
   如果不是用打包工具自动引入，记得在index.html里加入生成的configConst.js，之后按问题1的方式依赖模块、注入常量即可。

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