eugeneware / debowerify

A browserify transform to enable the easy use of bower components in browserify client javascript projects. This can be used in conjunction with deamdify to require AMD components from bower as well.
493 stars 51 forks source link

debowerify seems to prevent `.external()` from working #62

Closed peter-mouland closed 8 years ago

peter-mouland commented 9 years ago

I have a tiny project as an example, with a simple build process. https://github.com/peter-mouland/debowerify-test

Without debowerify transform, the build creates 2 separate bundles (vendor.js and app.js ). With debowerify transform, the contents of vender.js is now included within app.js :(

Have you seen this problem before? I have been going round in circles and not found any related issues on the inter-web.

peter-mouland commented 9 years ago

have you been able to confirm this issue?

eugeneware commented 9 years ago

Hi Peter, due to ongoing health problems I will unable to look at this for a few weeks at least. however, please seek guidance from the many other debowerify contributors

On 30 Apr 2015, at 9:14 pm, Peter Mouland notifications@github.com wrote:

have you been able to confirm this issue?

— Reply to this email directly or view it on GitHub.

peter-mouland commented 9 years ago

hey, any other contributors see this issue?

peter-mouland commented 9 years ago

any contributor able to spend 15mins forking my test, going through the readme and confirming/throwing out my issue?

peter-mouland commented 8 years ago

Can we assume this project is to be considered surpluss to requirements? I'm am deleting my example app as it has been 6 months without anyone taking a peek.

readme.md

Debowerify Test

Adding debowerify transform into build.js means the app.js bundle no longer excludes the external files

Without debowerify

With debowerify

package.json

{
  "name": "tester",
  "version": "0.0.0",
  "description": "Example package.json. Feel free to copy!",
  "main": "src/scripts/tester.js",
  "scripts": {
    "build-vendor": "browserify -t debowerify -e node_modules/d3/d3.js -e bower_components/dom-delegate/lib/delegate.js -o _site/scripts/cli.vendor.js",
    "build": "browserify -t debowerify -r ./src/scripts/app.js -x node_modules/d3/d3.js -x bower_components/dom-delegate/lib/delegate.js -o _site/scripts/cli.app.js"
  },
  "devDependencies": {
    "browserify": "^9.0.3",
    "d3": "^3.5.5",
    "debowerify": "^1.2.0",
    "watchify": "^2.6.2"
  }
}

bower.json

{
  "name": "tester",
  "description": "tester",
  "main": "src/scripts/tester.js",
  "ignore": [
    "**/*",
    "!src/**/*"
  ],
  "dependencies": {
    "dom-delegate": "~2.0.3"
  }
}

build.js

var browserify = require('browserify');
var debowerify = require('debowerify');
var path = require('path');
var fs = require('fs');

var vendorBundle = [
    {file:'./bower_components/dom-delegate/lib/delegate.js', expose:'dom-delegate'},
    'd3'
]

function Browserify(location, destination, options){
    this.location = location;
    this.destination = destination;
    this.buildApp();
    this.buildVendor();
}

Browserify.prototype.buildVendor = function(){
    var self = this;
    var v_ws = fs.createWriteStream(self.destination.replace('app.js','vendor.js'));
    browserify()
        //.transform('debowerify');
        .require(vendorBundle)
        .bundle()
        .pipe(v_ws)
};

Browserify.prototype.buildApp = function() {
    var b_ws = fs.createWriteStream(this.destination);
    var b = browserify({
        entries: this.location,
        bundleExternal: false
    });
    //b.transform('debowerify');
    b.external(vendorBundle.map(function (v) {
        if (typeof v === 'string') return v;
        return v.expose;
    }));
    b.require(this.location, {expose: 'app'});
    b.bundle().pipe(b_ws);
};

new Browserify('./src/scripts/app.js', './_site/scripts/app.js');

scripts/app.js

var d3 = require('d3');
var dd = require('dom-delegate');

function Main(){
    this.d3 = d3;
    //this.dd = dd;
}

Main.prototype.sum = function(args){
    var total = 0; args = args || [];
    args.forEach(function(int){
        total += int;
    });
    return total;
};

Main.prototype.write = function(args){
  document.getElementById('demo-functional').innerHTML = this.sum(args);
};

module.exports = Main;
peter-mouland commented 8 years ago

closing this due to lack of interest