文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

laravel mix的作用是什么

2023-07-05 00:39

关注

这篇文章主要介绍“laravel mix的作用是什么”,在日常操作中,相信很多人在laravel mix的作用是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”laravel mix的作用是什么”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

laravel mix用于管理前端任务,它是一款前端任务自动化管理工具,可使用工作流的模式对制定好的任务依次执行;Mix提供了简洁流畅的API,让开发者能够为Laravel应用定义Webpack编译任务,可以轻松地管理前端资源。

laravel mix是什么?有什么用?

Laravel Mix 一款前端任务自动化管理工具,使用了工作流的模式对制定好的任务依次执行。Mix 提供了简洁流畅的 API,让你能够为你的 Laravel 应用定义 Webpack 编译任务。Mix 支持许多常见的 CSS 与 JavaScript 预处理器,通过简单的调用,你可以轻松地管理前端资源。

默认文件和文件夹结构

默认 Sass 文件在 resources/assets/sass/app.scss  中(文件的内容是完全一样的),而默认的 JS 文件在 resources/assets/js/app.js(因为文件是完全相同的,所以想要学习更多关于 Vue 在 5.3 中的基础结构,可以查看 Matt Stauffer 写的 5.3 的前端结构 这一帖子)。

如果你深入到 app.js 中引用的 bootstrap 文件( resources/assets/js/bootstrap.js ),你会看到我们使用Axios 而不是 Vue-Resource 来设置 X-CSRF-TOKEN( Vue-Resource 在 2016 年之后将不再工作)。

如果你在 Mix 的项目上运行 npm run dev,可以看到:

laravel mix的作用是什么

默认情况下,我们生成的文件的位置与 Elixir 相同:public/css/app.css  和 public/js/app.js

主要 Mix 方法

正如你所见,你可以轻松的使用 Mix 处理 Sass 和 JS。Sass,显而易见,运行 Sass 文件,并将其输出为 CSS。用  JS 方法支持 ECMAScript 2015 语法、编译 .vue 文件、针对生产环境压缩代码以及对 JavaScript 文件进行其他处理。

还可以用 .less 方法将 Less 编译为 CSS:

mix.less('resources/assets/less/app.less', 'public/css');

combine 方法将文件组合在一起:

mix.combine([    'public/css/vendor/jquery-ui-one-thing.css',    'public/css/vendor/jquery-ui-another-thing.css'], 'public/css/vendor.css');

copy 复制文件或目录:

mix.copy('node_modules/jquery-ui/some-theme-thing.css', 'public/css/some-jquery-ui-theme-thing.css');mix.copy('node_modules/jquery-ui/css', 'public/css/jquery-ui');

与 Elixir 不同,Source Maps 默认情况下是关闭的,可以在 webpack.mix.js 中调用以下方法来开启:

mix.sourceMaps();

默认情况下 Mix 会以系统通知的方式告知你编译结果,如果不希望它们运行,可以使用 disableNotifications() 方法禁用。

Mix.manifest.json  和 缓存清除

熟悉 Elixir 的人可能会注意到上面的输出图像有一点与 Elixir 不同:Mix 正在生成一个开箱即用的清单文件 public/mix-manifest.json。 当然,Elixir 也会生成清单文件:public/build/rev-manifest.json,与 Mix 直接生产不同,它只会在确定启用了缓存清除(版本控制)的功能时生成它。

这些清单文件是用来映射前端文件与已经版本化处理的前端文件副本,例如: /js/app.js/js/app-86ff5d31a2.js 之间的映射。有了这个文件就可以在 HTLM 用简单的引用指向该引用的版本化文件。例如 <script src ="{{ mix('js/app.js') }}">

不像 Elixir,即使你不使用缓存清除,Mix 都会生成这个文件,但它也仅仅只是一个导向地图:

{  "/js/app.js": "/js/app.js",  "/css/app.css": "/css/app.css"}

