README

Laravel Mix 是一个前端构建工具，底层使用 Webpack 处理和打包 CSS 和 JavaScript（以及更多，如果您需要）。Laravel Mix 与 Craft Nitro 无关联，但此配置专门针对 Nitro 进行配置。

部分

• Laravel Mix

快速入门

Composer

composer install

NPM

npm install 或 yarn

Nitro

nitro add

Host: `<example>.test`
Root: `public`

nitro db add

.env

确保您的 .env 文件与本地数据库名称和凭据保持最新。

Craft App ID 及安全密钥生成

./craft setup/app-id && ./craft setup/security-key

启动

npm run dev 或 yarn dev

Laravel Mix

使用的技术

• Laravel Mix (Webpack)
• Webpack Dev Server（用于热模块重载）
• Twigpack（Craft CMS 插件）

文件夹结构和查找内容

输入文件

src/*

要编辑的文件位于项目根目录的 src 目录中。

输出文件

• 开发

  开发文件保存在 public/build 中。有关更多详细信息，请参阅下面的“开发注意事项”。

• 生产

  生产包保存在 public/assets/dist/。

为什么有两个输出？

有两个独立的构建过程可以更有效地处理文件。在开发中自动添加 CSS 前缀没有意义，就像在生产中拥有热模块重载没有意义一样。

开发注意事项

由于使用了 Webpack Dev Server，开发构建过程的输出是唯一的。与 Grunt 或 Gulp 不同，Webpack Dev Server 实际上启动自己的 Node 服务器来监听和处理文件更改。 一切都在内存中。 这使得事物变得非常快，但也意味着文件实际上没有写入任何地方。

热模块重载

热模块重载是 Webpack Dev Server 的一部分，它监听文件更改，找到这些更改的差异，并将该差异注入页面，而无需刷新页面。这适用于 CSS 和 JavaScript。

它是如何工作的？

如上所述，此 Laravel Mix 配置有两个模式

1. 开发
2. 生产

在这两种情况下，Mix 输出 manifest.json 文件，这是构建过程中创建的所有文件的完整列表。这就是 Twigpack 发挥作用的地方。Twigpack 引用 manifest.json 来了解特定文件的位置。在模板中，我们不是将 CSS 或 JS 文件的绝对路径放入其中，而是使用 Twigpack 标签来指示我们想要查找的文件名。例如，{{ craft.twigpack.includeJsModule("/js/app.js") }}。

开发

1. 开发配置将我们的 JavaScript 从 ./src/js/app.js 中提取出来，并处理我们的 SCSS 在 ./src/scss/app.scss 中。为每个文件构建源映射，以获得更好的开发和调试体验。

2. 初始化 Webpack Dev Server（WDS）并在后台工作，以提供之前提到的热模块重载 - 文件差异注入。 注意：由于 WDS 不接触我们的模板文件，因此它不能在模板更改时注入或重新加载页面。

3. (可选) Browserync 代理开发网站，通过 localhost:3000 交付，并监听模板的任何更改。一旦更改，浏览器就会刷新。Browserync 还可以监听 CSS/JS 的更改，但它不会像 WDS 那样注入 JS。Browserync 的另一个好处是它将您的本地网站暴露给网络上的其他设备，允许您在手机或同事的电脑上查看网站。正如您所猜测的，视图是同步的，因此当一个设备滚动时，另一个设备会跟随。

生产

1. JavaScript 和 CSS 都经过压缩和版本控制，以便易于缓存和缓存破坏。不再需要 v-bumps。在此阶段 CSS 会自动添加前缀。

同时

Concurrently 是一个在此构建设置中使用的包，用于同时编译开发和生产构建。这意味着您不必在 npm 脚本之间切换或记得在提交之前运行生产构建。

JavaScript 和 NPM

现在，不应该手动下载 JavaScript 库并将它们手动包含到项目文件夹中，或者从 CDN 中使用 <script> 标签包含它们，而应该通过 NPM 安装库并在适当的 src JS 文件中导入它们。（例如，app.js 如果它是一个全局库，或者在一个组件 js 文件中，如果它是特定于页面或网站部分的。）

大多数现代 JS 库都包括通过 NPM/Yarn 安装的说明。

代码拆分

我们之前的设置是将所有供应商库放入一个供应商文件夹中，并将所有内容编译成一个单一的 JS 文件。这导致了文件大小很大，并且将库加载到不需要它们的页面上。

此设置包含 Babel 的动态导入插件，允许我们有条件地导入一个 JS 文件。

以下是一个示例

// src/js/app.js

if (document.getElementById("slider-example")) {
  import(/* webpackChunkName: "SliderExample" */"./components/sliderExample").then(initSliderExample => {
    initSliderExample();
  });
}

// src/js/components/sliderExample.js

import Swiper from 'swiper';


const initSliderExample = () => {
  console.log('Hello from the slider example!');
  const swiper = new Swiper(...);
}

export default initSliderExample();

在这个例子中，在 app.js 中，我们首先检查页面上是否存在具有提供的选择器的元素，如果是的话，则加载提供的文件 components/sliderExample.js。

在 components/sliderExample.js 中，我们导入任何必要的库，然后设置一个函数，所有逻辑将在这里进行。最后，导出函数。

以下是一些需要注意的事项

• 这利用了底层的 Promises，因此不支持原生的 Promises 的浏览器（IE 等）需要填充。
• 神奇的注释 webpackChunkName: 允许我们命名这个导入，这就是分块文件的文件名。您可以随意命名这些。

动态导入和 Mix.extract()

Laravel Mix 提供了一个 extract() 方法，可以自动将自定义 JavaScript 与供应商文件（任何被导入的文件）分离。这是一个很棒的功能，因为它允许更好的缓存，但它与前面提到的动态导入方法不太兼容。这是因为 mix.extract() 方法会自动提取任何导入的供应商文件，无论它们是否在条件之后。这意味着我们没有从动态包含导入中获得任何性能优势。

资产版本控制

使用 version() 方法（在生产配置设置中找到），一个哈希 ID 将附加到清单中的捆绑文件。任何时间文件更改，文件哈希都会更新。将其视为自动版本升级。

Twigpack

Craft 插件 Twigpack 用于通过引用 Mix 输出的 mix-manifest.json 文件来拉取资产捆绑包。这使得通过不必担心资产的正确路径或位置来在不同的环境之间切换变得方便。

在 templates/_includes/global/head.twig 中查看其实际效果或查看文档。