Security News
UK Officials Consider Banning Ransomware Payments from Public Entities
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.
@stevoland/babel-plugin-webpack-loaders
Advanced tools
babel 6 plugin which allows to use 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 file-loader
, url-loader
, css-loader
, style-loader
, sass-loader
, postcss-loader
.
The plugin supports all webpack features like loaders chaining, webpack plugins, and all loaders params. It's easy because this plugin just uses webpack.
Three examples:
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 with node build/myCoolLibrary/myCoolLibrary.js
, assets and code will be placed at ./build/myCoolLibrary
folder.
Here is an output diff of this library example built without and with the plugin.
Do not run this plugin as part of a webpack frontend configuration. This plugin is intended only for backend compilation.
Take a look at this minimal-example
You need to create a webpack config
You need to add these lines to .babelrc
Now you can run example.js
// example.js
import css from './example.css';
console.log('css-modules result:', css);
with the command BABEL_DISABLE_CACHE=1 NODE_ENV=EXAMPLE ./node_modules/.bin/babel-node ./example.js
and 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
webpack configs, examples, .babelrc example, tests, minimal-example-repo
You can try out the examples by cloning this repo and running the following 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 for this plugin was babel-plugin-css-modules-transform, but it was missing some features I wanted:
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
.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 BABEL_DISABLE_CACHE=1
prefix.
(More information: #T1186, #36)
It's possible to interpolate env vars into the WebPack config path defined in your .babelrc
using 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,
{
"presets": ["es2015"],
"env": {
"AVA": {
"plugins": [
[
"babel-plugin-webpack-loaders",
{
"config": "${CONFIG}",
"verbose": false
}
]
]
}
}
}
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)
Felix Kling and his astexplorer
James Kyle and his babel-plugin-handbook
FAQs
babel 6 plugin which allows to use webpack loaders
The npm package @stevoland/babel-plugin-webpack-loaders receives a total of 1 weekly downloads. As such, @stevoland/babel-plugin-webpack-loaders popularity was classified as not popular.
We found that @stevoland/babel-plugin-webpack-loaders demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.
Security News
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.