dk00 / livescript-next

Enable latest ES features for LiveScript

Home Page:https://lsn.netlify.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Clarify usage instructions

danielo515 opened this issue · comments

Hello,

First of all, thank you very much for this amazing project. It is what LS needs, from my perspective.
However, the entry point for a total newcomer is a bit tough.
I've been reading documentation a couple of times and I'm still not clear, and the fact that examples are on LS is not helping either.
Seems that I have to write a compiler file, with a babel options inside it ? This is a bit weird knowing that normally you use babel by just writing a babelrc file and then just executing the cli.
Even if you deduct or understand that (which is not obvious) there are no instructions about how to compile files or how to output them somewhere.

Thanks.

Finally I figured it out.
I'm posting here the instructions if anyone is interested. I can even make a PR if that is desired by @dk00

For compiling we will need the following:

  • .babelrc: This is more common for babel users, so we will use this
  • package.json: Here wi will add the necessary scripts for compiling (very convenient)
  • ./src: This is a folder where wi will put our livescript files

First, paste the following on your .babelrc file:

{
  "presets": [ "stage-0" ],
  "parserOpts": {
    "parser": "livescript-next"
  },
  
  "plugins": [
    ["transform-es2015-modules-commonjs-simple", {"noMangle":true}]]
}

Some notes:

  • I'm not sure why stage0 is used, on my test it was not required
  • I'm using transform-es2015-modules-commonjs-simple because I like it more, you can use the regular transform-es2015-modules-commonjs if desired

Add the following scripts to your package.json:

  "scripts": {
    "build": "NODE_ENV=production babel ./src --extensions '.ls' -d lib",
},

You can have as many scripts as you want. You can also omit the NODE_ENV variable if you don't need it (usually when production mode some optimizations are applied)

Now just put as many livescript files as you may want on the src folder, and execute npm run build. A new folder called lib should be created and it should contain the compiled .js files.
Of course make sure you have all the required dependencies installed:

  • livescript
  • livescript-next
  • babel-plugin-transform-es2015-modules-commonjs-simple or babel-plugin-transform-es2015-modules-commonjs
  • babel-cli
  • babel-core

If you want an example repository check here:
https://github.com/danielo515/packages/tree/master/packages/fp-min

Hope this helps

Regards