laravel mix的作用是什么

這篇文章主要介紹“l(fā)aravel mix的作用是什么”，在日常操作中，相信很多人在laravel mix的作用是什么問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”laravel mix的作用是什么”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

laravel mix用于管理前端任務(wù)，它是一款前端任務(wù)自動(dòng)化管理工具，可使用工作流的模式對(duì)制定好的任務(wù)依次執(zhí)行；Mix提供了簡(jiǎn)潔流暢的API，讓開(kāi)發(fā)者能夠?yàn)長(zhǎng)aravel應(yīng)用定義Webpack編譯任務(wù)，可以輕松地管理前端資源。

laravel mix是什么？有什么用？

Laravel Mix 一款前端任務(wù)自動(dòng)化管理工具，使用了工作流的模式對(duì)制定好的任務(wù)依次執(zhí)行。Mix 提供了簡(jiǎn)潔流暢的 API，讓你能夠?yàn)槟愕?Laravel 應(yīng)用定義 Webpack 編譯任務(wù)。Mix 支持許多常見(jiàn)的 CSS 與 JavaScript 預(yù)處理器，通過(guò)簡(jiǎn)單的調(diào)用，你可以輕松地管理前端資源。

默認(rèn)文件和文件夾結(jié)構(gòu)

默認(rèn) Sass 文件在 resources/assets/sass/app.scss  中（文件的內(nèi)容是完全一樣的），而默認(rèn)的 JS 文件在 resources/assets/js/app.js（因?yàn)槲募峭耆嗤?，所以想要學(xué)習(xí)更多關(guān)于 Vue 在 5.3 中的基礎(chǔ)結(jié)構(gòu)，可以查看 Matt Stauffer 寫(xiě)的 5.3 的前端結(jié)構(gòu) 這一帖子）。

如果你深入到 app.js 中引用的 bootstrap 文件（ resources/assets/js/bootstrap.js ），你會(huì)看到我們使用Axios 而不是 Vue-Resource 來(lái)設(shè)置 X-CSRF-TOKEN（ Vue-Resource 在 2016 年之后將不再工作）。

如果你在 Mix 的項(xiàng)目上運(yùn)行 npm run dev，可以看到：

默認(rèn)情況下，我們生成的文件的位置與 Elixir 相同：public/css/app.css  和 public/js/app.js 。

主要 Mix 方法

正如你所見(jiàn)，你可以輕松的使用 Mix 處理 Sass 和 JS。Sass，顯而易見(jiàn)，運(yùn)行 Sass 文件，并將其輸出為 CSS。用  JS 方法支持 ECMAScript 2015 語(yǔ)法、編譯 .vue 文件、針對(duì)生產(chǎn)環(huán)境壓縮代碼以及對(duì) JavaScript 文件進(jìn)行其他處理。

還可以用 .less 方法將 Less 編譯為 CSS：

mix.less('resources/assets/less/app.less', 'public/css');

用 combine 方法將文件組合在一起：

mix.combine([
    'public/css/vendor/jquery-ui-one-thing.css',
    'public/css/vendor/jquery-ui-another-thing.css'
], 'public/css/vendor.css');

用 copy 復(fù)制文件或目錄：

mix.copy('node_modules/jquery-ui/some-theme-thing.css', 'public/css/some-jquery-ui-theme-thing.css');
mix.copy('node_modules/jquery-ui/css', 'public/css/jquery-ui');

與 Elixir 不同，Source Maps 默認(rèn)情況下是關(guān)閉的，可以在 webpack.mix.js 中調(diào)用以下方法來(lái)開(kāi)啟：

mix.sourceMaps();

默認(rèn)情況下 Mix 會(huì)以系統(tǒng)通知的方式告知你編譯結(jié)果，如果不希望它們運(yùn)行，可以使用 disableNotifications() 方法禁用。

Mix.manifest.json  和 緩存清除

熟悉 Elixir 的人可能會(huì)注意到上面的輸出圖像有一點(diǎn)與 Elixir 不同：Mix 正在生成一個(gè)開(kāi)箱即用的清單文件 public/mix-manifest.json。 當(dāng)然，Elixir 也會(huì)生成清單文件：public/build/rev-manifest.json，與 Mix 直接生產(chǎn)不同，它只會(huì)在確定啟用了緩存清除（版本控制）的功能時(shí)生成它。

這些清單文件是用來(lái)映射前端文件與已經(jīng)版本化處理的前端文件副本，例如： /js/app.js 與 /js/app-86ff5d31a2.js 之間的映射。有了這個(gè)文件就可以在 HTLM 用簡(jiǎn)單的引用指向該引用的版本化文件。例如 <script src ="{{ mix('js/app.js') }}"> 。

不像 Elixir，即使你不使用緩存清除，Mix 都會(huì)生成這個(gè)文件，但它也僅僅只是一個(gè)導(dǎo)向地圖：

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

對(duì)于以前使用 Elixir 的用戶來(lái)說(shuō)，另一個(gè)有趣的變化是：你的構(gòu)建文件現(xiàn)在最終在正常的輸出目錄，而不是單獨(dú)的構(gòu)建目錄，所以你版本化的 JS 文件，將出現(xiàn)在 public/js/app-86ff5d31a2.js。

