如何在一行中{Babelify（使用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

......我尝试过很多其他变种。

更新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

......这让我想知道某些事情是否正在悄悄出错，并且警惕正在打破as described in this GitHub issue。

Answer 1

更改选项参数的顺序。那对我有用。

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