laravel mix は、フロントエンドタスクの管理に使用されます。ワークフローモードを使用して、指定されたタスクを順番に実行できるフロントエンドタスク自動(dòng)化管理ツールです。Mix は、シンプルでスムーズな API を提供しますを使用すると、開発者は Laravel アプリケーションの Webpack コンパイル タスクを定義して、フロントエンド リソースを簡(jiǎn)単に管理できます。

このチュートリアルの動(dòng)作環(huán)境: Windows 7 システム、Laravel 6 バージョン、DELL G3 コンピューター。

laravel mixとは何ですか?用途は何ですか?

Laravel Mix は、ワークフロー モデルを使用して指定されたタスクを順番に実行するフロントエンド タスク自動(dòng)化管理ツールです。 Mix は、Laravel アプリケーションの Webpack コンパイル タスクを定義できるシンプルでスムーズな API を提供します。 Mix は多くの一般的な CSS および JavaScript プリプロセッサをサポートしており、単純な呼び出しでフロントエンド リソースを簡(jiǎn)単に管理できます。

デフォルトのファイルとフォルダー構(gòu)造

デフォルトの Sass ファイルは resources/assets/sass/app.scss にあります (ファイルの內(nèi)容)は完全に同じです)、デフォルトの JS ファイルは resources/assets/js/app.js にあります (ファイルはまったく同じであるため、Vue のインフラストラクチャについて詳しく知りたい場(chǎng)合は、 5.3 では、Matt Stauffer が 5.3 この投稿のフロントエンド構(gòu)造を作成したことを確認(rèn)できます)。

app.js で參照されているブートストラップ ファイル ( resources/assets/js/bootstrap.js ) を詳しく調(diào)べると、設(shè)定に Vue-Resource の代わりに Axios を使用していることがわかります。 up X-CSRF-TOKEN (Vue-Resource は 2016 以降機(jī)能しなくなります)。

Mix プロジェクトで npm run dev を?qū)g行すると、次のことがわかります:

デフォルトでは、次の場(chǎng)所が生成されます。ファイルは Elixir と同じです: public/css/app.css および public/js/app.js。

主なミックス方法

ご覧のとおり、Mix は Sass と JS で簡(jiǎn)単に使用できます。 Sass は明らかに Sass ファイルを?qū)g行し、それを CSS として出力します。 JS メソッドを使用して、ECMAScript 2015 構(gòu)文のサポート、.vue ファイルのコンパイル、実稼働用のコードの縮小、および JavaScript ファイルのその他の処理を?qū)g行します。

.less メソッドを使用して、Less を CSS にコンパイルすることもできます。

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

combine メソッドを使用して、 Together でファイルを結(jié)合します:

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

copy でファイルまたはディレクトリをコピーします:

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 とは異なり、ソース マップはデフォルトでオフになっており、 で使用できます。 webpack.mix .js で次のメソッドを呼び出して有効にします:

mix.sourceMaps();

デフォルトでは、Mix はシステム通知の形式でコンパイル結(jié)果を通知します。 、disableNotifications() メソッドを無効にすることができます。

Mix.manifest.json とキャッシュのクリア

Elixir に詳しい人は、上記の出力イメージが Elixir とは少し異なることに気づくかもしれません。 Mix は、すぐに使えるマニフェスト ファイル public/mix-manifest.json を生成しています。もちろん、Elixir はマニフェスト ファイル public/build/rev-manifest.json も生成しますが、Mix の直接の製品とは異なり、キャッシュ クリア (バージョン管理) 機(jī)能が有効であると判斷した場(chǎng)合にのみマニフェスト ファイルを生成します。

これらのマニフェスト ファイルは、フロントエンド ファイルをフロントエンド ファイルのバージョン管理されたコピーにマップするために使用されます (例: /js/app.js および /js/app-) 86ff5d31a2. js 間のマッピング。このファイルを使用すると、HTML で単純な參照を使用して、參照されるバージョン管理されたファイルを指すことができます。たとえば、 <script src="%7B%7B%20mix('js/app.js')%20%7D%7D"></script> となります。

Elixir とは異なり、キャッシュ クリアを使用しない場(chǎng)合でも、Mix はこのファイルを生成しますが、これは単なるガイド マップです:

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

以前に Elixir を使用したことのあるユーザーには、別の興味深い変更: ビルド ファイルは別のビルド ディレクトリではなく、通常の出力ディレクトリに配置されるようになりました。そのため、バージョン管理された JS ファイルは public/js/app-86ff5d31a2.js に表示されます。

Mix でキャッシュ無効化を有効にするには、.version() を Mix ファイルに追加するだけです:

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

これは、実際のファイル名を渡すよりもはるかに簡(jiǎn)単です。エリクサー。

mix() ヘルプ

上で述べたように、リソースを參照するには elixir() の代わりに mix() を使用しますが、これはまったく同じように機(jī)能します。ただし、1 つあります。Mix を使用する場(chǎng)合は、Laravel テンプレート內(nèi)のこれらのデフォルトの參照行を削除する必要があります:

<link>
...
<script></script>

これらを次の方法で置き換えます:

<link>
...
<script></script>

この関數(shù)は## のみ #mix-manifest.json で文字列を検索し、マップされたビルド ファイルを返します。キャッシュをクリアするときに、デフォルト ファイルのロード方法を確実に認(rèn)識(shí)するために使用されます。

代碼拆分

Webpack 是對(duì)許多人來說很令人興奮的部分，因?yàn)樗峁┝耸勾a結(jié)構(gòu)化的智能能力。我還沒能完全弄明白 webpack 的所有功能，Mix 也沒把所有功能都打包支持，例如：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></script>
<script></script>
<script></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ù)制粘貼來的~ 你真的有興趣就自己去了解哈~）

順便一提

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

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

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

但是在閱讀源代碼后，我發(fā)現(xiàn) NODE_ENV 不是主要的檢查。相反，是用了一個(gè)帶有 inProduction ?標(biāo)志的配置對(duì)象去做這件事情。 這個(gè)文檔里沒有寫，因此請(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 ?來引用的，你可以刪除 app.js ?和 package.json ?中的引用，并重新運(yùn)行 npm install ，當(dāng)然刪除引用并不會(huì)刪除源文件。

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

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

• jQuery

• Lodash（ 比 Underscore 更好）

• Vue 2

小結(jié)

Laravel Mix 是一個(gè)代替 Laravel Elixir 的構(gòu)建工具。 具有與 Elixir 幾乎相同的API，卻是基于 Webpack 而不是 Gulp。? ? ? ? ? ? ?

【相關(guān)推薦：laravel視頻教程】

以上がlaravel mixは何に使用されますか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。