试图将依赖于gulp环境的web包变量传递到angularjs应用程序中

Trying to pass gulp environment-dependent web-pack variables into angularjs app

本文关键字：变量 应用程序 angularjs 依赖于 gulp 环境 包变量 web      更新时间：2023-09-26

我对AngularJS和gulp和webpack相当陌生，所以如果我没有使用正确的术语，请原谅。一直在看堆栈溢出和angularjs的东西2个小时，不能把我读的东西联系起来。

我即将进入一个已经开发的应用程序，并试图找到最好的方法，从webpack插件变量中包含分析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/gulp/tasks/webpack-development.js中的webpack变量为:

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

目前，webpack变量可以通过GOOGLE_ANALYTICS_KEY在ng_organize/application.js中访问。我试着在ng_organize/src/appName/customer/CustomerController.js中访问它们。

我想创建一个服务来存储GOOGLE_ANALYTICS_KEY(和其他键)，这取决于环境。这可能吗?如果是这样，我该怎么做呢?

事实证明，它们被自动全局地包含在你的应用程序的代码中，你只是不能在调试器中调用全局变量(这就是我如何测试，看看它们是否可以在CustomerController中访问)。

GOOGLE_ANALYTICS_KEY仍然可以在CustomerController中访问。

相关文章：