Laravel-mix 中文文档

时间  2019-11-06
标签 laravel mix 中文 文档 繁體版
原文   原文链接

镜像地址 : http://www.javashuo.com/article/p-ckzizbmn-cm.html
原文地址: Laravel Mix Docsjavascript

 

概览

 

基本示例

larave-mix 是位于webpack顶层的一个简洁的配置层，在 80% 的状况下使用 laravel mix 会使操做变的很是简单。尽管 webpack 很是的强大，但大部分人都认为 webpack 的学习成本很是高。可是若是你没必要用再担忧这些了呢？php

看一下基本的 webpack.mix.js 文件，让咱们想象一下咱们如今只须要编译javascript(ES6)和sass文件：css

let mix = require('laravel-mix'); mix.sass('src/app.sass', 'dist') .js('src/app.js', 'dist');

怎么样，简单吗？html

　　1. 编译sass文件, ./src/app.sass 到 ./dist/app.css
　　2. 打包在 ./src/app.js 的全部js(包括任何依赖)到 ./dist/app.js。前端

使用这个配置文件，能够在命令行触发webpack指令：node_modules/bin/webpackvue

在开发模式下，并不须要压缩输出文件，若是在执行 webpack 的时候加上环境变量：export NODE_ENV=production && webpack,文件会自动压缩java

 

less ?

可是若是你更喜欢使用Less而不是Sass呢？没问题，只要把 mix.sass() 换成 mix.less()就OK了。node

使用laravel-mix，你会使发现大部分webpack任务会变得更又把握react

 

安装

尽管 laravel-mix 对于laravel使用来讲最优的，但也能被用于其余任何应用。jquery

 

laravel项目

laravel已经包含了你所须要的一切，简易步骤：

　　1. 安装 laravel

　　2. 运行 npm install 

　　3. 查看 webpack.mix.js 文件 ，就能够开始使用了.

你能够在命令行运行 npm run watch 来监视你的前段资源改变，而后从新编译。

在项目根目录下并无 webpack.config.js 配置文件，laravel默认指向根目录下的配置文件。若是你须要本身配置它，你能够把它拷贝到根目录下，同时修改 package.json 里的npm脚本： cp node_modules/laravel-mix/setup/webpack.config.js ./.

 

独立项目

首先使用npm或者yarn安装laravel-mix，而后把示例配置文件复制到项目根目录下

mkdir my-app && cd my-app npm init -y npm install laravel-mix --save-dev cp -r node_modules/laravel-mix/setup/webpack.mix.js ./

如今你会有以下的目录结构

node_modules/ package.json webpack.mix.js

webpack.mix.js 是你在webpack上层的配置文件，大部分时间你须要修改的是这个文件

首先看下 webpack.mix.js 文件

let mix = require('laravel-mix'); mix.js('src/app.js', 'dist') .sass('src/app.scss', 'dist') .setPublicPath('dist');

注意源文件的路径，而后建立匹配的目录结构(你也能够改为你喜欢的结构)。如今都准备好了，在命令行运行 node_modules/.bin/webpack 编译全部文件，而后你将会看到：

  • dist/app.css
  • dist/app.js
  • dist/mix-manifest.json(你的asset输出文件，稍后讨论)

干得漂亮！如今能够干活了。

 

NPM Scripts

把下面的npm脚本添加到你的 package.json 文件中能够加速你的工做操做.，laravel安装的时候已经包含了这个东西了

