如何在一行中(使用React)、Browserify、Uglify和Watchify

Question

我想避免使用Gulp或Grunt (有人对此感到厌倦吗？)然后转身

/src
    /component
        index.jsx
    index.jsx

转到

/dist
    bundle.min.js

使用可以放在package.json文件中的单行命令：

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

我一直在尝试使用babel、babelify、browserify和watchify命令行的变体，但都没有效果。下面是我尝试过的一个例子：

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

...and还有很多其他的变体我也试过了。

更新1

我快到了。

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

这是可行的，但它不会检测到对src/components/index.jsx的更改。

更新2

如果我将(大型) React库排除在包之外，那么所有操作都正常：

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

...which让我怀疑是否有什么事情在悄悄地出错，而监视正在破坏如本GitHub问题中所述。

Answer 1

更改选项参数的顺序。那时候对我起作用了。

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