<div dir="ltr"><div><div><div><div><div><div><div><div><div><div><br></div>As part of my work on bug 15522 <<a href="https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=15522" target="_blank">https://bugs.koha-community.<wbr>org/bugzilla3/show_bug.cgi?id=<wbr>15522</a>>,
 I've been working with Preact (a React clone with a friendlier 
license). We've established that this needs ES6[1] in previous 
discussions on the mailing list and in IRC. From there, we found IE's 
many limitations meant we needed a transpiler[2] to to make use of these
 features.<br><br></div>Owen and I have been thinking about the easiest 
way to do this, and this is the lowest-friction process we've come up 
with to transpile ES6:<br><br></div>$ sudo apt-get install nodejs npm<br></div>$ sudo npm install -g yarn<br></div>$ yarn install<br></div>$ yarn build<br><br></div>Yarn
 is a somewhat faster version of npm, the de-facto JavaScript package 
manager. Normally, this would be a pointless addition, but the npm in 
the Debian repositories is 3 major versions out of date, and therefore 
not a great option. Many npm packages simply fail to install.<br><br></div>This is a constant problem with the JS 
packages in the Debian repos; most if not all of the tools that one 
might want either are completely unpackaged or woefully out of date. 
Packaging them ourselves means working our way through a number of 
dependencies (see [3] for an example). Any frontend build process worth 
our time cannot solely use packages from the upstream repos.<br><br></div>That aside, this build process will use Gulp, Browserify and Babel to take any files in koha-tmpl/intranet-tmpl/prog/<wbr>js/src, and compile them into a matching file in koha-tmpl/intranet-tmpl/prog/<wbr>js/built . This means that any new files will not have to be manually whitelisted.<br><br></div>You can see a working example at <a href="https://github.com/pianohacker/koha">https://github.com/pianohacker/koha</a>, branch bz15522. I'm currently committing the built versions of the files, but this is purely for convenience of prototyping. The page in question is admin/<a href="http://policy.pl">policy.pl</a>, and the relevant code is at .../prog/js/src/admin/policy.js .<br><div><div><div><div><div><div><div><div><div><div><div><div><br></div><div>[1]
 ECMAScript 6, a semi-recent version of JavaScript with a large number 
of new features, including a nice class syntax, arrow functions, and 
destructuring assignment.<br></div><div>[2] A tool that transforms ES6 
syntax (and the JSX syntax extension used by (P)react) into something 
that can be run by older browsers, including IE.<br>[3] <a href="https://wiki.debian.org/Javascript/Nodejs/Tasks/gulp" target="_blank">https://wiki.debian.org/<wbr>Javascript/Nodejs/Tasks/gulp</a></div></div></div></div></div></div></div></div></div></div></div></div><br clear="all"><br>-- <br><div class="gmail_signature">Jesse Weaver</div>
</div>