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

【问题标题】：How to expose a js variable in global scope with laravel mix (webpack)?如何使用 laravel mix（webpack）在全局范围内公开 js 变量？
【发布时间】：2017-10-05 02:36:40
【问题描述】：

我正在使用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

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

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

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

【问题讨论】：

虽然正确的方法是将各种角度组件注册到模块是使用angular.module('myApp') 作为吸气剂。永远不要污染全局命名空间..
你能详细说明一下@pankajparkar
看看 Laravel 在它的起始代码中是如何做到的：github.com/laravel/laravel/blob/v5.4.21/resources/assets/js/…（类似window._ = require('lodash');）
@ceejayoz 你的应该是一个答案。这让我很开心

标签： javascript angularjs laravel webpack laravel-mix

【解决方案1】：

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

【讨论】：

我知道它会工作并且工作得很好，但我想弄清楚laravel-mix 即webpack 是如何做到这一点的@
你的答案应该是评论。