Mather

We create our own demons.

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

默认分类 0 评

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

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

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

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

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

image

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

├── 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

image

通过包裹 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>

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

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

Vue logo

再见2018 你好2019

发表评论
撰写评论