Skip to content

Instantly share code, notes, and snippets.

@SilentImp
Last active October 26, 2020 20:55
Show Gist options
  • Save SilentImp/d440f2805787d68f3aa5cc4f9fca4200 to your computer and use it in GitHub Desktop.
Save SilentImp/d440f2805787d68f3aa5cc4f9fca4200 to your computer and use it in GitHub Desktop.
How to configure Magento 2 to transpile es6
'use strict';
var combo = require('./combo'),
themes = require('./themes'),
_ = require('underscore');
var themeOptions = {};
_.each(themes, function(theme, name) {
if (typeof theme.babelFiles != "undefined") {
themeOptions[name] = {
files: combo.babelFiles(name)
};
}
});
var babelOptions = {
options: {
sourceMap: true,
presets: ['babel-preset-es2015']
}
};
/**
* Compiles JS6 to JS5 and generates necessary files if requested.
*/
module.exports = _.extend(themeOptions, babelOptions);
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
'use strict';
var theme = require('./themes'),
path = require('./path'),
refine_path = function (theme, file_path) {
return path.pub +
theme.area + '/' +
theme.name + '/' +
theme.locale + '/' +
file_path;
};
/**
* Define Combos for repetitive code.
*/
module.exports = {
collector: function (themeName) {
var cmdPlus = /^win/.test(process.platform) ? ' & ' : ' && ',
command = 'grunt --force clean:' + themeName + cmdPlus;
command = command + 'php bin/magento dev:source-theme:deploy ' +
theme[themeName].files.join(' ') +
' --type=less' +
' --locale=' + theme[themeName].locale +
' --area=' + theme[themeName].area +
' --theme=' + theme[themeName].name;
return command;
},
autopath: function (themeName, folder) {
return folder +
theme[themeName].area + '/' +
theme[themeName].name + '/' +
theme[themeName].locale + '/';
},
babelFiles: function (themeName) {
var es6Files = [],
ourTheme = theme[themeName],
files = ourTheme.babelFiles;
for (var i = 0; i < files.length; i++) {
if (typeof files[i].src == "undefined") {
var path_collection = {};
for (var target in files[i]) {
path_collection[refine_path(ourTheme, target)] = refine_path(ourTheme, files[i][target]);
}
es6Files.push(path_collection);
} else {
files[i].cwd = refine_path(ourTheme, files[i].cwd);
files[i].dest = refine_path(ourTheme, files[i].dest);
es6Files.push(files[i]);
}
}
return es6Files;
},
lessFiles: function (themeName) {
var lessStringArray = [],
cssStringArray = [],
lessFiles = {},
i = 0;
for (i; i < theme[themeName].files.length; i++) {
cssStringArray[i] = path.pub +
theme[themeName].area + '/' +
theme[themeName].name + '/' +
theme[themeName].locale + '/' +
theme[themeName].files[i] + '.css';
lessStringArray[i] = path.pub +
theme[themeName].area + '/' +
theme[themeName].name + '/' +
theme[themeName].locale + '/' +
theme[themeName].files[i] + '.less';
lessFiles[cssStringArray[i]] = lessStringArray[i];
}
return lessFiles;
}
};
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
'use strict';
/**
* Define Themes
*
* area: area, one of (frontend|adminhtml|doc),
* name: theme name in format Vendor/theme-name,
* locale: locale,
* files: [
* 'css/styles-m',
* 'css/styles-l'
* ],
* dsl: dynamic stylesheet language (less|sass)
*
*/
module.exports = {
blank: {
area: 'frontend',
name: 'Magento/blank',
locale: 'en_US',
files: [
'css/styles-m',
'css/styles-l',
'css/email',
'css/email-inline'
],
dsl: 'less'
},
luma: {
area: 'frontend',
name: 'Magento/luma',
locale: 'en_US',
files: [
'css/styles-m',
'css/styles-l'
],
dsl: 'less'
},
dm2: {
area: 'frontend',
name: 'demo-vendor/demo-m2-theme',
locale: 'en_US',
babelFiles: [{
expand: true,
cwd: 'js/source/',
src: ['**/*.js'],
dest: 'js/'
}],
files: [
'css/styles-m',
'css/styles-l'
],
dsl: 'less'
},
backend: {
area: 'adminhtml',
name: 'Magento/backend',
locale: 'en_US',
files: [
'css/styles-old',
'css/styles'
],
dsl: 'less'
}
};
Copy link

ghost commented Feb 1, 2018

How does this work when you deploy to production? Do the transpiled files get committed as well?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment