了解 Laravel 混合

Posted 2023-03-14

【中文标题】了解 Laravel 混合

【英文标题】：Understanding Laravel Mix

【发布时间】：2017-07-25 17:21:14

【问题描述】：

了解 Laravel Mix

我目前正在将我的一个网站迁移到 Laravel，以使其在未来更易于维护……我有丰富的使用 Laravel 构建 API 的经验，但我使用 Laravel 构建网站的经验非常有限因此，我需要其他专业人士的一点指导。

简而言之，如果有人能抽出几分钟时间，我将非常感谢以下非常简单问题的答案...

基于文件的 JS & CSS 而不是基于应用程序

我喜欢以特定方式编写我的 JS 和 CSS 文件，其中每个页面都有自己的与页面相关的特定文件。例如，about.php 可能具有以下依赖项：

JS：

jquery.js any_other_third_party_library.js app.js（全局函数） about.js（页面特定功能）

CSS：

some_third_party_library.css app.css（全局样式） about.css（页面特定样式）

在我自己的框架上，上述内容将被合并并缩小为一个用于 JS 的文件和一个用于 CSS 的文件。据我了解，Laravel Mix 正是这样做的......

但是，据我所知，这样做的方法如下：

webpack.mix.js：

// About
mix.scripts([
    'resources/assets/js/app.js',
    'resources/assets/js/about/about.js'
], 'public/js/about/about.js');

很简单，我想知道什么；以上是解决这个问题的正确方法吗？有没有更好、更高效的方法来为每个页面自动执行此操作？

什么是 bootstrap.js 和 app.js 文件？

据我所知，这些文件只是加载依赖项，但这有点令人困惑，因为某些依赖项可能是特定于页面的......请有人能更详细地解释一下这些文件的用途吗？或者至少，它们之间有什么区别......

摆脱 Vue

我没有兴趣在我的项目中使用Vue，所以我删除了以下文件：

/components/Example.vue

以及 app.js 中的 Vue 代码

这有什么关系吗？

【问题讨论】：

我认为首先你必须看看结果应该是什么样子。据我了解，您有一个非常简单的 js/css 结构，没有任何预处理器。因此，首先要缩小您的全局资产，然后按页面对其他资产进行分组。

@CerlinBoss 是的，你是对的，我的 JS/CSS 结构非常简单，事实上，我希望大多数网站都使用类似的东西。不过，我希望有一个文件，例如about-some_hash.js 包含 about.php 所需的所有代码。 CSS 也是如此...基本上每个页面都有一个 unique 组合和缩小文件。这有意义吗？

当然。正如我之前所说，您可以拥有一个全局 js (min) 文件和 css (min) 文件，然后分别拥有特定于页面的缩小 js 和 css 文件。 Laravel mix 除了 gulp 会做的事情之外什么也没做。

@CerlinBoss 是的，但是应该将这些结合起来以减少请求的数量...本质上，我想知道的很简单，这样做是不是不好的做法：mix.js(['resources/assets/js/app.js', 'resources/assets/js/about/about.js'], 'public/js/about/about.js') 等每个页面...或者有更好的方法吗？

@CerlinBoss 我将在此处发布我的新问题的链接，如果您愿意，请随时在此处回答：-D

【参考方案1】：

您将把所有样式和脚本打包成一个文件，然后将它们压缩后提供给客户端。

对于前端资产，请致电mix.sass('resources/assets/sass/app.scss')。在该样式的入口点中，您将能够根据需要使用 Sass 的 @import 'about'; 语法导入其他样式表。 （也将您的其他 CSS 文件重命名为以 .scss 结尾）。

对于您的后端资产，请致电mix.js('resources/assets/js/app.js')。然后，类似地，您可以使用 import './about.js'; 导入其他 javascript 模块。您可能想查找 ES2015 模块，以便学习如何编写模块化 JavaScript。

通读bootstrap.js 文件，了解 Laravel 如何默认连接 jQuery 和 Vue。您不需要其中的任何内容，因此请删除您不想要的任何内容，或者如果您不需要任何内容​​，请删除整个文件。

Vue 与 Laravel 一起开箱即用，但这只是一个建议，您可以将其替换为您自己选择的前端框架，或者将其删除并什么都不替换。由你决定。

编辑：长话短说；使用 mix.sass 和 mix.js，阅读使用 Sass 和 ES2015 模块编写很棒的代码。

【讨论】：

首先非常感谢您的回答！但是，我认为您并没有真正理解我的问题。我不是在问 Laravel Mix 是做什么的，我知道它是做什么的......我想了解的是使用 Laravel Mix 压缩 特定文件 的最有效方法是什么>特定页面？

我建议您不要这样做，而是为您的整个应用程序使用一种组合的 JavaScript 和一种组合的样式表。如果您询问如何在某些页面上激活脚本的相关样式或部分，您可能会考虑将控制器名称和操作作为类添加到 body 标记，并使用它来定位功能。如果你想使用 Laravel Mix 为每个页面创建一个单独的资源，它不是为此而设计的，也没有真正有效的方法来实现它。

感谢您回到我身边；我听到了你的声音，鉴于 Laravel 显然鼓励使用它，我会试一试，尽管我仍然保留在某些页面上包含未使用的代码......不过，你介意编辑你的答案以包含一个例子app.js 和 some_page.js，以及一个混合示例，这样我就可以看到我应该如何去做，然后我可以将答案标记为已接受:-D

您使用的大多数网站都会这样做，为您提供单一资产，即使任何给定页面只会使用一个子集。如果你想要一个真实世界的例子，这里是我博客中的webpack.mix.js 文件：github.com/dwightwatson/neontsunami/blob/master/webpack.mix.js 它展示了如果你愿意，你可以如何拥有单独的资产，我分解了我的管理资产，因为它们与主要资产完全不同网站。

非常感谢德怀特，这正是我需要看到的！我确实有最后一个问题，如果这样可以吗？我所有的 javascript 都只是我自己的框架和 jQuery 等中的纯老式 javascript。但是，每个页面都有自己的一个名为 SetPageElements() 的函数的实现，它初始化该特定页面所需的任何内容。您将如何为每个页面创建一个独特的功能？显然我可以重命名每个页面的函数，但如果可以避免的话，我宁愿不这样做......