Aktualisieren des Full-Stack-AEM-Projekts zur Verwendung der Frontend-Pipeline update-project-enable-frontend-pipeline

Entfernen Sie das Modul ui.frontend aus dem vollständigen Build-Zyklus

• Im Stammverzeichnis pom.xml des WKND-Sites-Projekts kommentieren Sie den Eintrag <module>ui.frontend</module> des Submoduls.

    ...
    <modules>
    <module>all</module>
    <module>core</module>
    <!--
    <module>ui.frontend</module>
    -->
    <module>ui.apps</module>
    ...

• Und kommentarbezogene Abhängigkeit von ui.apps/pom.xml

    ...
    <!-- ====================================================================== -->
    <!-- D E P E N D E N C I E S                                                -->
    <!-- ====================================================================== -->
        ...
    <!--
        <dependency>
            <groupId>com.adobe.aem.guides</groupId>
            <artifactId>aem-guides-wknd.ui.frontend</artifactId>
            <version>${project.version}</version>
            <type>zip</type>
        </dependency>
    -->
    ...

Bereiten Sie das Modul ui.frontend für den Frontend-Pipeline-Vertrag vor, indem Sie zwei neue Webpack-Konfigurationsdateien hinzufügen.

• Kopieren Sie die bestehende webpack.common.js als webpack.theme.common.js, und ändern Sie die Eigenschaft output und die Plugin-Konfigurationsparameter MiniCssExtractPlugin und CopyWebpackPlugin wie folgt:

...
output: {
        filename: 'theme/js/[name].js',
        path: path.resolve(__dirname, 'dist')
    }
...

...
    new MiniCssExtractPlugin({
            filename: 'theme/[name].css'
        }),
    new CopyWebpackPlugin({
        patterns: [
            { from: path.resolve(__dirname, SOURCE_ROOT + '/resources'), to: './clientlib-site' }
        ]
    })
...

• Kopieren Sie die vorhandene webpack.prod.js als webpack.theme.prod.js, und ändern Sie den Speicherort der Variablen common in der oben genannten Datei als

...
    const common = require('./webpack.theme.common.js');
...

• Vergewissern Sie sich, dass in der Datei package.json der Wert der Eigenschaft name mit dem Standortnamen aus dem Knoten /conf übereinstimmt und dass sie unter der Eigenschaft über scripts ein build-Skript verfügt, das anweist, wie die Frontend-Dateien aus diesem Modul zu erstellen sind.

    {
    "name": "wknd",
    "version": "1.0.0",
    ...

    "scripts": {
        "build": "webpack --config ./webpack.theme.prod.js"
    }

    ...
    }

Bereiten Sie das Modul ui.content für die Frontend-Pipeline vor, indem Sie zwei Sling-Konfigurationen hinzufügen.

• Erstellen Sie eine Datei unter com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig – diese enthält alle Frontend-Dateien, die das Modul ui.frontend unter dem Ordner dist mithilfe des Webpack-Build-Prozesses erzeugt.

...
    <css
    jcr:primaryType="nt:unstructured"
    element="link"
    location="header">
    <attributes
        jcr:primaryType="nt:unstructured">
        <as
            jcr:primaryType="nt:unstructured"
            name="as"
            value="style"/>
        <href
            jcr:primaryType="nt:unstructured"
            name="href"
            value="/theme/site.css"/>
...

• Zweitens com.adobe.aem.wcm.site.manager.config.SiteConfig, wobei der Wert themePackageName dem Wert der Eigenschaft package.json und name entspricht, und siteTemplatePath auf den Stubpfad /libs/wcm/core/site-templates/aem-site-template-stub-2.0.0 verweist.

...
    <?xml version="1.0" encoding="UTF-8"?>
    <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
            jcr:primaryType="nt:unstructured"
            siteTemplatePath="/libs/wcm/core/site-templates/aem-site-template-stub-2.0.0"
            themePackageName="wknd">
    </jcr:root>
...

Um eine Themen- oder Stiländerung über die Frontend-Pipeline für einen Testlauf bereitzustellen, ändern wir text-color auf Adobe-Rot (oder eine andere Farbe Ihrer Wahl), indem wir ui.frontend/src/main/webpack/base/sass/_variables.scss aktualisieren.

    $black:     #a40606;
    ...