资产编译（混合）

• Introduction
• Requirements
• 注册一个包
  • 自动注册
  • 注册插件包
  • 注册主题包
• 混合配置
• Examples
  • 顺风 CSS
  • 浏览器
• Commands
  • 安装节点依赖
  • 更新节点依赖
  • 列出已注册的 Mix 包
  • 编译一个 Mix 包
  • 观看混合包
  • 运行打包脚本

#Introduction

Winter 为通过 Mix 命令处理前端资产的基于节点的编译提供了一流的支持。命令使用混合 wrapper，一个用户友好且简单的界面，用于通过 Webpack 和各种库设置多种类型的前端资产的编译。

#Requirements

要利用 Mix 资产编译，您必须在开发环境中安装 Node 和 Node 包管理器 (NPM)。这将取决于您的操作系统 - 请查看下载 Node.js 有关安装 Node.js 的更多信息的页面。

混合 也应该出现在package.json 任何将使用它的包的文件（无论是在dependencies 或devDependencies) 但如果在项目的package.json 文件，然后可以选择在运行时自动添加它mix:install 命令。

#注册一个包

通过 Mix 注册资产编译非常简单。大多数情况下，自动注册应该可以满足您的需求，如果不能，也有多种方法可以手动注册 Mix 包。

#自动注册

默认情况下，Winter 将扫描所有可用和启用的模块、插件和主题以查找是否存在winter.mix.js 每个扩展的根文件夹下的文件（即modules/system/winter.mix.js,plugins/myauthor/myplugin/winter.mix.js， 或者themes/mytheme/winter.mix.js).

如果winter.mix.js 找到文件后，它将自动注册为具有自动生成的包名称的包，并在运行 Mix 命令时显示。大多数时候，这应该是您在 Winter CMS 中开始使用 Laravel Mix 资产编译所需要做的全部工作。

#注册插件

要在你的插件中注册要通过 Mix 编译的前端资产，只需返回一个数组，其中包名称作为键，相对于插件目录的包路径作为值从你的注册Plugin.php 注册文件的registerMixPackages() 方法。请参见下面的示例。

public function registerMixPackages()
{
    return [
        'custom-package-name' => 'assets/js/build.mix.js',
    ];
}

#注册主题

主题资产编译的注册更容易，可以通过添加一个mix 对你的定义主题信息文件 (theme.yaml).

name: "Winter CMS Demo"
description: "Demonstrates the basic concepts of the frontend theming."
author: "Winter CMS"
homepage: "https://wintercms.com"
code: "demo"

mix:
    <name of package>: winter.mix.js

这mix 定义将任意数量的已注册包作为 YAML 对象，键是包的名称作为 kebab-case 字符串和你的位置winter.mix.js 文件相对于主题的根目录。

例如，如果你想注册两个名为demo-theme-style 和demo-theme-shop 位于资产文件夹中，您将使用以下定义：

name: "Winter CMS Demo"
description: "Demonstrates the basic concepts of the frontend theming."
author: "Winter CMS"
homepage: "https://wintercms.com"
code: "demo"

mix:
    demo-theme-style: assets/style/winter.mix.js
    demo-theme-shop: assets/shop/winter.mix.js

#混合配置

混合配置文件（winter.mix.js) 是管理 Laravel Mix 自身配置的配置文件。连同package.json 定义你的依赖项的文件，这个文件定义了 Laravel Mix 将如何编译你的资产。

你可以回顾例子 或者完整的混合 API 在Laravel 网站.

你的winter.mix.js 文件必须包含 Mix 作为要求，并且还必须定义当前目录的公共路径，如下所示：

const mix = require('laravel-mix');

// For assets in the current directory
// mix.setPublicPath(__dirname);

// For assets in a /assets subdirectory
mix.setPublicPath(__dirname + '/assets');

// Your mix configuration below

#Paths

当。。。的时候winter.mix.js 无论您在哪里运行，都会评估文件mix:compile from，工作目录设置为winter.mix.js 文件。这意味着配置中使用的任何相对路径都将相对于当前目录winter.mix.js 文件。

NOTE: 冬天的路径符号 也支持在winter.mix.js 文件。

#Examples

以下是安装用于资产编译的通用前端库的一些示例。

#顺风 CSS

对于希望使用 Tailwind CSS 的主题，包括tailwindcss,postcss 和autoprefixer 你的依赖package.json 文件。

# Inside the project root folder
npm install --save-dev tailwindcss postcss autoprefixer

# Run the Tailwind initialisation
npx tailwindcss init

这将创建一个 Tailwind 配置文件 (tailwind.config.js) 在你的主题中，你可以configure根据您特定主题的需要。

然后，添加一个winter.mix.js 将根据需要编译 Tailwind 的配置文件：

const mix = require('laravel-mix');
mix.setPublicPath(__dirname);

// Render Tailwind style
mix.postCss('assets/css/base.css', 'assets/css/theme.css', [
  require('postcss-import'),
  require('tailwindcss'),
]);

在上面的示例中，我们有一个包含 Tailwind 样式的基本 CSS 文件 -assets/css/base.css - 这将编译为最终编译的 CSS 文件assets/css/theme.css.

您的主题现在可以进行 Tailwind CSS 开发了。

#Vue

如果你想使用视图 3 在您的项目中，无论是在后端还是在组件或主题中，您都可以按照这些步骤操作。

首先，将 Vue 定义为插件的依赖项package.json:

    "name": "myauthor-myplugin",
    "private": true,
    "version": "1.0.0",
    "dependencies": {
        "vue": "^3.2.41"
    }

