heimrichhannot/contao-encore-bundle

该插件将 symfony encore 与 contao 深度集成。一方面,您可以准备自己的插件以定义自定义 webpack 条目,只需一条命令即可将其添加到 webpack 条目中。另一方面,该插件允许您仅在需要的地方添加 encore 条目。

2.0.0 2024-02-19 10:29 UTC

README

Latest Stable Version Total Downloads CI Coverage Status

利用 symfony webpack encore 的力量和简单性,在 contao 中使用。该插件允许您在布局和页面级别决定哪些 encore 条目应该被加载。如果您需要更多功能,您可以准备自己的插件,定义它们自己的 encore 条目,因此无需再手动添加或删除 encore 条目。

功能

  • 使用 symfony encore(《symfony/webpack-encore》和《symfony/webpack-encore-bundle》)来增强您的 contao 资产工作流程
  • 有条件地加载资产,仅在必要时(入口点可以在后端布局和页面设置中激活或在您的插件代码中添加(例如,在前端模块中))
  • 在安装时准备您的插件以添加 encore 条目,并从 contao 全局资产数组中删除资产

设置

先决条件

  • 为了安装 Encore 并了解 Webpack 和 symfony Encore 的核心概念,请阅读 Encore 文档

准备您的项目和插件

为 encore 插件设置您的项目

➡️ 项目设置

➡️ 插件设置

运行 Encore

  1. 运行 encore 准备命令

    php vendor/bin/contao-console huh:encore:prepare
    
  2. 如果(yarn)依赖项已更改,请运行 yan install

    yarn install
    
  3. 运行 encore 生成资产

    yarn encore dev
    
  4. 在 contao 后端激活 encore 条目(如果未从代码中添加)

使用方法

激活 encore 条目

  1. 在 contao 后端,转到页面布局配置
  2. 勾选“激活 Webpack Encore”并填写必填字段
  3. 如果您有一个包含主要样式表的 main 项目插件条目,请将其添加为活动条目,并添加您希望在每页上激活的所有其他条目。
  4. 对于特定页面的功能,您可以在页面设置(网站结构)中激活其他条目。
    • 请注意,子页面将继承其父页面的设置
    • 请注意,您需要勾选条目为活动状态(如果您希望它们被加载)!
    • 如果您希望在特定页面上不加载已添加的条目,请将其选中并不要勾选“活动”。

准备命令

php vendor/bin/contao-console huh:encore:prepare

必须在更改 encore 条目配置后执行 prepare 命令,例如在 composer 更新后或更改您自己的代码中的配置后。

该命令从所有插件收集 encore 条目,并在项目根目录中创建一个名为 encore.bundles.js 的文件。该文件包含所有通过在 webpack.config.js 中调用 encoreBundles.addEntries(); 添加的与 contao encore 兼容的插件的条目。

它还从具有 EncoreExtensions 注册的插件的 package.json 文件中收集依赖项,并将它们添加到项目依赖项中。

Description:
  Does the necessary preparation for contao encore bundle. Needs to be called after changes to bundle encore entries.

Usage:
  huh:encore:prepare [options]
  encore:prepare

Options:
      --skip-entries[=SKIP-ENTRIES]  Add a comma separated list of entries to skip their generation. [default: false]

运行 encore

运行 encore 生成/编译您的资产。

yarn encore dev 
yarn encore dev --watch 
yarn encore prod

文档

项目配置 - 准备您的contao项目以便与encore和encore bundle一起使用

组件配置 - 为您的组件添加encore bundle支持

JavaScript配置 - 关于配置您的encore条目的帮助信息

开发者文档

配置参考