@bva/override-resolver v0.1.0

Override Resolver

Webpack resolver plugin for overriding or aliasing dependencies and component requests.

Leverages enhanced-resolve to handle internal resolution and hook into the request’s lifecycle.

Installation

//npm
npm install @bva/override-resolver

//yarn
yarn add @bva/override-resolver

Why?

This plugin was born from the need to customize 3rd party UI Kits, Component Libraries, etc. without requiring a local clone of the entire library.

A simple example is a Button component provided by a library installed in node_modules as a dependency. This **Button** may be in use by said library throughout multiple other components, which typically makes it difficult to add global custom logic to that Button across your app or project.

Override Resolver trivializes such scenario by providing the option to update that one Button component, or specific parts of it, without affecting the rest of the Component Library.

Why not use Webpack’s native resolve.modules or resolve.alias?

Both of those may be good enough for certain applications, however they share the limitation of not resolving a package’s internal relative requests. Webpack resolve.modules and resolve.alias would only work if all requests were done using module paths (i.e. @moduleName/path/to/component).

Override Resolver is able to handle absolute, module, and relative paths. If a request to a file exists, Override Resolver is able to override it.

Other applications

This plugin can be used outside of simple Component/UI Library overrides you can specify any given request path to alias or override files from.

This can also be leveraged to setup a theme structure or a fallback system for your modules and components.

Support

Requires Webpack 4.x+ and works with NuxtJS, Vue, NextJS, React, JS, SCSS, plus any other file type or framework that can use Webpack.

Usage

Webpack Config file

const path = require('path');
const OverrideResolver = require('@bva/override-resolver');

const WebpackConfig = {
  //...
  resolve: {
    plugins: [
      new OverrideResolver({
        name: '@bva',
        alias: path.resolve(__dirname, 'overrides'),
      })
    ],
  },
  //...
}

module.exports = WebpackConfig;

NuxtJS

import path from 'path';
import OverrideResolver from '@bva/override-resolver';

const NuxtConfig = {
  //...
  build: {
    extend(config) {
      config.resolve.plugins.push(new OverrideResolver(
        {
          name: '@bva',
          alias: path.resolve(__dirname, 'overrides'),
        },
      ));
    },
  },
  //...
};

export default NuxtConfig;