laravel mixは何に使用されますか?-Laravel-php.cn

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

laravel mixは何に使用されますか?

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

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

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

デフォルトのファイルとフォルダー構造

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

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

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

laravel mixは何に使用されますか?

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

主なミックス方法

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

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

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

ログイン後にコピー

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

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 はシステム通知の形式でコンパイル結果を通知します。、disableNotifications() メソッドを無効にすることができます。

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

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

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

Elixir とは異なり、キャッシュクリアを使用しない場合でも、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();

ログイン後にコピー

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

mix() ヘルプ

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

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

ログイン後にコピー

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

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

ログイン後にコピー

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

代码拆分

Webpack 是对许多人来说很令人兴奋的部分，因为它提供了使代码结构化的智能能力。我还没能完全弄明白 webpack 的所有功能，Mix 也没把所有功能都打包支持，例如：tree-shaking。但它确实使你的自定义代码（它可能会经常更改）与你的供应商代码（这不应该）区分，使得用户在每次推送新版本时刷新所有供应商代码的可能性更小。

要利用这个特性，你需要使用 extract() 函数，它将你定义一个给定的库或者模块集合提取到一个单独的构建文件名为 vendor.js：

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

ログイン後にコピー

在这种情况下，Mix 生成了三个文件：public/js/app.js 、public/js/vendor.js 和第三个 Webpack 特定文件 public/js/manifest.js。为了运行顺利，得按照以下的顺序引入这三个文件：

<script></script>
<script></script>
<script></script>

ログイン後にコピー

如果清除了缓存，并且更改了应用自定义的代码， vendor.js 文件仍会缓存，也只有应用自定义的代码才会被清除缓存，这样你的网站会加载得更快。

自定义 Webpack 配置

如果你有兴趣添加自己的自定义 Webpack 配置，只需要传递你的 Webpack 配置：

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

ログイン後にコピー

（上面这个例子只是从文档复制粘贴来的~ 你真的有兴趣就自己去了解哈~）

顺便一提

说点有趣的东西吧，我想这或许能在 Webpack 文件中加点什么。如果你想只在生产环境下复制点什么，你怎么会这样做？

会这么问是因为我发现在 Node 环境对象中，我们可以用 process.env 去访问。可以检查任何值，包括系统上的任何全局环境变量。这个发现可能可以让我们去做点其他有趣的事情，比如说有条件地检查 process.env.NODE_ENV 中的值：

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

ログイン後にコピー

但是在阅读源代码后，我发现 NODE_ENV 不是主要的检查。相反，是用了一个带有 inProduction 标志的配置对象去做这件事情。这个文档里没有写，因此请谨慎使用，但你可以更新 Webpack 文件顶部的导入，然后使用该配置对象：

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

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

ログイン後にコピー

默认依赖关系

你可以查看 package.json 并查看每个项目包含的依赖项列表。记住，这些是由默认的 app.js 和 bootstrap.js 来引用的，你可以删除 app.js 和 package.json 中的引用，并重新运行 npm install ，当然删除引用并不会删除源文件。