antsmartian / functional-es8

Contains code and snippets for Functional Programming in Javascript.
90 stars 67 forks source link

Missing/outdated information on how to transpile javascript code #1

Open gravityFlower opened 6 years ago

gravityFlower commented 6 years ago

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:
    babel@6.23.0: 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 babel-cli@6.26 - 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 babel-preset-env@1.6 - 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)
antsmartian commented 6 years ago

Thanks ! We will definitely add this!