@netcentric/fe-build

Frontend build tools for AEM projects.

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

npm i @netcentric/fe-build

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

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

1.2. Run npm task

npm run build

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

1. Lint sourcecode with Stylelint
2. Compile with sass (ex dart-sass)
3. Transform with Autoprefixer

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

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

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.

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

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