"scripts": { "dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }
 

laravel工做流程

咱们先回顾一下通用的工做流程以便你能在本身的项目上采用

1 . 安装laravel

laravel new my-app

2 . 安装Node依赖

npm install

3 . 配置 webpack.mix.js

这个文件全部前端资源编译的入口

let mix = require('laravel-mix'); mix.js('resources/assets/js/app.js', 'public/js'); mix.sass('resources/assets/sass/app.scss', 'public/css');

默认会启用 JavaScript ES2017 + 模块绑定，就行sass编译同样。

4 . 编译

用以下指令编译

node_modules/.bin/webpack

也可使用package.json 里的npm脚本：

npm run dev

而后会看到编译好的文件：

  • ./public/js/app.js
  • ./public/css/app.css

监视前端资源更改：

npm run watch

laravel自带了一个 ./resources/assets/js/components/Example.vue 文件，运行完成后会有一个系统通知。

5 . 更新视图

laravel自带一个欢迎页面，咱们能够用这个来作示例，修改一下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Laravel</title> <link rel="stylesheet" href="{{ mix('css/app.css') }}"> </head> <body> <div id="app"> <example></example> </div> <script src="{{ mix('js/app.js') }}"></script> </body> </html>

刷新页面，干得漂亮！

 

常见问题

 

laravel-mix必须在laravel下使用吗？

不，在laravel下使用使最好的，但也能够用在别的任何项目

 

个人代码没有压缩

只有在node环境变量为生产环境时才会被压缩，这样会加速编译过程，但在开发过程当中是没必要要的，下面是在生成环境下运行webpack的示例

export NODE_ENV=production && webpack --progress --hide-modules

强烈推荐你把下面的npm脚本添加到你的package.json文件中，注意laravel已经包括了这些了

"scripts": { "dev": "NODE_ENV=development webpack --progress --hide-modules", "watch": "NODE_ENV=development webpack --watch --progress --hide-modules", "hot": "NODE_ENV=development webpack-dev-server --inline --hot", "production": "NODE_ENV=production webpack --progress --hide-modules" },
 

我使用的是VM，webpack不能检测到个人文件变化

若是你在VM下执行 npm run dev，你会发现 webpack 并不能监视到你的文件改变。若是这样的话，有两种方式来解决这个

  1. 配置 webpack 检测文件系统的变化, 注意:检测文件系统是资源密集型操做而且很耗费电池的使用时长.
  2. 转发文件经过使用相似于 vagrant-fsnotify 之类的东西将通知发送给VM。注意，这是一个 只有 Vagrant 才有的插件。

检测 VM 文件系统变化, 修改一下你的 npm 脚本，使用 --watch-poll 和 --watch 标签，像这样：

"scripts": { "watch": "NODE_ENV=development webpack --watch --watch-poll", }

推送文件改动到 VM, 在主机安装 vagrant-fsnotify

vagrant plugin install vagrant-fsnotify

如今你能够配置 vargrant 来使用这个插件, 在 Homestead 中, 在你的 Homestead.yaml 文件相似于这样

folders: - map: /Users/jeffrey/Code/laravel to: /home/vagrant/Code/laravel options: fsnotify: true exclude: - node_modules - vendor

一旦你的 vagrant 机器启动, 只须要在主机上运行 vagrant fsnotify 把文件的改动推送到 vm 上, 而后在 vm 内部运行 npm run watch 就可以检测到文件的改动了.

若是你仍是有问题，去这儿溜达溜达吧。

 

为何在个人css文件里显示图片在node_modules里找不到

你可能用的是相对路径，可是在你的 resources/assets/sass/app.css 里并不存在：

body { background: url('../img/example.jpg'); }

当引用相对路径的时候，会根据当前文件的路径来搜索，一样的，webpack会首先搜索 `resources/assets/img/example.jpg ，若是找不到，会继续搜索文件位置，包括node_modules,若是还找不到，就报错：

ERROR Failed to compile with 1 errors This dependency was not found in node_modules:

有两个解决办法：

1 . 让 resources/assets/img/example.jpg 存在这个文件.

2 . 编译 css 的时候添加下面的选项，禁用css的url处理：

mix.sass('resources/assets/sass/app.scss', 'public/css') .options({ processCssUrls: false });

他对老项目特别有用，由于你的文件夹结构已经彻底建立好了。

 

我不想把mix-manifest.json文件放在项目根目录下

若是你没有使用 laravel，你的 mix-manifest.json 文件会被放到项目根目录下，若是你不喜欢的话，能够调用 mix.setPublicPath('dist/')，而后manifest文件就会被放到dist目录下。

 

怎样使用webpack自动加载模块

webpack 使用 ProvidePlugin 插件加载一些须要的模块，经常使用的一个例子就是加载 jQuery：

new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }); // in a module $('#item'); // <= just works jQuery('#item'); // <= just works // $ is automatically set to the exports of module "jquery"

当laravel-mix自动加载模块的时候(像上面说的那样)，你若是想禁用(传一个空对象)或者用你本身的模块覆盖它，能够调用 mix.autoload() 方法：

mix.autoload({ jquery: ['$', 'window.jQuery', 'jQuery'], // more than one moment: 'moment' // only one });
 

为何我看到一个 "Vue packages version mismatch"错误

若是, 更新你的依赖, 你有如下编译失败的信息

Module build failed: Error: Vue packages version mismatch: * vue@2.5.13 * vue-template-compiler@2.5.15

这意味着你的 vue 和 vue-template-compiler 依赖不一样步, 每个 Vue 的更新, 版本号必须是相同的. 更新来修复这个错误

npm update vue

// or npm install vue@2.5.15
 

排障

 

我在更新/安装 mix 时候出现错误

不幸的是，你的依赖项可能没有正确安装的缘由有无数个。一个常见的根本缘由是安装了老版本的Node(node -v) 和 npm (npm -v)。第一步，访问 http://nodejs.org 并更新它们。

不然，它一般与须要删除的错误锁文件有关。让这一系列命令尝试从头开始安装一切

rm -rf node_modules rm package-lock.json yarn.lock npm cache clear --force npm install
 

为何 webpack 不能找到个人 app.js 条目文件?

若是你遇到这样的失败信息……

These dependencies were not found: * /Users/you/Sites/folder/resources/assets/js/app.js

... 你可能使用 npm 5.2 (npm -v) 这个版本。这个版本引入了一个致使安装错误的错误。该问题已被在 npm 5.3 修复。请升级，而后从新安装

rm -rf node_modules rm package-lock.json yarn.lock npm cache clear --force npm install
 

API

 

Javascript

mix.js(src|[src], output)

简单的一行代码，larave mix能够执行不少重要的操做

  • ES2017+ 模块编译
  • 建立而且编译vue组件(经过 vue-loader)
  • 模块热替换(HMR)
  • Tree-shaking打包技术，webpack2里新增的(移除无用的库)
  • 提取和拆分 vendor 库(经过mix.extract()方法), 使长期缓存变的容易
  • 自动版本化(文件哈希)，经过 mix.version()
 

用法

let mix = require('laravel-mix'); // 1. A single src and output path. mix.js('src/app.js', 'dist/app.js'); // 2. For additional src files that should be // bundled together: mix.js([ 'src/app.js', 'src/another.js' ], 'dist/app.js'); // 3. For multiple entry/output points: mix.js('src/app.js', 'dist/') .js('src/forum.js', 'dist/');
 

laravel 示例

考虑到典型的laravel默认安装的时候会把入口定位在 ./resources/assets/js/app.js，因此咱们先准备一个 webpack.mix.js 把 app.js 编译到 ./public/js/app.js。

let mix = require('laravel-mix'); mix.js('resources/assets/js/app.js', 'public/js');

如今上面全部的项你均可以用了，只须要调用一个方法。

在命令行调用 npm run dev 执行编译。

 

Vue 组件

laravel mix 一应俱全，支持vue组件编译，若是你不使用vue的话，能够忽略这块。

单文件组件是vue最重要的特征。在一个文件里为一个组件定义模板，脚本，样式表。

./resources/assets/js/app.js

import Vue from 'vue'; import Notification from './components/Notification.vue'; new Vue({ el: '#app', components: { Notification } });

在上面，咱们导入了vue(首先你须要执行npm install vue --save-dev安装vue)，而后引入了一个叫 Notification的vue组件而且注册了 root vue 实例。

./resources/asset/js/components/Notification.vue

<template> <div class="notification"> {{ body }} </div> </template> <script> export default { data() { return { body: 'I am a notification.' } } } </script> <style> .notification { background: grey; } </style>

若是你了解vue，这些你都会很熟悉，继续。

./webpack.mix.js

let mix = require('laravel-mix'); mix.js('resources/assets/js/app.js', 'public/js');

执行 npm run dev 编译文件，这样就简单的建立了一个HTML文件，引入 ./js/app.js 文件，而后在浏览器里查看吧！

 

React 支持

laravel mix 也装载了基本的react支持，只要把mix.js()改为mix.react()而且使用相同的参数。在底层，mix会引用react须要的任何babel插件。

mix.react('resources/assets/js/app.jsx', 'public/js/app.js');

固然，你仍然须要使用npm安装react和reactDOM，不过要注意当心行事。

 

库代码分离

mix.js(src, output) .extract(['any', 'vendor', 'library']);

把全部的js都打包成一个文件会伴随着潜在的风险：每次更新项目中就算很小的一部分都须要破坏全部用户的缓存，这意味着你的第三方库须要从新被下载和缓存。这样很很差。

一个解决的办法是分离或者提取你的库文件。

  • 应用代码： app.js
  • vendor库： vendor.js
  • Manifest(webpack runtime): manifest.js
mix.extract(['vue', 'jquery']);

extract方法接受一个你想要从打包文件里提取出的库的数组，使用这个方法，Vue和jQuery的源代码都会被放在vendor.js里。若是在将来你须要对应用代码作一些微小的变更，并不会对大的vendor库产生影响，它们依然会留在长期缓存。

一旦执行webpack打包文件，你会发现三个新的文件，你能够在HTML页面引用它们。

<script src="/js/manifest.js"></script> <script src="/js/vendor.js"></script> <script src="/js/app.js"></script>

实际上，咱们付出了一些HTTP请求的代价（就是会多请求几回）来换取长期缓存的提高。

Manifest文件是什么

webpack编译的时候会有一些 run-time 代码协助其工做。若是没有使用 mix.extract()，这些代码你是看不到的，它会在打包文件里，然而，若是咱们分离了代码而且容许长期缓存，在某些地方就须要这些 run-time 代码，因此，mix会把它提取出来，这样一来，vendor 库和 manifest 文件都会被缓存很长时间。

 

浏览器自动刷新

mix.browserSync('my-site.test');

BrowserSync 能自动监控文件变更而且把你的变化通知浏览器, -- 彻底不须要手动刷新。你能够调用 mix.browserSync() 方法来开启这个功能：

mix.browserSync('my-domain.test'); // Or: // https://browsersync.io/docs/options/ mix.browserSync({ proxy: 'my-domain.test' })

参数能够传字符串(proxy)，也能够传对象(BrowserSync 设置)。你声明的域名做为 proxy 是很是重要的，Browsersync 将经过代理网址来输出到你的虚拟主机(webpack dev server).

其余选项能够从 Browsersync Documentation

如今, 启动 dev server (npm run watch), 并进行下一步操做吧.

 

模块热替换

laravel mix对模块热替换提供了无缝的支持。

模块热替换(或者叫热加载)，意思就是当 javascript 改变刷新页面的时候能够维持组件的状态，例如如今有一个计数器，按一下按钮，计数器会加1，想象一下你点了不少次而后修改一下组件的相关文件，浏览器会实时的反映出你所作出的更改而保持计数器不变，计数器不会被重置，这就是热加载的意义最在。

在laravel里的用法

Laravel 和 Laravel 一块儿工做, 来抽象出热加载的复杂性.

看一下 laravel 里的 package.json 文件，在 scripts 模块，你能够看到：

"scripts": { "dev": "cross-env NODE_ENV=development webpack --progress --hide-modules", "watch": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules", "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot", "production": "cross-env NODE_ENV=production webpack --progress --hide-modules" }

注意一下 hot 选项，这个地方就是你所须要的，在命令行执行npm run hot会启动一个node服务器而且监视你的bundle文件，接下来，在浏览器打开你的laravel应用，通常应该是 http://my-app.test。

在laravel应用里使用热加载很重要的一点是要保证全部的脚本资源引用的是前面启动的node服务器的url：http://localhost:8080，如今你能够手动更新你的HTML\Blade文件了:

<body> <div id="app">...</div> <script src="http://localhost:8080/js/bundle.js"></script> </body>

假设你有一些组件，尝试在浏览器里更改他们的状态，而后更新他们的模板文件，你能够看到浏览器会马上反应出你的更新，可是状态并无被改变。

可是，在开发部署环境下手动更新url会是一个负担，因此，laravel提供了一个mix()方法，他会动态的构建js或者样式表的引用，而后输出。上面的代码所以能够修改为：

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

调整以后，Laravel 将为你作这项工做。若是运行 npm run hot 以启用热重加载，则该函数将设置必要的 http://localhost:8080 做为 URL。相反，若是您使用 npm run dev 或 npm run pro，它将使用域名做为基准 url。

在Https 中使用
若是你在 HTTPS 链接上开发你的应用，你的热重加载脚本和样式也必须经过HTTPS服务。要实现这一点，能够将 -—https 标志添加到 package.json 中的热选项命令中。

"scripts": { "hot": "NODE_ENV=development webpack-dev-server --inline --hot --https", }

经过上面的设置，webpack-dev-server 将会生成一个自签名证书。若是你但愿使用本身的证书，可使用如下设置:

"hot": "NODE_ENV=development webpack-dev-server --inline --hot --https --key /path/to/server.key --cert /path/to/server.crt --cacert /path/to/ca.pem",

如今在你的 Html/Blade 文件中可使用

<script src="https://localhost:8080/js/bundle.js"></script>

或者

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

在spa里的用法

laravel mix包含了流行的 vue-loader 包，这意味着，若是是单页应用，你什么都不须要作，它是开箱即用的。

 

版本化

mix.js('src', 'output') .version([]);

为了帮滋长期缓存，Laravel Mix 提供了 mix.version() 方法，它支持文件散列。好比app.js?id=8e5c48eadbfdd5458ec6。这对清除缓存颇有用。假设你的服务器自动缓存了一年的脚本，以提升性能。这很好，可是，每当您对应用程序代码进行更改时，须要一些方法来告诉用户更新缓存, 这一般是经过使用查询字符串或文件哈希来完成的。

启用了版本控制以后，每次代码更改时，都会生成一个新的散列查询字符串文件。看如下webpack.mix.js 文件

编译后，你会在 mix-manifest.json 文件看到 /css/app.css?id=5ee7141a759a5fb7377a 和 /js/app.js?id=0441ad4f65d54589aea5。固然，你的特定散列将是惟一的。每当你调整 JavaScript 时，编译后的文件将会收到一个新的散列名称，这将有效地破坏缓存，一旦被推到生产环境中。

举个例子，试试 webpack --watch，而后修改一下你的 JavaScript。你将当即看到一个新生成的打包文件和样式表。

 

导入版本文件

这就引出了一个问题:若是名称不断变化，咱们如何将这些版本化的脚本和样式表包含到HTML中呢?是的，这很棘手。答案将取决于你构建的应用程序的类型。对于SPA，你能够动态地读取 Laravel Mix生成的 manifest.json 文件，提取资料文件名(这些名称将被更新，以反映新的版本文件)，而后生成HTML。

Laravel 用户

对于 Laravel 项目，一个解决方案是开箱即用的。只需调用全局 mix() 函数，就完成了!咱们将计算出导入的适当文件名。这里有一个例子:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>App</title> <link rel="stylesheet" href="{{ mix('css/app.css') }}"> </head> <body> <div id="app"> <h1>Hello World</h1> </div> <script src="{{ mix('js/app.js') }}"></script> </body> </html>

将未散列的文件路径传递给 mix() 函数，而后在后端，咱们将弄清楚应该导入哪一个脚本或样式表。请注意，你可能/应该使用这个函数，即便没有对文件进行版本控制。

 

版本化附加文件

mix.version() 将自动生成编译后的JavaScript、Sass/Less或合并文件。可是，若是你还但愿将额外的文件做为构建的一部分，简单地传递路径或路径数组，就像这样:

mix.version(['public/js/random.js']);

如今，咱们会版本化任何相关的编译文件，可是咱们还会附加一个查询字符串，public/js/random.js?{hash}，并更新 mix-manifest.json 文件。

 

Css 预处理器

mix.sass('src', 'output', pluginOptions); mix.standaloneSass('src', 'output', pluginOptions); // Isolated from Webpack build. mix.less('src', 'output', pluginOptions); mix.stylus('src', 'output', pluginOptions); mix.postCss('src', 'output', [ require('precss')() ])

一个单一的方法调用容许你编译你的 Sass，Less，或 Stylus 文件，同时自动应用 CSS3 前缀。

虽然 webpack 能够将全部CSS直接插入到绑定的JavaScript中，但Laravel Mix会自动执行必要的步骤，将其提取到你想要的输出路径中。

 

多构建

若是你须要编译多个顶级文件，你能够根据须要调用 mix.sass()(或任何一个预处理器变体). 对于每一个调用，webpack 将输出一个包含相关内容的新文件。

mix.sass('src/app.scss', 'dist/') // creates 'dist/app.css' .sass('src/forum.scss', 'dist/'); // creates 'dist/forum.css'
 

例子

让咱们看一个例子

webpack.mix.js

let mix = require('laravel-mix'); mix.sass('resources/assets/sass/app.sass', 'public/css');

./resources/assets/sass/app.sass

$primary: grey .app background: $primary

Tip : 对于 Sass 编译, 你可使用 .sass 和 .scss 语法

像往常同样运行 npm run webpack 进行编译. 你会发现 ./public/css/app.css 文件包含

.app { background: grey; }
 

插件选项

编译的时候, Laravel Mix 的首先是去分别的调用 Node-Sass, Less，和 Slylus 来编译你的 Sass, Less 文件。有时，你可能须要重写咱们传递给它们的默认选项。能够将它们做为第三个参数提供给 mix.sass(), mix.less() 和 mix.stylus()。

Stylus 插件
若是使用 Stylus, 你可能但愿安装额外的插件，好比 Rupture 。运行 npm install rupture 来安装这个插件，而后在你的 mix.stylus() 中调用, 例如:

mix.stylus('resources/assets/stylus/app.styl', 'public/css', { use: [ require('rupture')() ] });

若是但愿更深一步，而且在全局中自动导入插件，您可使用 import 选项。这里有一个例子:

mix.stylus('resources/assets/stylus/app.styl', 'public/css', { use: [ require('rupture')(), require('nib')(), require('jeet')() ], import: [ '~nib/index.styl', '~jeet/jeet.styl' ] });

就是这个样子滴!

 

CSS url() 重写

一个关键的 webpack 概念是，它将重写你的样式表中的任何 url()。虽然这可能最初听起来很奇怪，但它是一项很是强大的功能。

一个例子

假设咱们想要编译一些Sass，其中包含一个图像的相对url。

.example { background: url('../images/thing.png'); }

提示:url()的绝对路径将被排除在url重写以外。所以，url('/images/thing.png')或url('http://example.com/images/thing.png') 将不会被更改。

注意,这里说的是相对URL? 默认状况下，Laravel Mix 和 webpack 将会找到 thing.png ，将其复制到 public/images 文件夹中，而后在生成的样式表中重写 url()。所以，编译的CSS将是:

.example { background: url(/images/thing.png?d41d8cd98f00b204e9800998ecf8427e); }

这也是 webpack 的一个很酷的特性。然而，它确实有一种倾向，让那些不理解 webpack 和 css-loader 插件如何工做的人感到困惑。你的文件夹结构可能已是您想要的了，并且你但愿不要修改那些url()。若是是这样的话，咱们确实提供了一个覆盖方式:

mix.sass('src/app.scss', 'dist/') .options({ processCssUrls: false });

把这个加上你的 webpack.mix.js 文件中，咱们将再也不匹配 url() 或复制资源到你的公共目录。所以，编译后的CSS将与你输入时同样:

.example { background: url("../images/thing.png"); }

这样的好处是，当禁用url处理时，您的 Webpack, Sass 编译和提取能够更快地编译。

 

PostCSS 插件

默认状况下，Mix 将经过流行的 Autoprefixer PostCSS plugin 将全部的CSS文件链接起来。所以，你能够自由使用最新的CSS 3语法，并理解咱们将自动应用任何须要的浏览器前缀。在大多数状况下，默认设置应该就能够，可是，若是你须要调整底层的自动修复程序配置，那么以下所示:

mix.sass('resources/assets/sass/app.scss', 'public/css') .options({ autoprefixer: { options: { browsers: [ 'last 6 versions', ] } } });

另外，若是你想彻底禁用它——或者依赖一个已经包含 自动前缀的PostCSS插件:

mix.sass('resources/assets/sass/app.scss', 'public/css') .options({ autoprefixer: false });

可是，你可能想要在构建中应用额外的PostCSS插件。木问题, 只需在NPM中安装所需的插件，而后在 webpack.mix.js 文件中引用,以下所示:

mix.sass('resources/assets/sass/app.scss', 'public/css') .options({ postCss: [ require("postcss-custom-properties") ] });

完成了!如今可使用和编译自定义CSS属性(若是这是您的东西)。例如,若是 resources/assets/sass/app.scss 包含…

:root { --some-color: red; } .example { color: var(--some-color); }

编译完成将会是

.example { color: red; }
 

PostCss 不适用 Sass/Less

或者，若是你更喜欢跳过 Sass/Less/Stylus 编译步骤，而是使用 PostCSS，你能够经过mix.postCss() 方法来完成。

mix.postCss('resources/assets/css/main.css', 'public/css', [ require('precss')() ]);

请注意，第三个参数是应该应用于你构建的 postcss 插件的数组。

 

独立Sass构建

若是你不但愿 Mix 和 Webpack 以任何方式处理你的 Sass 文件，你可使用mix.standaloneSass()，这将大大改善你应用程序的构建时间。请记住:若是你选择了这条路线，Webpack 不会触及你的 CSS。它不会重写 url，复制资源(经过 file-loader)，或者应用自动图像优化或CSS清理。若是这些特性对于你的应用程序来讲是没有必要的，那么必定要使用这个选项而不是mix.sass()。

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

注意:若是你正在使用 standaloneSass，在使用 npm run watch 进行文件更改时，你将须要使用下划线来前缀导入的文件，以将它们标记为依赖文件(例如，_header.scss _alert.scss)。若是不这样作，将致使Sass编译错误和/或额外的CSS文件。

 

文件复制

mix.copy(from, to); mix.copy('from/regex/**/*.txt', to); mix.copy([path1, path2], to); mix.copyDirectory(fromDir, toDir);

有时, 你须要复制一个或者多个文件做为构建过程的一部分。没有问题, 这是小事一桩。使用mix.copy() 方法指定源文件或文件夹，而后指定您想要的目标文件夹/文件

mix.copy('node_modules/vendor/acme.txt', 'public/js/acme.txt');

在编译时，'acme' 文件将被复制到 'public/js/acme.txt'。这是一个常见的用例，当你但愿将一组字体经过 NPM 安装到 public 目录时。

 

系统通知

默认状况下，Laravel Mix将显示每一个编译的系统通知。这样，你就能够快速查看是否有须要查询的错误。可是，在某些状况下，这是不可取的(例如在生产服务器上编译)。若是发生这种状况，它们能够从你的 webpack.mix.js 文件中禁用。

mix.js(src, output) .disableNotifications();
 

文件组合和最小化

mix.combine(['src', 'files'], 'destination'); mix.babel(['src', 'files'], destination); mix.minify('src'); mix.minify(['src']);

若是使用得当，Laravel Mix 和 webpack 应该负责全部必要的模块捆绑和最小化。可是，你可能有一些遗留代码或第三方库须要链接和最小化, 这并非一个问题。

 

组合文件

考虑下面的代码片断:

mix.combine(['one.js', 'two.js'], 'merged.js');

这天然会合并 one.js 和 two.js 到一个单独的文件，叫作 merged.js。与往常同样，在开发期间，合并文件将保持未压缩状态。可是，对于生产(export NODE_ENV=production)，这个命令将会最小化 merged.js。

组合文件与Babel编译。

若是须要组合 使用 ES2015 方法编写的JavaScript文件，你能够更新的 mix.combine() 调用 mix.babel()。方法签名相同。惟一的区别是，在将文件组合起来以后，Laravel Mix将对结果进行Babel编译，从而将代码转换成全部浏览器都能理解的JavaScript代码。

mix.babel(['one.js', 'two.js'], 'merged.js');
 

最小化文件

一样，你也可使用 mix.minify() 命令缩小一个或多个文件。

mix.minify('path/to/file.js'); mix.minify(['this/one.js', 'and/this/one.js']);

这里有一些值得注意的事情:

  • 该方法将建立一个额外的 *.min.ext 文件。所以，压缩 app.js 将生成 app.min.js。
  • 再一次声明，压缩只会在生产过程当中发生。(export NODE_ENV=production)。
  • 不须要调用 mix.combine(['one.js', 'two.js'], 'merged.js').minify('merged.js'); ，只使用单一的 mix.combine() 调用。它会兼顾二者。

    重要:请注意，压缩只适用于CSS和JavaScript文件。minifier不理解任何其余提供的文件类型。

 

自动加载

mix.autoload({ jquery: ['$', 'window.jQuery'] });

Webpack提供了必要的功能，能够在 Webpack 所要求的每一个模块中把一个模块做为变量。若是你使用的是一个特定的插件或库，它依赖于一个全局变量，例如jQuery, mix.autoload() 可能会对你有用。

考虑下面的例子:

mix.autoload({ jquery: ['$', 'window.jQuery'] });

该代码片断指定 webpack 应该将 var $ = require('jquery') 添加到它所遇到的全局$标识符或 window.jQuery 中。漂亮!

 

事件钩子

mix.then(function () {});

你可能须要监听每次 webpack 完成编译的事件。也许你须要手动应用一些适合你的应用程序的逻辑。若是是这样，您可使用 mix.then() 方法来注册任何回调函数。这里有一个例子:

mix.js('resources/assets/js/app.js', 'public/js') .then(() => { console.log('webpack has finished building!'); });

回调函数将经过 webpack Stats 对象，容许对所执行的编译进行检查:

mix.js('resources/assets/js/app.js', 'public/js') .then((stats) => { // array of all asset paths output by webpack console.log(Object.keys(stats.compilation.assets)); });

能够在这里找到Stats对象的官方文档 : https://github.com/webpack/docs/wiki/node.js-api#stats

 

快速 webpack 配置

mix.webpackConfig({} || cb);

固然，你能够自由编辑提供的 webpack.config.js 文件，在某些设置中，更容易直接从你的 webpack.mix.js 修改或覆盖默认设置。对于Laravel应用来讲尤为如此，默认状况下是在项目根文件夹中没有 webpack.config.js。

例如，你可能但愿添加一个由webpack自动加载的模块的自定义数组。在这个场景中，您有两个选项:

  • 根据须要编辑你的 webpack.config.js 文件
  • 在你的 webpack.mix.js 中调用 mix.webpackConfig() 文件，并传递重写参数。而后混合将进行一个深度合并。
    下面，做为一个示例，咱们将为 Laravel Spark 添加一个自定义模块路径。
mix.webpackConfig({ resolve: { modules: [ 'node_modules', path.resolve(__dirname, 'vendor/laravel/spark/resources/assets/js') ] } });
 

使用回调函数

当传递回调函数时，你能够访问webpack及其全部属性。

mix.webpackConfig(webpack => { return { plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', }) ] }; });
 

扩展 Mix

基于组件的系统 Mix 使用场景构建它的API，你也能够访问—是否为你的项目扩展Mix，或者做为一个可重用的包分发到世界。

 

例子

// webpack.mix.js; let mix = require('laravel-mix'); mix.extend('foo', function(webpackConfig, ...args) { console.log(webpackConfig); // the compiled webpack configuration object. console.log(args); // the values passed to mix.foo(); - ['some-value'] }); mix.js('src', 'output').foo('some-value');

在上面的示例中，咱们能够看到 mix.extend() 接受两个参数:在定义组件时应该使用的名称，以及一个回调函数或类，这些函数注册并组织必要的webpack逻辑。在后台，一旦构建了底层webpack配置对象，Mix将触发这个回调函数。这将给你一个机会来插入或覆盖任何须要的设置。

虽然简单的回调函数可能对快速扩展颇有用，但在大多数状况下，您可能但愿构建一个完整的组件类，好比:

mix.extend( 'foo', new class { register(val) { console.log('mix.foo() was called with ' + val); } dependencies() {} webpackRules() {} webpackPlugins() {} // ... }() );

在扩展 Mix 时，一般须要触发一些指令:

  • 安装这些依赖关系。
  • 将此规则/加载程序添加到 webpack 中。
  • 包含这个webpack插件。
  • 彻底覆盖webpack配置的这一部分。
  • 将此配置添加到Babel。
  • 等。

这些操做中的任何一个都是带有 Mix 组件系统有联系。

组件的接口

  • name:当调用组件时，应该使用什么做为方法名。(默认为类名。)
  • dependencies:列出应该由Mix安装的全部npm依赖项。
  • register:当您的组件被调用时，全部的用户参数将当即被传递给这个方法。
  • boot:启动组件。这个方法是在用户的webpack.mix以后触发的。js文件已经加载完毕。
  • webpackEntry:附加到主混合webpack入口对象。
  • webpackRules:与主webpack加载器合并的规则。
  • webpackplugin:与主webpack配置合并的插件。
  • webpackConfig:覆盖生成的webpack配置。
  • babelConfig:额外的Babel配置应该与Mix的默认值合并。

这里有一个示例/虚拟组件，它可让你更好地了解如何构建本身的组件。更多的例子，请参考在后台Mix 使用的组件。

class Example { /** * The optional name to be used when called by Mix. * Defaults to the class name, lowercased. * * Ex: mix.example(); * * @return {String|Array} */ name() { // Example: // return 'example'; // return ['example', 'alias']; } /** * All dependencies that should be installed by Mix. * * @return {Array} */ dependencies() { // Example: // return ['typeScript', 'ts']; } /** * Register the component. * * When your component is called, all user parameters * will be passed to this method. * * Ex: register(src, output) {} * Ex: mix.yourPlugin('src/path', 'output/path'); * * @param {*} ...params * @return {void} * */ register() { // Example: // this.config = { proxy: arg }; } /** * Boot the component. This method is triggered after the * user's webpack.mix.js file has executed. */ boot() { // Example: // if (Config.options.foo) {} } /** * Append to the master Mix webpack entry object. * * @param {Entry} entry * @return {void} */ webpackEntry(entry) { // Example: // entry.add('foo', 'bar'); } /** * Rules to be merged with the master webpack loaders. * * @return {Array|Object} */ webpackRules() { // Example: // return { // test: /\.less$/, // loaders: ['...'] // }); } /* * Plugins to be merged with the master webpack config. * * @return {Array|Object} */ webpackPlugins() { // Example: // return new webpack.ProvidePlugin(this.aliases); } /** * Override the generated webpack configuration. * * @param {Object} webpackConfig * @return {void} */ webpackConfig(webpackConfig) { // Example: // webpackConfig.resolve.extensions.push('.ts', '.tsx'); } /** * Babel config to be merged with Mix's defaults. * * @return {Object} */ babelConfig() { // Example: // return { presets: ['react'] }; }

请注意，上面示例中的每一个方法都是可选的。在某些状况下，您的组件可能只须要添加一个webpack加载程序和/或调整混合使用的Babel配置。没有问题的话省略其他的接口。

class Example { webpackRules() { return { test: /\.test$/, loaders: [] }; } }

如今，当 Mix 构造底层 webpack 配置时，你的规则将包含在生成的webpackConfig.module.rules 数组中。

 

使用

一旦你构建或安装了想要的组件，只需从 webpack.mix.js 中获取它便可，你都准备好了。

// foo-component.js let mix = require('laravel-mix'); class Example { webpackRules() { return { test: /\.test$/, loaders: [] }; } } mix.extend('foo', new Example());
// webpack.mix.js let mix = require('laravel-mix'); require('./foo-component'); mix .js('src', 'output') .sass('src', 'output') .foo();
 

自定义方法

 

LiveReload

当Laravel Mix 与 Browsersync 已经支持了开箱即用，你可能更喜欢使用LiveReload, 当检测到修改时，LiveReload能够自动监视您的文件并刷新页面。

 

安装 webpack-livereload-plugin

npm install webpack-livereload-plugin@1 --save-dev
 

配置 webpack.mix.js

将如下几行添加到 webpack.mix.js 底部。

var LiveReloadPlugin = require('webpack-livereload-plugin'); mix.webpackConfig({ plugins: [ new LiveReloadPlugin() ] });

虽然 LiveReload 有她很好用的默认值，可是这里能够查看一个可用的插件选项列表。

 

安装 LiveReload.js

最后，咱们须要安装LiveReload.js。您能够经过 LiveReload Chrome 插件，或者在你的主要站点模板的关闭

 

 

https://laravel-china.org/articles/12523/translated-laravel-mix-chinese-document

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程