0

I want to avoid using Gulp or Grunt (anyone else tired of those?) and turn

/src
    /component
        index.jsx
    index.jsx

into

/dist
    bundle.min.js

using a one-line command that I can put in my package.json file:

...
"scripts": {
  "build": "..."
...

I have been trying with variations of the babel, babelify, browserify, and watchify command lines to no avail. Here's an example of what I've tried:

watchify src/index.jsx -t [babelify [--presets es2015,react]] -v -o bundle.js

...and there are many other variations I've tried.

Update 1:

I'm close.

watchify -v --extension=.jsx -t [ babelify --presets [ es2015 react ] ]\
         -g uglifyify src/index.jsx -o bundle.js

This works, but it doesn't detect changes to src/components/index.jsx.

Update 2:

If I exclude the (large) React library from the bundle, then everything works:

watchify -v --extension=.jsx -t [ babelify --presets [ es2015 react ] ]\
         -g uglifyify --no-bundle-external src/index.jsx -o bundle.js

...which makes me wonder if something is quietly going wrong and watchify is breaking as described in this GitHub issue.

Seth
  • 6,514
  • 5
  • 49
  • 58
  • why not use webpack? there are a lot of tutorials and boilerplates using react with webpack, and without gulp, just use google with "react webpack boilerplate" or something like that. – andyrandy Nov 22 '15 at 22:23
  • Honestly I don't care what I use, as long as it fits on one line, and I don't have to jack with gulp files, grunt files, or config files. – Seth Nov 22 '15 at 22:24
  • Could it be better to split this into more npm script commands? – Christian Steinmann Nov 23 '15 at 11:11
  • I was never able to get this work. I switched to webpack and, although I still can't do things in one line, the configuration was a lot easier. – Seth Dec 03 '15 at 22:48

1 Answers1

0

Change the order of the option parameters. It worked for me then. 

watchify src/index.jsx -v -o bundle.js  -t [babelify [--presets es2015,react]]
Christian Steinmann
  • 1,156
  • 1
  • 11
  • 13