@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 sass (ex dart-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

Quick start

Check default settings for specific parts in: CONFIG

First config that you need to adapt are probably Source and Bundle paths. Default values are src and dist directories. I f you have different structure, override this values in .febuild file. Default source file suffix is *.souorce.*

eg. Your project

--package.json
--projectSrcDir
  |-- component
    |--file.scss

On first run of NPM build task, no files will be processed, because there is no match with default settings.

To update default settings add .febuild file in your projectSrcDir dir.

Custom source dir

Two updates are needed:

1. Add source suffix to all files that needs to be processed - file.scss --> file.source.scss
2. Change source dir to projectSrcDir, in .febuild

   module.exports = {
    general: {
      sourcesPath: 'path/to/projectSrcDir',
    }
   }
   

   • if sourcePath is not provided, path to .febuild will be used. For this simple example, this is enough.

   module.exports = {}
   

After running build task:

--package.json
--projectSrcDir
  |-- component
    |--file.source.scss
--dist
  |-- component
    |--file.bundle.scss

Custom dist dir

Add custom dist dir path in .febuild

module.exports = {
    general: {
        destinationPath: path.resolve(__dirname, '..', 'custom', 'dist', 'path')
    }
}

Results:

--package.json
--projectSrcDir
  |-- component
    |--file.source.scss
--custom
  |--dist
    |--path
      |-- component
        |--file.bundle.scss

For more customizations, check Configuration details: CONFIG