如何使用laravel mix（webpack）在全局范围中公开js变量？

Question

我正在使用manageChores(...) Laravel 5.4工具来构建和合并我的mix文件。这是Laravel的AngularJS 1：

webpack.mix.js

这是app defination：

mix.js('resources/assets/js/app.js', 'public/js/app.js');
mix.combine('resources/assets/js/directives/*', 'public/js/directives.js');

这是一个指令

'use strict';

var myApp = angular.module('myApp', [
    'ngRoute',
    //...
]);

问题是当我构建文件并将它们包含在html上时我得到了错误

myApp.directive('navigation', function () {
    return {
        templateUrl: 'app/modules/layouts/nav.html',
        replace: true
    };
});

来自已编译的ReferenceError: myApp is not defined 文件。

我发现，当diretives.js使用mix进行编译时，webpack将每个js文件的内容都包含在一个匿名函数中，因此我的webpack变量是只能在已编译的myApp文件中访问，而不能在全局范围内访问。当我从编译的app.js文件中手动删除匿名函数时，它可以正常工作。

所以我想知道是否有办法通过app.js myApp配置全局访问Laravel变量？

Answer 1

尝试在HTML脚本标记中内联myapp函数，而不是将其放在单独的JavaScript文件中。