ES6 Transpile in package.json

Question

Happy Thanksgiving All!

I'm running into a situation and I'm hoping someone can help me out. I have a package.json file, and I'm trying to transpile es6 but not exactly sure what I'm doing wrong. I have a JS Fiddle of my current package.json: http://jsfiddle.net/jdubba/nnhytbdr/ but mainly, i have this line here:

{
  "name": "react-starter",
  "browserify": {
    "transform": [
      "reactify"
    ]
  },
  "scripts": {
...

From what I've been reading, in the "browserify" object, under "transform", i'm supposed to be able to do something like:

{
  "presets": ["es2015", "react"]
}

But i'm doing this incorrectly. I'm going off of what I found here: https://github.com/andreypopp/reactify

When I change my transform array to:

"transform": [
      ["reactify", {"es6": true}]
    ]

and then add an import statement into my code, I get the following error:

Parse Error: Line 2: Illegal import declaration while parsing file:

Which then inevitably sent me down another path of findings:

https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=Parse+Error+Illegal+import+declaration+while+parsing

but I haven't found anything to fix my issue, and I feel like i'm going in circles. This illegal import declaration error is pretty common, but I'm interested in a solution that works without having to use grunt or gulp (which is mainly what I've been seeing). Can anyone lend a hand?

Answer 1

I ended up making the following change to my package.json:

"browserify": {
    "transform": [
      "babelify"
    ]
  },
...

I was not able to get babelify v7.2.0 to work with import/export, so switching to v6.1.2 gave me the results I wanted.