@ecl/builder

Europa Component Library builder

Stats

StarsIssuesVersionUpdatedCreatedSize
@ecl/builder
3.0.317 days ago4 years agoMinified + gzip package size for @ecl/builder in KB

Readme

ECL Builder

Configuration

By default, ecl-builder will read the ecl-builder.config.js file at the root of your project. You can use the -c or --config parameter if you want to give your configuration file another name.

Typically, this is what it should look like:

const path = require('path');
const isProd = process.env.NODE_ENV === 'production';

module.exports = {
  // Compile entry.js
  scripts: [
    {
      entry: path.resolve(__dirname, 'src/entry.js'),
      dest: path.resolve(__dirname, 'dist/output.js'),
      options: {
        sourceMap: isProd ? false : 'inline',
        moduleName: 'myModule',
      },
    },
  ],
  // Compile entry.scss
  styles: [
    {
      entry: path.resolve(__dirname, 'src/entry.scss'),
      dest: path.resolve(__dirname, 'dist/output.css'),
      options: {
        sourceMap: isProd ? 'file' : true,
      },
    },
  ],
  // Copy files from src to dest
  copy: [
    {
      from: path.resolve(__dirname, 'src/fonts'),
      to: path.resolve(__dirname, 'dist/fonts'),
    },
    {
      from: path.resolve(__dirname, 'src/images'),
      to: path.resolve(__dirname, 'dist/images'),
    },
  ],
};

Watch mode

ECL builder provides a thin wrapper on top of browsersync for facilitating development workflows with the assets mentioned above.

Example configuration:

{
    init: {
      proxy: `${app.host}:${app.port}`,
    },
    handlers: [
      {
        pattern: `./(dev|ec-core)/src/*.scss`,
        events: [
          {
            on: 'change',
            name: 'dev/ec-core presets scss changes',
            command: 'npm run build:styles',
            message: 'New styles ready',
            reload: '*.css',
          },
        ],
      },
    ]
}

The object passed to init is merged with the same method from browsersync. ECL uses the proxy option for it's storybook instances, but this could be any other application such as a Drupal website.

handlers define a list of event handlers spawning .watch() tasks.

The value for on property matches the chokidar's events.

reload is the same as browsersync's reload(). It's optional and could be most useful in handlers related to changes in styles (scss/css) which can be injected on the page without full page reload with reload("*.css"). In all other cases, passing the function with empty parameters will cause a full page reload.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.