Collection of common helpers for wuzzle internal use.


Keywords
create-react-app, cypress, electron-webpack, jest, mocha, next, node, nuxt, razzle, storybook, taro, transpile, uni-app, vue-cli, webpack, wuzzle
License
MIT
Install
npm install @wuzzle/helpers@0.6.3

Documentation

Wuzzle

Config all kinds of webpack compilations in a painless way! 💊


Install

Install with npm:

npm install --save-dev wuzzle

Install with yarn:

yarn add --dev wuzzle

Introduction

Wuzzle intends to provide a painless way to config all kinds of webpack compliations by:

  • Hijacking and altering webpack configs inside webpack embedded bundlers.
  • Transpiling files with webpack compilations.
  • Registering webpack compilations on files requiring.

Usage

Hijacking and Altering

A bundler, as long as it has webpack embedded inside, is hijackable by wuzzle. Take CRA for example:

  "scripts": {
-    "start": "react-scripts start",
+    "start": "wuzzle react-scripts start",
-    "build": "react-scripts build"
+    "build": "wuzzle react-scripts build"
  }

Just prepend the wuzzle command and add a wuzzle.config.js file in app root to make alteration:

module.exports = (webpackConfig, webpack) => {
  // ...
};

The webpackConfig is the webpack config generated in target bundler to setup its webpack compilation and the webpack is the webpack object itself imported inside. Tweak the webpackConfig to setup or teardown any parts of it to fit the need. Also, env variables WUZZLE_COMMAND_NAME and WUZZLE_COMMAND_ARGS are available in wuzzle.config.js to help check current executed command and its extra arguments. For now, the hijacking and altering is supported and tested against CRA, Next, Storybook, Razzle, Taro, EW and Webpack. (But it's supposed to work well with other bundles.)

Transpiling

Use the command wuzzle tranpsile to make transpilations. It accepts globs and outputs files with the same hierarchy as input files:

$ wuzzle transpile 'src/**/*.js' -d lib

The tranpiling has a default webpack config and receives alteration from wuzzle.config.js. The base dir is the longest common path of input files by default. Watch mode can be enabled by -w. See more options by -h.

Registering

Registering webpack compilations in Node, Mocha, Jest is supported and tested. Prepend wuzzle to node, mocha, jest to use it. For the former two, set resolvable file extensions by -E. For the later one, Jest transformers will be replaced with webpack compilations. The registering behaves the same as the transpiling and it receives alteration from wuzzle.config.js as well. See more options by -H.