javascript - 如何使用 laravel mix (webpack) 在全局范围内公开 js 变量？

Question

我正在使用 Laravel 5.4 的 mix 工具来构建和组合我的 AngularJS 1 文件。这是我的 Laravel 的 webpack.mix.js:

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',
    //...
]);

这是一个指令

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

问题是当我构建文件并将它们包含在 html 中时，我收到错误

ReferenceError: myApp is not defined

来自已编译的directives.js文件。

我发现，由于 mix 使用 webpack 进行编译，并且 webpack 将每个 js 文件的内容包含在匿名函数中，因此我的 myApp 变量只能在已编译的 app.js 文件中访问，而不能在全局范围内访问。当我从编译的 app.js 文件中手动删除匿名函数时，它工作得很好。

所以我想知道是否有一种方法可以通过 Laravel 的 mix 配置使 myApp 变量全局访问？

Answer 1

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