Werk volledig-stapel AEM project bij om front-end pijpleiding te gebruiken

De module ui.frontend verwijderen uit de volledige constructiecyclus voor stapels

• In de hoofdmap van het WKND-siteproject pom.xml vindt u een opmerking over de submodulevermelding van <module>ui.frontend</module> .

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

• En aan opmerkingen gerelateerde afhankelijkheid van de 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>
    -->
    ...

Bereid de ui.frontend module voor het front-end pijpleidingscontract door twee nieuwe webpack configuratiedossiers toe te voegen.

• Kopieer de bestaande eigenschappen webpack.common.js as webpack.theme.common.js en change output en MiniCssExtractPlugin , CopyWebpackPlugin plugin config params zoals hieronder:

...
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: './theme' }
        ]
    })
...

• Kopieer de bestaande webpack.prod.js als webpack.theme.prod.js en wijzig als volgt de locatie van de variabele common naar het bovenstaande bestand

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

NOTE

De bovenstaande twee configuratiewijzigingen in 'webpack' moeten verschillende uitvoerbestanden en mapnamen hebben, zodat we eenvoudig onderscheid kunnen maken tussen clientlib (Full-stack) en thema's die worden gegenereerd (front-end), frontale artefacten van de pijplijn.

Zoals u hebt geraden, kunnen de bovenstaande wijzigingen worden overgeslagen om ook bestaande webpack-configuraties te gebruiken, maar de onderstaande wijzigingen zijn vereist.

Het is aan jou hoe je ze wilt benoemen of organiseren.

• Zorg ervoor dat in het bestand package.json de waarde van de eigenschap name gelijk is aan de naam van de site uit het knooppunt /conf . En onder de eigenschap scripts voert u een build -script uit dat aangeeft hoe de front-end bestanden van deze module moeten worden gemaakt.

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

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

    ...
    }

Bereid de ui.content module voor de front-end pijpleiding door twee het Verdraaien vormen toe te voegen.

• Maak een bestand in com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig - dit omvat alle front-end bestanden die de module ui.frontend onder de map dist genereert met behulp van het webpack-constructieproces.

...
    <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"/>
...

TIP

Zie volledige HtmlPageItemsConfigin het project van de Plaatsen van AEM WKND.

• Vervolgens wordt de waarde van com.adobe.aem.wcm.site.manager.config.SiteConfig met de waarde van themePackageName gelijk aan de waarde van de eigenschap package.json en name en siteTemplatePath gewijzigd, waarbij wordt verwezen naar de waarde van een /libs/wcm/core/site-templates/aem-site-template-stub-2.0.0 stub-pad.

...
    <?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>
...

TIP

Zie, volledige SiteConfigin het project van de Plaatsen van AEM WKND.

Als een thema of stijlen worden gewijzigd en via een front-end pijplijn voor een testrun worden geïmplementeerd, veranderen we text-color in Adobe rood (of u kunt uw eigen stijl kiezen) door de ui.frontend/src/main/webpack/base/sass/_variables.scss bij te werken.

    $black:     #a40606;
    ...