了解Laravel Mix

Question

了解Laravel Mix

我目前正在将我的一个网站迁移到Laravel，以便将来使其更易于维护...我有很多使用Laravel构建API的经验，但我的经验非常有限用Laravel建立网站，结果我需要另一位专业人士提供一些指导。

简而言之，我非常感谢以下非常简单的问题的答案，如果有人可以饶我几分钟......

基于文件的JS＆amp; 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模块编写出色的代码。