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

git repo


Comments

Post a Comment

Popular posts from this blog

java - Static nested class instance -

-
this question has answer here: java inner class , static nested class 23 answers i came across in java, know static nested class why create instance of 'static'. isn't whole idea of 'static' use without instance? understand concept of inner classes, why (and frankly how possible to) create 'instance' of 'static' member @ ? why this: 1- outerclass.staticnestedclass nestedobject = new outerclass.staticnestedclass(); 2- nestedobject.anestedclassmethod(); and not this: 1- outerclass outerinstance=new outerclass(); 2- outerinstance.staticnestedclass.anestedclassmethod(); use on inner classes, keyword static indicates can access inner class without instance of outer class. for example: public class outer { public static class inner { /* code here. */ } } with construction, can create instance of inn
Read more

c# - Bluetooth LE CanUpdate Characteristic property -

-
i building xamarin.forms cross platform mobile app, uses monkey.robotics bluetoth low energy functionality. connecting mbed based implimentation of custom gatt service . in xamarin c#, triggers characteristic. canupdate property in monkey.robotics? this standard example c# based on: if (characteristic.canupdate) { characteristic.valueupdated += (s, e) => { debug.writeline("characteristic.valueupdated"); device.begininvokeonmainthread( () => { updatedisplay(characteristic); }); isbusy = false; // spin until first result received }; isbusy = true; characteristic.startupdates(); } this has been working, since changed own custom gatt service connecting to, canupdate property false. property , how triggered? me debugging gatt service code. thanks monkey.robotics open sour
Read more

JavaScript - Replace variable from string in all occurrences -

-
ok, know if have character '-' , want remove in places in string javascript, ... someword = someword.replace(/-/g, ''); but, when applying array of characters, s not working ... const badchars = ('\/:*?"<>|').split(''); let filename = title.replace(/ /g, '-').tolocalelowercase(); (let item = 0; item < badchars.length; item++) { // below not work global '/ /g' filename = filename.replace(/badchars[item]/g, ''); } any ideas? /badchars[item]/g looks badchars , literally, followed i , t , e , or m . if you're trying use character badchars[item] , you'll need use regexp constructor, , you'll need escape regex-specific characters. escaping regular expression has been well-covered . using that: filename = filename.replace(new regexp(regexp.quote(badchars[item]), 'g'), ''); but , don't want that. want character class: let filename = title.replac
Read more