[#19650] - [4.0] Feature/compile es6
- Fixed in Code Base
- 20 Feb 2018
- Medium
- Build: 4.0-dev
- # 19650
- Diff
- dneukirchen:feature/compile-es6
- Pending hound Hound is busy reviewing changes... Details
- Pending continuous-integration/drone/pr this build is pending Details
User tests: Successful: Unsuccessful:
Summary of Changes
Adds a script that compiles es6 down to es5 using babel-core.
This PR is part of a javascript modernization plan. See #19643 for more details.
The next step is to wire this up with the other build scripts (and refactor them).
When this PR gets merged, we write the es6 code in the file /path/to/lib.es6.js which then gets compiled into es5 /path/to/lib/lib.js (and depending on the result of #19637 also into /path/to/lib.min.js).
Testing Instructions
Create a javascript file anywhere in the project and name it whatever.es6.js
Write es6 javascript i.e: [1, 2, 3, 4, 5].map(num => num * 2);
Run npm install
Run node build/build-modules-js/compile-es6.js
Expected result
See whatever.js file created. This is the compiled es5 version of your es6 file and can be used in all supported browsers.
Documentation Changes Required
No changes, but this definitely needs documentation.
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | JavaScript Repository |
| Title |
|
||||||
So when all of this gets approved we write the code in the file /media/plg_media-action_crop/js/crop.es6.js which then gets compiled into /media/plg_media-action_crop/js/crop.js and /media/plg_media-action_crop/js/crop.min.js? I guess this would be good to know for other devs what the consequences are of this pr while we develop then the core in the future.
So when all of this gets approved we write the code in the file /media/plg_media-action_crop/js/crop.es6.js which then gets compiled into /media/plg_media-action_crop/js/crop.js and /media/plg_media-action_crop/js/crop.min.js?
In short: Yes.
| Labels |
Added:
?
|
||
Added an example to further explain the process.
Please follow the last 3 commits.
- First i just copied admin.login.js to admin.login.es6.js.
- Then i used my IDE to auto-fix the .es6.js file, so that it follows our new javascript code styles. Notice that i did not manually change anything here (eslint --fix or IDE with eslint support will do most of the work).
- Lastly i executed the new compiler (
node build/build-modules-js/compile-es6.js), which updated the contents of the original admin.login.js.
As you can see:
- its not required (but strongly recommended) to use es6 features in the *.es6.js files.
- the compiled file for the user is valid es5 and we can continue to use it
I'm good with this in principle
RTC?
As discussed with @dgt41 i reverted the example code so that we can merge this one while working on https://github.com/joomla-projects/joomla-es6
I tested this PR successful. My *.es6.js files have been compiled to *.js and the text "PLEASE DO NOT MODIFY THIS FILE. WORK ON THE ES6 VERSION.
+OTHERWISE YOUR CHANGES WILL BE REPLACED ON THE NEXT BUILD" was standing in the first line of the file.
@astridx please mark your Test as successfully:
- open Issue Tracker
- Login with your github-Account
- Click on blue "Test this"-Button above Authors-Picture
- mark your Test as successfully
- hit "submit test result"
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/19650.
@dneukirchen if you fix conflicts here i'll get it merged :)
Resolved. Thank you.
@wilsonge resolved the merge conflicts... again...
https://www.youtube.com/watch?v=oJDGcxAf9D8
(waiting for merge here, so that we can safely start the work in projects/es6 repo)
mbabker
- | Status | Pending | ⇒ | Fixed in Code Base |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2018-02-20 20:07:49 |
| Closed_By | ⇒ | mbabker |
Does it create also a ES5 none minified version? If not, this would mean then that debug mode would only work with ES6 compatible browsers?