引入 Laravel Mix 管理前端资源

laravel-mix

引言

到目前为止,我们还是使用很原始的方式引入前端资源文件 —— 在特定目录下存放完整的 CSS、JavaScript 文件,然后在 HTML 文档中静态引入。

这种方式对小型项目而言,比如一个个人博客系统,没什么问题,但是对于现代化的大型项目,尤其是引入工程化、模块化管理的前后端分离项目,显然就不合适了,因为前端项目需要通过 NPM 引入各种第三方依赖以模块化方式构建复杂功能,以及 Less、Sass 等预处理语言编写模块化样式代码,然后通过 WebPack 对其这些前端资源进行编译、打包、压缩、分发,变成最终可用的静态资源文件。

如果要完整介绍并构建这样的一套前端开发环境,需要引入很多额外的篇幅和前端知识,好在 Laravel 生态提供了一个 Laravel Mix 组件,该组件对 Webpack 的构建步骤做了封装,提供了一套非常简单的流式 API 帮助我们对 CSS 和 JavaScript 资源文件进行预处理,细节可参考 Mix 官方文档

虽然该项目是针对 Laravel 框架开发的,不过,由于是一个纯前端项目,因此可以适用于所有 Web 前端项目,现在,我们就来在博客项目中引入 Laravel Mix 管理前端资源。

安装 Laravel Mix

开始之前,需要先安装 Laravel Mix 组件需要的前端相关依赖,假设你的系统上已经安装过 Node 和 NPM 包管理器,如果没有安装的话前往 Node.js 官方下载页面,下载自己操作系统对应的 Node.js 下载包安装即可:

-w1023

NPM 会随着 Node.js 一起安装。Mac 系统默认已经安装,只是版本较低,Windows 系统如果使用 Laragon 作为集成开发环境,也默认安装了 NPM,通过 Cmder 中即可使用。

安装完成后可以在命令行通过 npm --version 验证 NPM 是否安装成功:

-w633

如果版本较低,可以使用如下命令升级:

npm i -g npm 

blog 根目录下通过 npm init 命令按照向导生成 package.json,并将 Laravel 项目自带的 package.json 相关依赖和命令拷贝过来:

{
  "private": false,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.19",
    "cross-env": "^7.0",
    "laravel-mix": "^5.0.1",
    "lodash": "^4.17.13",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.15.2",
    "sass-loader": "^8.0.0"
  }
}

package.json 类似 PHP 项目的 composer.json,主要都是用来管理第三方依赖的,只不过所在的语言不同而已。

运行 npm install 初始化 package.jsondevDependencies 选项中声明的前端依赖,会在当前目录下生成包含这些依赖包的 node_modules,就像运行 composer install 会生成 vendor 包一样。

这样一来,我们就可以在项目中基于 Laravel Mix 管理前端资源了。

下篇教程,我们将基于 Laravel Mix 为博客项目替换主题。

上一篇: 基于 Laravel Eloquent 组件编写 ORM 模型类

下一篇: 将博客主题替换成 Clean Blog