要在 Mix 中啟用緩存清除，只需在 Mix 文件中附加 .version()：

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

這比傳遞實(shí)際文件名要簡(jiǎn)單得多，就像在 Elixir 中一樣。

mix() 幫助

正如上面提到的，你要使用 mix() 來(lái)代替 elixir() 引用你的資源，運(yùn)行方式完全相同。 但是有一點(diǎn)，用 Mix 的話，要?jiǎng)h除 Laravel 模板中默認(rèn)的這些引用行：

<link href="/css/app.css" rel="stylesheet">
...
<script src="/js/app.js"></script>

用下面這種方式替換它們：

<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
...
<script src="{{ mix('/js/app.js') }}"></script>

記住，這個(gè)函數(shù)只是在 mix-manifest.json  中查找字符串并返回映射的構(gòu)建文件。用來(lái)保證當(dāng)你清除了緩存時(shí)，它懂得去加載默認(rèn)的那個(gè)文件。

代碼拆分

Webpack 是對(duì)許多人來(lái)說(shuō)很令人興奮的部分，因?yàn)樗峁┝耸勾a結(jié)構(gòu)化的智能能力。我還沒(méi)能完全弄明白 webpack 的所有功能，Mix 也沒(méi)把所有功能都打包支持，例如：tree-shaking。但它確實(shí)使你的自定義代碼（它可能會(huì)經(jīng)常更改）與你的供應(yīng)商代碼（這不應(yīng)該）區(qū)分，使得用戶在每次推送新版本時(shí)刷新所有供應(yīng)商代碼的可能性更小。

要利用這個(gè)特性，你需要使用 extract() 函數(shù)，它將你定義一個(gè)給定的庫(kù)或者模塊集合提取到一個(gè)單獨(dú)的構(gòu)建文件名為 vendor.js：

mix.js('resources/assets/js/app.js', 'public/js')
    .extract(['vue', 'jquery']);

在這種情況下，Mix 生成了三個(gè)文件：public/js/app.js 、public/js/vendor.js  和第三個(gè) Webpack 特定文件 public/js/manifest.js。 為了運(yùn)行順利，得按照以下的順序引入這三個(gè)文件：

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

如果清除了緩存，并且更改了應(yīng)用自定義的代碼， vendor.js  文件仍會(huì)緩存，也只有應(yīng)用自定義的代碼才會(huì)被清除緩存，這樣你的網(wǎng)站會(huì)加載得更快。

自定義 Webpack 配置

如果你有興趣添加自己的自定義 Webpack 配置，只需要傳遞你的 Webpack 配置：

mix.webpackConfig({
    resolve: {
        modules: [
            path.resolve(__dirname, 'vendor/laravel/spark/resources/assets/js')
        ]
    }
});

（上面這個(gè)例子只是從文檔復(fù)制粘貼來(lái)的~ 你真的有興趣就自己去了解哈~）

順便一提

說(shuō)點(diǎn)有趣的東西吧，我想這或許能在 Webpack 文件中加點(diǎn)什么。 如果你想只在生產(chǎn)環(huán)境下復(fù)制點(diǎn)什么，你怎么會(huì)這樣做？

會(huì)這么問(wèn)是因?yàn)槲野l(fā)現(xiàn)在 Node 環(huán)境對(duì)象中，我們可以用 process.env 去訪問(wèn)?？梢詸z查任何值，包括系統(tǒng)上的任何全局環(huán)境變量。這個(gè)發(fā)現(xiàn)可能可以讓我們?nèi)プ鳇c(diǎn)其他有趣的事情，比如說(shuō)有條件地檢查 process.env.NODE_ENV  中的值：

if (process.env.NODE_ENV == 'production') {
    mix.webpackConfig({ ... });
}

但是在閱讀源代碼后，我發(fā)現(xiàn) NODE_ENV 不是主要的檢查。相反，是用了一個(gè)帶有 inProduction  標(biāo)志的配置對(duì)象去做這件事情。 這個(gè)文檔里沒(méi)有寫(xiě)，因此請(qǐng)謹(jǐn)慎使用，但你可以更新 Webpack 文件頂部的導(dǎo)入，然后使用該配置對(duì)象：

const { mix, config } = require('laravel-mix');

if (config.inProduction) {
    mix.webpackConfig({ ... });    
}

默認(rèn)依賴關(guān)系

你可以查看 package.json  并查看每個(gè)項(xiàng)目包含的依賴項(xiàng)列表。 記住，這些是由默認(rèn)的 app.js 和 bootstrap.js  來(lái)引用的，你可以刪除 app.js  和 package.json  中的引用，并重新運(yùn)行 npm install ，當(dāng)然刪除引用并不會(huì)刪除源文件。

• Axios（一個(gè)簡(jiǎn)單且漂亮的 HTTP 客戶端）

• Bootstrap Sass（由默認(rèn)的 app.scss  文件來(lái)引入 Bootstrap 樣式）

• jQuery

• Lodash（ 比 Underscore 更好）

• Vue 2

到此，關(guān)于“l(fā)aravel mix的作用是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！