laravel-mix — 在后端项目中的构建方式

在前端构建 工具 兴起的同时，一大堆基于构建的UI和应用框架也随之吸引了了广大开发者的目光。

从零上手构建工具 webpack 是每个前端开发者的噩梦，其余框架的构建配置也不能涵盖全部开发需求。

对于传统后台管理应用，laravel 等主流框架仍提供页面渲染功能，但官方也提供了使用前端框架的一种加载方式。官方通过改进 webpack 构建工具，支持 vue 框架，sass 样式构建，使得前端工程化在整个项目中变得简单。

创建前端应用时，有以下几点需求

• 支持较新语法的 JS 代码
• 支持打包样式
• 支持现代应用框架及基于框架的 UI 组件
• 拥有依赖后端或者静态的部署方案

当我们使用 laravel 框架开发时，laravel-mix 已被包含在项目里，安装好 Node 和 Yarn 解决依赖后开箱即用。

├── app
├── artisan
├── bootstrap
├── config
├── database
├── package.json  <----- project desc file of npm
├── phpunit.xml
├── public        <----- build file will in the public
├── resources     <----- frontend source code in this 
├── routes
├── server.php
├── storage
├── tests
├── vendor
└── webpack.mix.js <----- laravel-mix config file

通过包裹 webpack 实现了大部分功能，以便满足前端在项目中的工程化需求。

package.json 中有默认的一些开发和部署构建命令，使用 cross-env 来设置垮平台的环境变量。

"scripts": {
    "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",
        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
  },

webpack.mix.js

使用 webpack 的构建功能 ，先通过配置 webpack.mix.js 。在这里可以针对开发、生产环境做配置，甚至从底层重新配置 webpack 。

//webpack.mix.js
const { mix } = require('laravel-mix');

mix.setPublicPath('public')
    .js('resources/assets/js/app.js', 'js/').sourceMaps()
   .sass('resources/assets/sass/app.scss', 'css/')

默认情况下使用项目自带的命令 yarn run watch-poll 产出

dist
│  mix-manifest.json
│  
├─css
│      app.css
│      
└─js
        app.js

产出 mix-manifest.json 的作用是，结合模板渲染的方式，有组织地加载构建后的文件。

mix() 函数读取产出 mix-manifest.json 文件，替换对用路径为实际路径。但在生产模式下，为解决资源缓存问题，情况会更复杂。

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

<!-- welcome.blade.php -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}"> 

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

近年由于前端技术变化较快，其大呼的“前后端分离”，运用框架独有的构建方式，使得前端代码独立于后端渲染。这是一件好事情，但构建后的静态项目，部署往往更多时间去解决 “跨域” “文件缓存”等问题。

现在，部署依然可附属在整个后端项目中，作为现有模式的一个过渡，不必花太多时间在构建和分离部署上。