rollup-plugin-magento2
v1.0.2
Published
Simple ES module bundling for Magento 2
Downloads
4
Readme
rollup-plugin-magento2
Simple ES module bundling for Magento 2.
About
This is a plugin for Rollup that converts your Javascript modules written in ES6/ES7 to modules compatible with RequireJS.
How it works
This plugin works by virtualizing modules that correspond to scripts already included on Magento 2 (ex: jquery
, underscore
, etc.). Each virtual plugin will be listed as an additional dependency on the define
callback. The final result is a script compatible with RequireJS that can be easily deployed in Magento 2.
Examples
Simple module
This example shows how to declare underscore
as a virtual module. When a module is declared as virtual, the plugin will append it to the dependency list.
main.js
// File: assets/js/main.js
import _ from 'underscore';
const rollup = "Rollup & Magento";
const message = `Hello from ${_.escape(rollup)}!!!`;
alert(message);
rollup.config.js
// File: rollup.config.js
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import magento2 from 'rollup-plugin-magento2';
export default {
input: './assets/js/main.js',
output: {
file: './view/frontend/web/js/main.js',
format: 'iife',
name: 'bundle',
},
plugins: [
babel({
exclude: 'node_modules/**'
}),
resolve(),
commonjs(),
magento2({
virtual: [
'underscore'
]
}),
]
};
Result
define(['underscore'], function(_) {
'use strict';
var rollup = "Rollup & Magento";
var message = "Hello from ".concat(_.escape(rollup), "!!!");
alert(message);
});
Local import
main.js
// File assets/js/main.js
import sayHello from './sayHello';
import { debounce } from 'underscore';
// Build a debounced version of sayHello
export default {
sayHello: debounce(sayHello, 300)
};
sayHello.js
// File assets/js/sayHello.js
const sayHello = message => alert( message );
export default sayHello;
rollup.config.js
// File: rollup.config.js
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import magento2 from 'rollup-plugin-magento2';
export default {
input: './assets/js/main.js',
output: {
file: './view/frontend/web/js/main.js',
format: 'iife',
name: 'bundle',
},
plugins: [
babel({
exclude: 'node_modules/**'
}),
resolve(),
commonjs(),
magento2({
virtual: [
'underscore'
]
}),
]
};
Result
define(['underscore'], function(underscore) {
'use strict';
var debounce = underscore.debounce;
var sayHello = function sayHello(message) {
return alert(message);
};
var bundle = {
sayHello: debounce(sayHello, 300)
};
return bundle;
});
Virtual directory
In case your module requires a lof of dependencies you can instead define a virtual directory. Any import prefixed with that name will be considered a Magento Javascript module.
main.js
// File assets/js/main.js
import $ from '@magento/jquery';
import { random } from '@magento/underscore';
export default {
trim: $.trim,
rand: random
};
rollup.config.js
// File: rollup.config.js
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import magento2 from 'rollup-plugin-magento2';
export default {
input: './assets/js/main.js',
output: {
file: './view/frontend/web/js/main.js',
format: 'iife',
name: 'bundle',
},
plugins: [
babel({
exclude: 'node_modules/**'
}),
resolve(),
commonjs(),
magento2({
virtualDir: 'magento'
}),
]
};
Result
define(['jquery', 'underscore'], function($, underscore) {
'use strict';
var random = underscore.random;
var bundle = {
trim: $.trim,
rand: random
};
return bundle;
});
Changelog
v1.0.2
Updated: Bump dependencies.
v1.0.1
Fixed: Destructured imports using virtualDir.
v1.0
Added: Support for virtualDir.
v0.1.1
Added: Tests.
v0.1
First release