Webpack plugin to make inheritable code layers, named glob imports, easy monorepo / multi packages app & shared webpack configs

Why Layer-pack ?

Layer-pack is a webpack plugin allowing better code modularity, maintainability and flexibility by solving some of the most major problems of large JS/TS applications :

• The first one, we often have to multiply internal imports in the project files. This usually leads to complex maintenance and (too) many import and require statements.
• The second is that we cannot easily "extend" an existing application, we are still forced to create various interfacing systems and APIs, maintain separates build configurations and dependencies lists.

Layer pack solve these problems and many others by enhancing imports & resolving :

• It allows to use glob patterns in import & requires statements
  • So we can import files and a directory tree without specifying all of their names. Yes, just paste files & play mode 😃
• It literally allows to "inherit" packages or "app layers", including theirs dependencies and webpack build configurations
  • So you can easily & smartly split you're app in some "app layer" like : app.core, app.models, app.www, app.api, app.admin, app.config...
• It "namespaces" the application files
  • So we can use absolute imports where we shouldn't use relative paths,
• Additionally, it allows to "templatize" webpack build configs and define multiples "inheritable" profiles on a unique "app layer" package.
  • This mean that a unique package can expose multiples layers or bootstraps

Check the samples here

Small doc here

You... like it / it saved your day / you stole all the code / you want more?

BTC : bc1qh43j8jh6dr8v3f675jwqq3nqymtsj8pyq0kh5a
Paypal :

Features by samples :

Namespace you're application

So you can stop using easily broken relative imports :

// import stuff from "../../../config"; // no more
import stuff from "App/config"; // aw yeah

Use glob patterns in imports statements

Just import them all :

import allModules from "App/modules/*.module.js";
// or
// import allModules from "App/modules/*/index.js";

Just import them all and convert directories & files names to JS named exports :

// or using es6 named exports
import AllActionsByStoreName from "App/store/(*)/actions.js";
// or
import {MyCompByFileName} from "App/ui/components/(*).jsx"; // ( big import list to maintain ) no more ! :)
// or
import {myFolder} from "App/ui/components/(**/*).jsx"; // ( walk & set myFolder/MyComp in myFolder.MyComp )

// or
// walk & set myFolder/MyComp in myFolder.MyComp using Loadable Components / webpack chuncks:
import {myFolder} from "App/ui/components/(**/*).jsx?using=ReactLoadable"; 

// also available : LazyReact, SuspenseReact ( lazy with suspense )

Glob imports also work in Scss :

@import "App/ui/**/*.scss"; // 1 import to rulz them all

Split you're projects into multiple inheritable npm packages

• inherit & share most of the code between projects
• Include or not layers like dev tools, admin, etc
• Switch between monorepo and npm dependencies structure
• Test layers independently
• Compile in 1 step, with the source map
• Use multiple dev servers sharing the same code layers

Easily override inherited project

By enhancing / replacing any file

import $super from "$super";// require the 1st file with the same path name in the inherited packages

// Add some stuff or HOCs fn
export default class MyOverrided extend $super{
//...
}

@import "$super";

// do some css additions
.theSameWithA{
    backgroud : red;
}

Inherit, use & extend multiple webpack config from dependencies packages

So you can share, version, extend & switch your webpack conf & boilerplate via npm

Check the samples here

Small doc here

Things to know

• Node builds include the (node_)modules relative directories locations to preserve inherited dependencies ( if they are not included in the builds )
• Sass imports have limitations from the sass package: it doesn't tell the files path that call imports, so scss files must import using absolute paths ( eg: App/assets/stuff.jpg, not ./assets/stuff.jpg )
• Context based webpack requires are not processed by layer-pack, they have the normal webpack behavior
• New versions of Yarn mess too much with the modules structure, resolving & management, it can't be used with layer-pack anymore

Alternative to

• Splitting big projects in thousands of modules
• Lerna, others mono-repo tool chains & defining messy yarn workspaces ...

Contributors ?

Sponsors

Become a sponsor!

You... like it / it saved your day / you stole all the code / you want more?

BTC : bc1qh43j8jh6dr8v3f675jwqq3nqymtsj8pyq0kh5a
Paypal :