了解 Laravel 混合

Question

了解 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 代码

这有什么关系吗？

Answer 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 模块编写很棒的代码。