引入 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 下载包安装即可：

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

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

如果版本较低，可以使用如下命令升级：

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.json 的 devDependencies 选项中声明的前端依赖，会在当前目录下生成包含这些依赖包的 node_modules，就像运行 composer install 会生成 vendor 包一样。

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

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

（全文完）