对于以前使用 Elixir 的用户来说,另一个有趣的变化是:你的构建文件现在最终在正常的输出目录,而不是单独的构建目录,所以你版本化的 JS 文件,将出现在 public/js/app-86ff5d31a2.js

要在 Mix 中启用缓存清除,只需在 Mix 文件中附加 .version()

mix.js('resources/assets/js/app.js', 'public/js')    .sass('resources/assets/sass/app.scss', 'public/css')    .version();

这比传递实际文件名要简单得多,就像在 Elixir 中一样。

mix() 帮助

正如上面提到的,你要使用 mix() 来代替 elixir() 引用你的资源,运行方式完全相同。 但是有一点,用 Mix 的话,要删除 Laravel 模板中默认的这些引用行:

<link href="/css/app.css" rel="stylesheet">...<script src="/js/app.js"></script>

用下面这种方式替换它们:

<link href="{{ mix('/css/app.css') }}" rel="stylesheet">...<script src="{{ mix('/js/app.js') }}"></script>

记住,这个函数只是在 mix-manifest.json  中查找字符串并返回映射的构建文件。用来保证当你清除了缓存时,它懂得去加载默认的那个文件。

代码拆分

Webpack 是对许多人来说很令人兴奋的部分,因为它提供了使代码结构化的智能能力。我还没能完全弄明白 webpack 的所有功能,Mix 也没把所有功能都打包支持,例如:tree-shaking。但它确实使你的自定义代码(它可能会经常更改)与你的供应商代码(这不应该)区分,使得用户在每次推送新版本时刷新所有供应商代码的可能性更小。

要利用这个特性,你需要使用 extract() 函数,它将你定义一个给定的库或者模块集合提取到一个单独的构建文件名为 vendor.js

mix.js('resources/assets/js/app.js', 'public/js')    .extract(['vue', 'jquery']);

在这种情况下,Mix 生成了三个文件:public/js/app.jspublic/js/vendor.js  和第三个 Webpack 特定文件 public/js/manifest.js。 为了运行顺利,得按照以下的顺序引入这三个文件:

<script src="{{ mix('/js/manifest.js') }}"></script><script src="{{ mix('/js/vendor.js') }}"></script><script src="{{ mix('/js/app.js') }}"></script>

如果清除了缓存,并且更改了应用自定义的代码, vendor.js  文件仍会缓存,也只有应用自定义的代码才会被清除缓存,这样你的网站会加载得更快。

自定义 Webpack 配置

如果你有兴趣添加自己的自定义 Webpack 配置,只需要传递你的 Webpack 配置:

mix.webpackConfig({    resolve: {        modules: [            path.resolve(__dirname, 'vendor/laravel/spark/resources/assets/js')        ]    }});

(上面这个例子只是从文档复制粘贴来的~ 你真的有兴趣就自己去了解哈~)

顺便一提

说点有趣的东西吧,我想这或许能在 Webpack 文件中加点什么。 如果你想只在生产环境下复制点什么,你怎么会这样做?

会这么问是因为我发现在 Node 环境对象中,我们可以用 process.env 去访问。可以检查任何值,包括系统上的任何全局环境变量。这个发现可能可以让我们去做点其他有趣的事情,比如说有条件地检查 process.env.NODE_ENV  中的值:

if (process.env.NODE_ENV == 'production') {    mix.webpackConfig({ ... });}

但是在阅读源代码后,我发现 NODE_ENV 不是主要的检查。相反,是用了一个带有 inProduction  标志的配置对象去做这件事情。 这个文档里没有写,因此请谨慎使用,但你可以更新 Webpack 文件顶部的导入,然后使用该配置对象:

const { mix, config } = require('laravel-mix');if (config.inProduction) {    mix.webpackConfig({ ... });    }

默认依赖关系

你可以查看 package.json  并查看每个项目包含的依赖项列表。 记住,这些是由默认的 app.jsbootstrap.js  来引用的,你可以删除 app.js  和 package.json  中的引用,并重新运行 npm install ,当然删除引用并不会删除源文件。

到此,关于“laravel mix的作用是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