12

了解 Laravel 混合

我目前正在将我的一个网站迁移到 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

和Vueapp.js 中的代码

这有什么关系吗？

4

1 回答 1

5

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

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

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

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

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

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

于 2017-03-06T03:19:58.670 回答