Injeção de módulos com Webpack

README.md

Uma forma simples de reduzir acoplamento modificando apenas a configuração de build.

Como a configuração é "apenas Javascript", fica fácil manipular, porém é importante tomar cuidado para não cair na situação do "na minha máquina funciona", pois cada ambiente pode gerar um bundle diferente. Testar é sempre importante.

Isso pode ser muito útil para injetar arquivos de configuração, implementação de features específicas (tracing, logging, metrics, error tracking, etc.) e até incluir módulos específicos de um ambiente, como suporte a source-map, por exemplo.

dev.js

const messages = require("./messages");

// Implementação específica, pode carregar dependências diferentes de prod.
messages.setMessage("Hello from dev");

index.js

const messages = require("./messages");

// Index não conhece a implementação do outro lado,
// permitindo que ambos sejam modificados livremente,
// desde que o "ponto de encontro" (interface) seja
// respeitada de ambos os lados.
console.log(messages.getMessage());

install-source-maps.js

require("source-map-support").install();

messages.js

// Essa é a interface, que faz o meio-de-campo entre consumidor e fornecedor
// Na literatura pode ser entendido como Design Pattern Bridge
// 
// https://sourcemaking.com/design_patterns/bridge

let message;

function getMessage() {
  //
  // Aqui você pode fazer um tratamento para estourar um erro caso uma
  // implementação não tenha sido fornecida, exemplo:
  //
  // if (typeof message === "undefined") {
  //   throw new Error("No message implementation provided yet.");
  // }
  //
  return message;
}

function setMessage(msg) {
  message = msg;
}

module.exports = { getMessage, setMessage };

package.json

{
  "scripts": {
    // Você pode aproveitar seu sistema de tarefas (npm scripts, gulp, grunt, etc.)
    // para trocar entre implementações via flags/env vars.
    "build": "webpack",
    "build-production": "cross-env BUILD_ENV='production' webpack"
  },
  "devDependencies": {
    "cross-env": "*"
  }
}

prod.js

const messages = require("./messages");

// Implementação específica, pode carregar dependências diferentes de dev.
messages.setMessage("Hello from prod");

webpack.config.js

const path = require("path");

let entry = [
  isProduction() && "./install-source-map.js",
  //
  // Injeção de módulo adicional aqui. Importante: os fornecedores devem
  // ser carregados antes dos consumidores.
  //
  isProduction() ? "./prod.js" : "./dev",
  "./index.js"
].filter(Boolean); // filtra os módulos inválidos, para tratar o "install-source-map.js" que não é incluído em dev.

module.exports = {
  entry,
  output: {
    path: path.resolve(__dirname, "dist")
  },
  mode: isProduction() ? "production" : "development",
  // sourcemaps somente em produção, pois isso eleva o tempo de build
  devtool: isProduction() ? "source-map" : false,
}

function isProduction() {
  return process.env.BUILD_ENV === "production";
}