尝试将与gulp环境相关的Web Pack变量传递给angularjs应用

Question

我对AngularJS和gulp和webpack还是比较陌生，所以如果我使用的术语不正确，请原谅。 已经阅读了两个小时的堆栈溢出和angularjs内容，无法与我正在阅读的内容建立连接。

我要进入一个已经开发的应用程序，并尝试找到最佳方法，以将来自webpack插件变量的Analytics API密钥包含到AngularJS应用程序中以供使用。

目录的设置如下：

ng_organize
    /gulp
        /tasks
            webpack-development.js
            webpack-production.js
        /util
    /src
        /appName
            /customer
                CustomerController.js
                ...
            /home
            /shop
        app.js
        index.js
    application.js

ng_organize ng_organize/gulp/tasks/webpack-development.js中的webpack变量为：

gulp.task('webpack:development', function(callback){
    webpack({
        context: ...
        plugins: [
            new webpack.DefinePlugin {
                GOOGLE_ANALYTICS_KEY: 'XXX',
                ...
            }    
        ]
    });
});

目前，可以使用GOOGLE_ANALYTICS_KEY在ng_organize/application.js访问webpack变量。 我正在尝试在ng_organize/src/appName/customer/CustomerController.js访问它们。

我想创建一个服务来存储依赖于环境的GOOGLE_ANALYTICS_KEY（和其他键）。 这可能吗？ 如果是这样，我将如何去做？

Answer 1

事实证明，它们会自动全局包含在您的应用程序代码中，您只是无法在调试器中调用全局变量（这就是我测试如何查看它们是否可以在CustomerController中访问的方式）。

仍可以在CustomerController中访问GOOGLE_ANALYTICS_KEY 。