node.js - How to exclude library files from browserify bundle -
i want avoid cluttering distribution bundle library files , use separate script tags them in html.
one way this...
m1.js
module.exports = "first module"; m2.js
module.exports = "second module"; cnd-m1.js
var m1 = "first module"; main.js
var m1 = this.m1 || require("./src/m1"); var m2 = require("./src/m2"); console.log(m1); console.log(m2); index.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>browserify test</title> </head> <body> <script type="text/javascript" src="src/cdn-m1.js"></script> <script type="text/javascript" src="dist/bundle.js"></script> </body> </html> where cdn-m1.js library example.
the way figure out make work put short-circuit fallback in require statement , --ignore file in build.
in package.json
"scripts": { "build-ignore": "browserify ./main.js -i ./src/m1.js > ./dist/bundle.js", "build": "browserify ./main.js > ./dist/bundle.js" }, using build-ignore script, m1 module stubbed in bundle making smaller (assuming 50k line library) , falls on cdn-served version.
bundle.js
function e(t, n, r) { function s(o, u) { if(!n[o]) { if(!t[o]) { var = typeof require == "function" && require; if(!u && a)return a(o, !0); if(i)return i(o, !0); var f = new error("cannot find module '" + o + "'"); throw f.code = "module_not_found", f } var l = n[o] = {exports: {}}; t[o][0].call(l.exports, function(e) { var n = t[o][1][e]; return s(n ? n : e) }, l, l.exports, e, t, n, r) } return n[o].exports } var = typeof require == "function" && require; for(var o = 0; o < r.length; o++)s(r[o]); return s })({ 1: [function(require, module, exports) { // browserify creates stub "./src/m1" }, {}], 2: [function(require, module, exports) { var m1 = this.m1 || require("./src/m1"); var m2 = require("./src/m2"); console.log(m1); console.log(m2); }, {"./src/m1": 1, "./src/m2": 3}], 3: [function(require, module, exports) { module.exports = "second module"; }, {}] }, {}, [2]); is there better way achieve this?
the answer use browserify-shim in order figure out, created more complicated scenario fake lib file (main-a.js) 2 sub-dependencies (m1.js , m2.js) , made app (main-b.js) dependent on fake lib.
i rolled main-a.js stand-alone bundle exposed 1 global called fakelib , used separate script tag in index.html load that.
i used browserify-shim build isomorphic version of app required main-a.js in node, used window.fakelib in browser.
using app:
/** * main-b.js */ require("./src/main-a").say(); this not work:
"browserify-shim": { "./src/main-a": "fakelib" }, but does:
"browserify-shim": { "./src/main-a": "global:fakelib" }, you must use global: think may due bug in browserify because doesn't agree browserify handbook
index.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>browserify test</title> </head> <body> <div style="white-space: pre;" id="output"></div> <script type="text/javascript" src="dist/main-a-lib-pretty.js"></script> <script type="text/javascript" src="dist/bundle-b.js"></script> </body> </html> fake library...
/** * m1.js */ exports.say = "first module"; .
/** * m2.js */ exports.say = "second module"; .
/** * main-a.js */ var m1 = require("./src/m1"); var m2 = require("./src/m2"); exports.say = function() { function op(t){ this.document ? document.getelementbyid("output").textcontent += t + "\n" : console.log(t); } op(m1.say); op(m2.say); }; package.json fake lib. makes standalone package exposes fakelib
{ "name": "browserify-nightmare", "version": "1.0.0", "main": "main-a.js", "dependencies": { }, "devdependencies": { "browserify-shim": "^3.8.12" }, "scripts": { "build-lib": "browserify ./main-a.js -s fakelib > ../dist/main-a-lib-pretty.js", "build-lib-pretty": "browserify ./main-a.js -s fakelib | js-beautify > ../dist/main-a-lib-pretty.js" }, "author": "cool.blue", "license": "mit", "description": "" } fake app
/** * main-b.js */ require("./src/main-a").say(); package.json uses browserify-shim return fakelib require("./src/main-a") in browser acts normal commonjs module in node.
{ "name": "browserify-nightmare", "version": "1.0.0", "main": "main-b.js", "browserify-shim": { "./src/main-a": "global:fakelib" }, "browserify": { "transform": "browserify-shim" }, "devdependencies": { "browserify-shim": "^3.8.12" }, "scripts": { "build-b": "browserify ./main-b.js > ./dist/bundle-b.js", "build-b-pretty": "browserify ./main-b.js | js-beautify > ./dist/bundle-b.js" }, "author": "cool.blue", "license": "mit", "description": "" } this answer super-helpful
Comments
Post a Comment