Skip to content

Babel/ES2015 Support - #58

Merged
bcoe merged 4 commits into
masterfrom
babel
Nov 29, 2015
Merged

bcoe merged 4 commits into
masterfrom
babel

Conversation

@bcoe

@bcoe bcoe commented Nov 26, 2015

Copy link
Copy Markdown
Member

with the --babel flag, nyc is the easiest way to add ES2015 support to your project:

  1. install the appropriate babel dependencies for your project (npm i babel-core babel-preset-es2015 --save).
  2. create a .babelrc file:
{
  "presets": ["es2015"]
}
  1. install nyc, and run it with the --babel flag:
nyc --babel mocha

nyc uses source-maps to map coverage information back to the appropriate lines of the pre-transpiled code:

screen shot 2015-11-26 at 1 57 47 pm

This is a pretty big change, and I would love some help with the code review, you can try it out in your project by running:

npm i nyc@alpha --save-dev

I hope it solves the problems folks were having with nyc + babel:

CC: @Janpot, @shannonmoeller, @lfilho, @sindresorhus

@shannonmoeller

Copy link
Copy Markdown

Fantastic! Thanks!

@bcoe bcoe changed the title Babel Babel/ES2015 Support Nov 26, 2015
@sindresorhus

Copy link
Copy Markdown
Member

// @jamestalmage @vdemedes

@jamestalmage

Copy link
Copy Markdown
Member

// @novemberborn

@shannonmoeller

Copy link
Copy Markdown

Couple things:

  1. I had to add babel-polyfill to my test.js file. Is that expected?
  2. nyc's version of Istanbul is out-of-date. I manually bumped it to 0.4.1 and it worked out-of-the-box.

@bcoe

bcoe commented Nov 28, 2015

Copy link
Copy Markdown
Member Author

@shannonmoeller is babel-polyfill an alternative to using .babelrc with an appropriate preset? I think that this is how babel recommends doing things now?

Things worked well otherwise? You'd be happy to see this land?

@shannonmoeller

Copy link
Copy Markdown

Ah. It's because I'm using async/await in my test file.

I'd absolutely love to see this land. Once ava supports Babel 6, I can switch from blue-tape and enter node testing nirvana.

Thanks for your work on this! 👏

@bcoe

bcoe commented Nov 28, 2015

Copy link
Copy Markdown
Member Author

@shannonmoeller do you think that nyc should make an attempt to require babel-polyfill? If this is a dependency in the package.json, is it a general rule that we will always want to include it?

@shannonmoeller

Copy link
Copy Markdown

As long as it's clearly documented as a feature of the --babel flag, I think that would be okay. Depends on how many assumptions you're comfortable making.

What about having a --require config/flag similar to mocha's?