跑步php artisan mix:install 安装 Vue 和 Vue 需要的依赖项。

然后，添加一个winter.mix.js 配置文件到你的插件目录。这将构建一个特定的入口点文件，在这种情况下assets/src/js/myplugin.js 并创建你的 Vue 应用程序的构建版本assets/dist/js/myplugin.js.

const mix = require('laravel-mix');
mix.setPublicPath(__dirname);
mix
    // compile javascript assets for plugin
    .js('assets/src/js/myplugin.js', 'assets/dist/js').vue({ version: 3 })

接下来，您可以在插件的资产目录中创建 Vue 源文件。 Mix 支持渲染单文件组件，允许您在一个文件中定义模板、脚本和样式。

// assets/src/js/myplugin.js

import { createApp } from 'vue'
import Welcome from './components/Welcome'

const myPlugin = createApp({})

myPlugin.component('welcome', Welcome)

myPlugin.mount('[data-vue-app="myPlugin"]')

// assets/src/js/components/Welcome.vue

<template>
    <h1>{{ title }}</h1>
</template>

<script>
export default {
    setup: () => ({
        title: 'Vue 3 in Laravel'
    })
}
</script>

现在，如果你在项目根目录中完成你的资产php artisan mix:compile, Mix 会将你编译构建的 Vue 组件创建为一个 JS 文件。

接下来，在控制器的模板文件中（例如 controllers/myvuecontroller/index.php），您可以包含生成的myplugin.js 文件，并在 div 中渲染内容data-vue-app="myPlugin" 属性：

<div data-vue-app="myPlugin">
  <welcome/>
</div>

<script src="/plugins/foo/bar/assets/dist/js/myplugin.js"></script>

#Commands

#安装节点依赖

php artisan mix:install [-p <package name>] [--npm <path to npm>]

这mix:install 命令将为所有已注册的 Mix 包安装 Node 依赖项。

此命令会将每个已注册的包添加到workspaces.packages 你根的财产package.json 文件，然后运行并显示结果npm install 从您的项目根目录一次安装所有已注册包的所有依赖项。

您可以选择提供一个-p 或者--package 标记为一个或多个包安装依赖项。要定义多个包，只需添加更多-p 标志到命令的末尾。

如果使用命令运行-p 或者--package 标志和提供的包名称尚未注册并且该名称与有效的模块、插件或主题包名称匹配（模块前缀为module-$moduleDirectory, 主题前缀为theme-$themeDirectory, 插件很简单Author.Plugin) 然后一个winter.mix.js 文件将自动为该包生成，并将包含在未来运行的任何混合命令中自动注册 特征。

这--npm 如果您有自定义路径，也可以提供标志npm 程序。如果未提供，系统将尝试猜测位置npm 位于。

#更新节点依赖

php artisan mix:update [-p <package name>] [--npm <path to npm>]

这mix:update 命令将更新所有已注册 Mix 包的节点依赖项。

此命令的操作非常类似于mix:install, 除了它只更新以前安装的包。这允许您使依赖项保持最新，特别是在安全修复或 Node 依赖项的中断更新的情况下。

请参阅mix:install 可用参数和选项的文档。

#列出已注册的 Mix 包

php artisan mix:list

这mix:list 命令将列出在 Winter 安装中找到的所有已注册 Mix 包。这对于确定您的插件或主题是否已正确注册很有用。

该命令将列出所有包，以及资产目录和在注册期间定义的配置文件。

#编译一个 Mix 包

php artisan mix:compile [-p <package name>] [-f|--production] [-- <extra build options>]

这mix:compile 命令编译所有注册的 Mix 包，通过 Laravel Mix 运行每个包进行编译。

通过指定-p 标志，您可以编译一个或多个选定的包。要定义多个包，只需添加更多-p 标志到命令的末尾。

默认情况下，所有包都是在“开发”模式下构建的。如果您希望在“生产”模式下编译，这可能包括对生产站点的更多优化，请添加-f 或者--production 命令的标志。

一旦完成，该命令将生成所有编译文件及其最终大小的报告。

如果你希望将额外的选项传递给 Webpack CLI，对于编译的特殊情况，你可以添加-- 到命令的末尾，然后是任何参数 根据 Webpack CLI 选项。

#观看混合包

php artisan mix:watch <package> [-f|--production] [-- <extra build options>]

这mix:watch 命令类似于mix:compile 命令，除了它保持活动状态并监视对可能受编译影响的文件所做的任何更改。进行任何更改时，将自动执行编译。这对于开发非常有用，允许您快速进行更改并在浏览器中查看它们。

使用此命令，一次只能提供和观看一个包。

#运行打包脚本

php artisan mix:run <package> <script> [-f|--production] [-- <extra script args>]

这mix:run 命令允许您快速运行定义在package.json 混合包的文件。

// package.json
{
    // ...
    "scripts": {
        "scriptName": "script to execute"
    }
    // ...
}

这对于运行增强插件或主题功能的任意脚本很有用，例如执行单元测试、进行自定义构建等等。请注意，脚本将在工作目录设置为包的根文件夹的情况下运行，而不是整个项目的根文件夹artisan 命令通常在其中执行。

默认情况下，所有包脚本都在“开发”模式下运行。如果您希望在“生产”模式下运行脚本，请添加-f 或者--production 命令的标志。

如果您希望将额外的参数或选项传递给您的脚本，您可以添加-- 到命令结束。在之后添加的任何参数或选项-- argument 被解释为要发送到脚本本身的参数和选项。