@netcentric/fe-build

Frontend build tools for AEM projects.

Showing:

Popularity

Downloads/wk

3

GitHub Stars

7

Maintenance

Last Commit

3mos ago

Contributors

9

Package

Dependencies

14

License

Apache-2.0

Type Definitions

Tree-Shakeable

No?

Categories

Readme

@netcentric/fe-build

Frontend build tools for AEM projects.

Version Build Status CodeQL Analysis semver: semantic-release License

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

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`
  1. 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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial