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 and to create libraries as usual with babel src --out-dir lib
command.
It just replaces require - import
statements with webpack loaders
results. Look at babel build output diff to get the idea.
For now this plugin is at alpha quality and tested on webpack loaders I use in my projects.
These loaders are file-loader
, url-loader
, css-loader
, style-loader
, sass-loader
, postcss-loader
.
Plugin supports all webpack features like loaders chaining, webpack plugins, and all loaders params. It's easy because this plugin just uses webpack.
There are three examples here:
-
runtime css-modules example with simple webpack config, run it with
npm run example-run
-
library example with multi loaders-plugins webpack config, build it with
npm run example-build
and execute withnode build/myCoolLibrary/myCoolLibrary.js
, assets and code will be placed at./build/myCoolLibrary
folder.Here is output diff of this library example build without and with current plugin.
Look at minimal-example
-
You need to create webpack config file.
-
You need add to
.babelrc
next lines -
Now you can run next javascript file
// example.js import css from './example.css'; console.log('css-modules result:', css);
with command
NODE_ENV=EXAMPLE ./node_modules/.bin/babel-node ./example.js
and you get the console outputcss-modules result: { main: 'example__main--zYOjd', item: 'example__item--W9XoN' }
-
Here I placed output diff of this babel library build without and with plugin. As you can see plugin just replaces require with loaders results. All loaders and plugins applied to generated assets
npm install --save-dev babel-cli babel-plugin-webpack-loaders
webpack configs, examples, .babelrc example, tests, minimal-example-repo
you can test local examples just cloning this repo and running next commands
npm install
# example above
npm run example-run
# library example - build library with a lot of modules
npm run example-build
# and now you can use your library using just node
node build/myCoolLibrary/myCoolLibrary.js
# test sources are also good examples
npm run test
The source of inspiration of this plugin is babel-plugin-css-modules-transform
- But I love to write css with sass
- I just like webpack and its loaders (chaining, plugins, settings).
- I want to opensource an UI library which heavily uses css-modules + sass and other webpack loaders.
Library contains of many small modules and every module must be available to users independently like
lodash/blabla/blublu
. Now I can replace heavy build file with this plugin and just one commandbabel src --out-dir lib
Plugin tests all require
pathes with test regexps from webpack config loaders,
-
for each successful test plugin synchronously executes webpack,
-
using babel-parse plugin parses webpack output,
-
plugin replaces require ast with parse ast output.
By default babel caches compiled files, if you need to view webpack stdout output, run commands with
BABEL_DISABLE_CACHE=1
prefix
Felix Kling and his astexplorer
James Kyle and his babel-plugin-handbook