// package.json
{
  "config": {
    "nyc": {
      "require": ["babel-polyfill"]
    }
}

@bcoe

bcoe commented Nov 28, 2015

Copy link
Copy Markdown
Member Author

@shannonmoeller I like this concept for the API much better than having a --babel flag \o/

see: 1735bfd

And let me know if this does the trick for you:

nyc --require babel-polyfill --require babel-core/register

@shannonmoeller

Copy link
Copy Markdown

Now that's beautiful. This is working perfectly for me:

{
  "name": "foo",
  "version": "1.0.0",
  "main": "src/index.js",
  "scripts": {
    "coveralls": "nyc report -r text-lcov | coveralls",
    "test": "nyc -r html -r text blue-tape test/*.js",
    "watch": "watch 'npm run test' src test -d"
  },
  "devDependencies": {
    "babel-polyfill": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-stage-0": "^6.1.18",
    "babel-register": "^6.2.0",
    "blue-tape": "^0.1.11",
    "coveralls": "^2.11.4",
    "nyc": "git+https://github.com/bcoe/nyc.git#1735bfdc",
    "watch": "^0.16.0"
  },
  "config": {
    "nyc": {
      "require": [
        "babel-register",
        "babel-polyfill"
      ]
    }
  }
}

@shannonmoeller

Copy link
Copy Markdown

I really like how this change makes this a bring-your-own-transpiler coverage tool. Should work just as easily with coffeescript and typescript now.

@Janpot

Janpot commented Nov 28, 2015

Copy link
Copy Markdown

@bcoe Yes, this:

nyc -r babel-core/register npm test !

👍

@joews

joews commented Nov 28, 2015

Copy link
Copy Markdown

I get SyntaxError: Unexpected token import running $ npm test with package.json:

{
  "scripts": {
    "test": "nyc tape \"./test/**/*.js\" | faucet",
  },
  "config": {
    "nyc": {
      "require": [
        "babel-register",
        "babel-polyfill"
      ]
    }
  },
  "devDependencies": {
    "babel-cli": "^6.2.0",
    "babel-core": "^6.2.1",
    "babel-preset-es2015": "^6.1.18",
    "faucet": "0.0.1",
    "istanbul": "^0.3.17",
    "lodash": "^3.10.0",
    "nyc": "git+ssh://git@github.com:bcoe/nyc.git#babel",
    "pegjs": "^0.8.0",
    "sql.js": "^0.2.21",
    "tape": "^4.0.1"
  }
}

babel-runtime seems to be required because I need regeneratorRuntime.

With this setup, however, $ npm run coverage works as expected.

"scripts": {
    "test": "babel-node $( which tape) \"./test/**/*.js\" | faucet",
    "coverage": "nyc npm test --reporter lcov",
  }

Can you see what I'm doing wrong in the former case?

@bcoe

bcoe commented Nov 28, 2015

Copy link
Copy Markdown
Member Author

@jwhitfieldseed is the code your instrumenting open-source, mind linking me to the project and I'll take a look?

@Janpot did you give that a shot with a couple of your projects? I'd like to publish this pretty soon 👍

@joews

joews commented Nov 28, 2015

Copy link
Copy Markdown

@bcoe nvm, rm -rf node_modules && npm i did the trick 😄

👍 for config.nyc.require in package.json.

@joews

joews commented Nov 28, 2015

Copy link
Copy Markdown

@bcoe actually, scratch that. This setup works with node@5.1.0, fails with node@4.1.1 (after rm -rf node_modules && npm install && npm test):

https://github.com/jwhitfieldseed/prequel/blob/master/package.json
https://travis-ci.org/jwhitfieldseed/prequel

Error with node 4.1.1:

(function (exports, require, module, __filename, __dirname) { import test from "tape";
                                                              ^^^^^^
SyntaxError: Unexpected reserved word
...

@shannonmoeller

Copy link
Copy Markdown

@jwhitefieldseed Looks like you need to npm i -D babel-register babel-polyfill

Edit: Corrected typo in install command.

@joews

joews commented Nov 28, 2015

Copy link
Copy Markdown

@shannonmoeller That didn't fix it, I'm afraid.

At first thought it was a problem with Babel 6 config rather than nyc interop, but, on Node 4, this npm test script works:

"babel-node $(which tape) \"./test/**/*.js\" | faucet"

And this fails immediately with the above SyntaxError:

"nyc tape \"./test/**/*.js\" | faucet && nyc report --reporter text",

Both work on Node 5.

@joews

joews commented Nov 28, 2015

Copy link
Copy Markdown

@shannonmoeller Ah - babel-register, not babel-require. Should have realised that! Problem solved, sorry about the noise. nyc with Babel is looking excellent 👍

@shannonmoeller

Copy link
Copy Markdown

Yep! Sorry about the typo.

@bcoe

bcoe commented Nov 29, 2015

Copy link
Copy Markdown
Member Author

@shannonmoeller @jwhitfieldseed, given that you now explicitly specify a list of libraries to require, perhaps I should stop using try-require and let it simply throw? I think this would have helped bring out this typo sooner?

@shannonmoeller

Copy link
Copy Markdown

@bcoe Sounds good to me.

@joews

joews commented Nov 29, 2015

Copy link
Copy Markdown

@bcoe 👍 I would have caught the difference between Node 4 and Node 5 (or as I now realise, npm 2 vs npm 3) immediately with an early Cannot find module 'babel-register'.

bcoe added a commit that referenced this pull request Nov 29, 2015
@bcoe
bcoe merged commit 66584ee into master Nov 29, 2015
@bcoe

bcoe commented Nov 30, 2015

Copy link
Copy Markdown
Member Author

@mindmelting just published a hot-fix of nyc, nyc@4.0.1 which should solve this problem for you.

Let me know if it does the trick?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants