Since plugin was published, there were a lot of changes in testing software. Be sure in most(all) cases you DON'T need this plugin for testing. I highly recommend you to use jest for testing, and use moduleNameMapper (identity-obj-proxy, etc) to mock CSS-Modules and other webpack loaders.
This Babel 6 plugin allows you to use webpack loaders in Babel.
It's now easy to run universal apps on the server without additional build steps, to create libraries as usual with
babel src --out-dir lib command, to run tests without mocking-prebuilding source code.
It just replaces
require - import statements with
webpack loaders results. Take a look at this Babel build output diff to get the idea.
For now this plugin is of alpha quality and tested on webpack loaders I use in my projects.
These loaders are
The plugin supports all webpack features like loaders chaining, webpack plugins, and all loaders params. It's easy because this plugin just uses webpack.
library example with multi loaders-plugins webpack config, build it with
npm run example-buildand execute with
node build/myCoolLibrary/myCoolLibrary.js, assets and code will be placed at
Do not run this plugin as part of a webpack frontend configuration. This plugin is intended only for backend compilation.
How it works
Take a look at this minimal-example
You need to create a webpack config
You need to add these lines to
Now you can run example.js// example.js;console;
with the command
BABEL_DISABLE_CACHE=1 NODE_ENV=EXAMPLE ./node_modules/.bin/babel-node ./example.jsand you'll get the following console output:css-modules result: main: 'example__main--zYOjd' item: 'example__item--W9XoN'
Here I placed output diff of this babel library build without and with the plugin. As you can see the plugin just replaces require with loaders results. All loaders and plugins have been applied to generated assets
npm install --save-dev babel-cli babel-plugin-webpack-loaders
You can try out the examples by cloning this repo and running the following commands:
npm install# example abovenpm run example-run# library example - build library with a lot of modulesnpm run example-build# and now you can use your library using just nodenode build/myCoolLibrary/myCoolLibrary.js# test sources are also good examplesnpm run test
The source of inspiration for this plugin was babel-plugin-css-modules-transform, but it was missing some features I wanted:
- I love writing CSS using Sass
- I like webpack and its loaders (chaining, plugins, settings)
- I wanted to open source a UI library which heavily used CSS Modules, Sass and other webpack loaders.
The library consisted of many small modules and every module needed to be available to users independently such as
lodash/blabla/blublu. With this plugin the heavy build file for the library could be replaced with just one command:
babel src --out-dir lib.
How the plugin works internally
The plugin tests all
require paths with test regexps from the loaders in the webpack config, and then for each successful test:
parses webpack output using babel-parse
replaces the required ast with the parsed ast output
By default Babel caches compiled files, so any changes in files processed with loaders will not be visible at subsequent builds,
you need to run all commands with a
Dynamic config path
It's possible to interpolate env vars into the WebPack config path defined in your
lodash.template syntax. This is mainly to achieve compatibility with ava.
The ava test runner runs each spec relative to its enclosing folder in a new process which hampers this plugins ability to use a relative path for the WebPack config. An absolute path to the WebPack config will work however, and you can set one in your
.babelrc using an env var like this,
And then invoke ava something like this,
CONFIG=$(pwd)/webpack.config.ava.js BABEL_DISABLE_CACHE=1 NODE_ENV=AVA ava --require babel-register src/**/*test.js
(More information: #41)