Coder Social home page Coder Social logo

bundle-collapser-uniqueness-failure's Introduction

bundle-collapser-uniqueness-failure

Created to demonstrate bundle-collapser#20, in which non-unique relative pathnames lead to non-unique bundle IDs, which leads to incorrect requires.

To reproduce

Setup

Setup is two directories containing index files with similar require('./component') statements.

├─ index.js
├─ a
│  ├─ index.js
│  └─ component.js
└─ b
   ├─ index.js
   └─ component.js

baseline

Correct behavior using browserify alone:

$ browserify index.js > bundle.js
$ node bundle.js 
aVal: a
bVal: b

CLI

Using bundle-collapser as a command line plugin. Values are incorrect:

$ browserify -p bundle-collapser/plugin index.js > bundle.cli.js
$ node bundle.cli.js 
aVal: a
bVal: a

API plugin usage

Using bundle-collapser as a script plugin is (obviously?) the same:

// scripts/plugin.js

var browserify = require('browserify');
var collapse = require('bundle-collapser/plugin');
var fs = require('fs');

browserify('index.js', {plugin: [collapse]}).bundle()
  .pipe(fs.createWriteStream('bundle.plugin.js'));
$ node scripts/plugin.js
$ node bundle.plugin.js
aVal: a
bVal: a

API function usage

Running it as a function directly leads to the same incorrect result:

// scripts/api.js

var browserify = require('browserify');
var collapse = require('bundle-collapser');
var fs = require('fs');
var toString = require('stream-to-string');

toString(browserify('index.js').bundle(), function (err, str) {
  collapse(str).pipe(fs.createWriteStream('bundle.api.js'));
});
$ node scripts/api.js
$ node bundle.api.js
aVal: a
bVal: a

bundle-collapser-uniqueness-failure's People

Contributors

rreusser avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.