browserify / browserify/factor-bundle

Factor-bundle and browserify-shim don't play well together

Abierto
#59 7 comentarios 0 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
JavaScript
Estrellas
397
Forks
24
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

We were using browserify with browserify-shim to be able to use jQuery with a few plugins. So far so good. At this time we were creating another bundle for dependencies common across all pages, manually specifying them.

We then discovered and decided to use factor-bundle to factor common dependencies in a better way. The result was very good in terms of file size, but shims provided by browserify-shim disappeared. Since jQuery and its plugins are used in several pages, they're successfully factored out with factor-bundle, but they're produced without the shims. The problem is that jQuery plugins rely in `window.jQuery` that's no more available since there's no more shim.

We ended up `require`ing jQuery manually in the HTML and expose it, with `var jQuery = require("jquery")`. We would love factor-bundle to work with browserify-shim (or the opposite, whatever).

My understanding is that since factor-bundle is a plugin that act at the bundle level, it may not call it properly. But in our setup, it successfully apply the `reactify` transform (we use React.js with JSX syntax). So I suppose it's not a problem of factor-bundle not using transforms at all, but a specific incompatibility between factor-bundle and browserify-shim. However I couln't determine the problem precisely since I'm not familiar at all with the internals of those modules.

For reference in case it helps, here are relevant parts of our package.json and gulpfile (some parts are skipped to focus, it may look inconsistent/weird) :

**package.json**

``` json
"browserify": {
"transform": [
"reactify",
"browserify-shim"
]
},
"browser": {
"jquery": "./node_modules/jquery/dist/jquery.js",
"twitter-typeahead": "./node_modules/typeahead.js/dist/typeahead.bundle.js",
"magnific-popup": "./node_modules/magnific-popup/dist/jquery.magnific-popup.js"
},
"browserify-shim": {
"jquery": "$",
"slick-carousel": {
"depends": [
"jquery"
]
},
"twitter-typeahead": {
"depends": [
"jquery"
]
},
"magnific-popup": {
"depends": [
"jquery"
]
}
}
```

**gulpfile.js**

``` js
function browserifyPages() {
var pages = fs.readdirSync("./pages");

var b = browserify(pages.map(function (p) {
return "./pages/" + p;
}), BROWSERIFY_ARGS);
b.require("jquery");

b = minifyBundle(b); // using minifyify
return b.plugin("factor-bundle", {outputs: pages.map(function (p) {
return JS_DST_DIR + "/" + p;
})});
}

function browserifyCommonJs() {
var b = browserify("./common/header.js", BROWSERIFY_ARGS);
b.external("jquery");
return minifyBundle(b);
}
```

Hope this helps identify the problem. Thanks in advance.

(Let me ping browserify-shim people : @thlorenz and @bendrucker. In case I shouldn't, sorry guys !)

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Línea de trabajo

Comienza con package.json y gulpfile.js, luego sigue el punto de entrada del plugin de factor-bundle y el manejo de la dependencia jquery por parte de browserify-shim. Reproduce las salidas de factor-bundle del setup mostrado de pages/common y verifica que los plugins de jquery conserven window.jQuery sin el require manual de HTML.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
javascript, jquery, react
Área
build-system, tooling
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
25/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.