“是在下输了”To: Browserify

之前使用Gulp组织项目并且使用Browserify打包，顺便查看了一下打包文件的大小，没压缩前就到了7M！

这真是request玩脱了的节奏，所以赶快看看自己都用了什么包，request模块占了好几兆大小，后端安装点什么包都无所谓了，可是前端要考虑文件大小，果然require也不能乱用的。然后乖乖卸载了request，安装了jQuery进行请求处理

出于很多前端库都有CDN，所以jQuery这种使用前端库就好，没必要打包到自己的bundle.js中，于是找了找，发现browserify-shim可以实现这样的需求

如下两种方式都是可以的

（一）配置文件写在package.json中

{
  ...
  "browserify": {
     "transform": [ "browserify-shim" ]
  },
  "browserify-shim": {
      "jquery": "global:$"
  },
  ...
}

在browserify的配置中引入browserify-shim转换器，然后再设置转化器规则，意思为定义一个jquery变量，它就是global:$的别名，这样，在前端中就可以通过script标签来引入CDN的jQuery，browserify-shim并不知道哪里会引入这个包

然后在程序中通过如下方式引入

var $ = require('jquery');

就可以像在前端一样使用$来操作了，有一个问题需要注意

当引入其它包中包含jquery包依赖的话，那么打包还是会包含jquery，这时需要将变量名替换个别的名字，require也换成相同的名称，来避免这种情况

引入本地jquery方法可以看看下边的参考[1]

（二）配置写在gulpfile.js中

如果项目是通过gulp组织的，那么也可以不用在package.json中添加配置

gulp.task("browserify",function(){
    return browserify({entries: 'js/app.jsx', extensions: ['.jsx'], debug: true})
        .transform('babelify', {presets: ['es2015', 'react']})
        .transform(browserifyShim, {
            shim:{
                "jquery":"global:$"
            }
         })
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('dist'));
});

这样也可以达到相同的效果

好了，感觉世界好美好

然而接下来，我像把React和ReactDOM也做同样处理的话，却出现了点问题

因为使用了Ant.design的UI，看了下这个组件库还是比较大的，其中就引入了react相关的包和jquery包

现在遇到的问题描述如下：

• 前端引入React的CDN，代码中不使用require引入react包，那么会提示"Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner)." 经过查询，见参考[2]，应该是多次引入React导致
• 前端不引入React的CDN，那么则报错React is not defined
• 暂时的解决办法是项目中使用require引入react和react-dom，那么是可以正常运行的
• 另外，无论require引入react还是不引入react，那么打包的文件大小都是相同的

请教过Ant.design的作者，他也说webpack可以解决

这个问题比较好的解决办法是换用webpack...

看来不按项目推荐的使用webpack果然出了问题很难搞定呢，看来解决这个问题的办法是解决Ant与Browser的兼容问题...Browserify-shim的文档也过了一遍了，感觉没找到类似的功能。索性不是太大的冲突，React 的包也不是很大，打包就打包吧，压缩后也可以接受

路过的大神要是知道Browserify-shim可以解决的话，还请留言相告，谢谢

参考：

• Configure a generic jQuery plugin with Browserify-shim?
• addComponentAsRefTo Invariant Violation