@netcentric/fe-build

@netcentric/fe-build

Frontend build tools for AEM projects.

Intro

All in one solution for modern Frontend projects, with special focus on AEM (Adobe Experience Manager)

Installation

npm i @netcentric/fe-build

Usage

1.1. Add nc-fe-build task in package.json scripts

  "scripts": {
    "build": "nc-fe-build"
  },

1.2. Run npm task

npm run build

JavaScript

1. Lint sourcecode with Eslint
2. Transpile with Babel
3. Bundle and optimize with Webpack
4. Analyze bundles with webpack-bundle-analyzer

CSS

1. Lint sourcecode with Stylelint
2. Compile with node-sass
3. Transform with Autoprefixer

ClientLibraries

1. Automatically create clientLibrary based on source file
2. Include all bundled files

Configuration file

Default configuration can be extended via .febuild file. Config file is loaded and executed as JavaScript module. Custom configuration is used for all files located in the same directory as .febuild and in subdirectory tree.

Add .febuild whenever you need group of files to use separate build options.

Configuration that can be extended:

• general
• output
• resolve
• optimization
• plugins
• babel
• sass
• eslint
• stylelint
• postcss
• templates
• clientlibs

Eg, to override default babel config: .febuild:

module.exports = {
    babel: {
        exclude: /node_modules\/(?!swiper|dom7)/,
        use: {
            options: {
                plugins: ['@babel/plugin-proposal-optional-chaining', '@babel/plugin-transform-runtime', '@babel/plugin-proposal-object-rest-spread']
            }
        }
    }
};

Configuration details: CONFIG NPM tasks: TASKS