Last active
October 26, 2020 20:55
-
-
Save SilentImp/d440f2805787d68f3aa5cc4f9fca4200 to your computer and use it in GitHub Desktop.
How to configure Magento 2 to transpile es6
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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; | |
} | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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' | |
} | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
How does this work when you deploy to production? Do the transpiled files get committed as well?