了解 Laravel 混合

Question

理解Laravel混合

我目前正在将我的一个网站迁移到 Laravel 以使其在未来更易于维护......我有丰富的构建 API 的经验使用 Laravel，但我使用 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 模块编写出色代码的内容。

了解 Laravel 混合

Understanding Laravel Mix

javascript

bootstrapping

node.js

laravel

laravel-mix

理解Laravel混合

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

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

摆脱 Vue