functional-es8 icon indicating copy to clipboard operation
functional-es8 copied to clipboard

Missing/outdated information on how to transpile javascript code

Open gravityFlower opened this issue 6 years ago • 1 comments

This is just in case anyone not versed in the handling of node gets to read this: here is how to transpile your es6|es2015 code into javascript code supported by older browsers ($ represents the terminal input).

Used versions: Node ($node --version): v8.10.0 (use nvm or maybe a docker container for that specific version or try to reproduce with a newer version) npm ($npm --version): 5.8.0

  1. $npm init initializes a new package.json which contains the neccessary information for your project (fill in as neccessary)
  2. i went with a local installation for the neccessary packages, so therefore i didn't use the -g (--global) option. The installation of the package babel is not required anymore:
[email protected]: In 6.x, the babel package has been deprecated in favor of babel-cli. Check https://opencollective.com/babel to support the Babel maintainers

2a. $npm install --save-dev [email protected] - this installs the package locally for your project and lists the package with a version beginning with ^6.26 in the devDependencies section of your package.json (^ coming from regular expressions means that the version number has to start with 6.26, which means the major version is locked a 6 and the minor version is locked at 26; fix-number is the latest available at the time of installation. Mine was 0 (6.26.0), yours can be too but can also be 3 or 5). 2b. $npm install --save-dev [email protected] - this package is neccessary to transpile your code into a version compatible to es5, since from babel version 6 onward, presets are no longer included. info1 info2 3. Create a .babelrc file in the same directory as the package.json with the content: {"presets":["env"]} 4. In your package.json place the following lines in the script section(remove the 2nd line with the explaining comment):

"scripts": {
    "transpile": "./node_modules/.bin/babel script.js --out-file compiled-script.js"
     // "<command to call>": "<path/to/babel-cli" <input.script> --out-file <location.of.output>"
  },

You can choose any command you want instead of the transpile. You might probably want to adapt the out-file path. Also check if your input script (in my case script.js) matches the desired script you want to be compiled. 5. from your console|terminal call $npm run transpile (or the command you have chosen)

gravityFlower avatar Mar 26 '18 22:03 gravityFlower

Thanks ! We will definitely add this!

antsmartian avatar Sep 13 '18 06:09 antsmartian