Well, we have been using Browserify 2.x for some time now. We are going through some refactoring so we want to try update to latest Browserify to diminish future leaps in versions.
Unfortunately something has changed in how external bundles are handled. In the old version we could simply tell Browserify which modules to keep out of the bundle and require them from another one - basically what is described here.
From the version 5.0.0 some big change in Browserify internals happened. Let's take for example this command. The debug module is NPM module.
browserify -r debug -o vendor.js
Running this command in Browserify#4, the output file would look like this:
require=(function... {
"debug":[function(require,module,exports){
module.exports=require('2Bvkwp');
},{}],
"2Bvkwp":[function(require,module,exports){
// actual code from debug module
},{}]
});
Now with the Browserify#5 it looks like this:
require=(function... {
1:[function(require,module,exports){
// actual code from debug module
},{}]
});
To complete the equation, I have simple file that contains require('debug') and this is bundled with command browserify -x debug -e index.js -o main.js. Internal dependency is set to undefined for the debug module, which is alright.
If you would look at the prelude.js file, there is logic that simply uses previously defined global require (stored in previousRequire variable) to find modules that are not defined within current bundle. BUT since vendor.js doesn't expose anything like debug module, it cannot succeed.
All I have been able to find is this line in the changelog:
hashing is gone so expose: true or explicit expose id is required for doing multi-export bundles
I am unable to find what does that actually means :(
You should able to create your vendor bundle like this:
browserify -r debug > vendor.js
And then create your application bundle like this:
browserify index.js -x debug > main.js
This works just fine (I'm using browserify#6.1.0).
Basically, even if require('debug'); won't work in the browser console, browserify can find the debug module in the vendor bundle as long as the bundles are loaded in the right order, i.e:
<script src="vendor.js"></script>
<script src="main.js"></script>
It doesn't have to expose the dependency to external code, only to other browserify bundles.
Related
I have a common npm module containing TypeScript which is an node module providing some classes and functionality. This module is packaged via browserify + tsify and also exports the declaration files and built with gulp.
I have another npm module using TypeScript which imports this module locally via file:../modulename and tries to use functionality from the first module. The second module is also packaged via browserify + tsify and built with gulp. The compilation of the second module works via npx tsc, but fails if I execute the gulp build file with the error message
Error: Cannot find module './AbstractClass' from 'folderInOtherModuleContainingTheJSFiles'
Interestingly it sometimes fails with this Class sometimes with another, so it seems there is also some kind of concurrent processing.
I extracted the failing code from my project and created a minimal example with this behavior here.
npm version: 5.6.0
node version: v9.5.0
For anybody who might come to this post and face the same error.
I opened an issue at tsify too, thinking it has something to do with the plugin, because npx tsc worked.
Luckily the issue has been resolved, although with a workaround. There seems to be a name collision which causes browserify to think that a require call, which is a variable, in the resulting bundle needs to be resolved, but can't. The workaround is uglifying the resulting bundle, so that the conflict does not happen. More details in the above linked issue.
I made a library, bundled it with browserify, put it here: https://github.com/cfv1984/two-ways and published a module from it.
The library as compiled works just fine in the browser, the package I made from it is unusable as you can see by installing it and having a test file like this:
var two = require('two-ways');
console.log("Two", two);
And running it through
browserify test.file.js > test.compiled.js
What am I doing wrong? The error message I get, Error: Cannot find module './../../util/makeGetter' from 'D:\o\puto\node_modules\two-ways'makes 0 sense in this context, because I don't actually have a file in there any more, but a bundle, which as far as I can tell browserify was OK with generating.
Any pointers?
Browserify was mis-packing the file after transmogrifying it through Babel, so I simply used Webpack to package with which made it self-consistent again and I can use it with browserify and/or webpack or any other bundling software without much issue.
I'm trying to follow this page https://github.com/feross/simple-peer
1) Install npm simple-peer (check)
2) create an html page: bundle.js is missing?
3) the next code window doesn't indicate what it is at all.
Is it the JS for the html file, or the code in node. no idea.. as browserify (if I understand correctly) allows you to use require() in the browser...
Can someone clarify?
The document given is a little incomplete and assumes you have knowledge of module bundling, which many people dont. Anyways, to get this working, you would have to use a module bundler (like browserify or webpack).
To get started, consider bootstrapping your app using this yeoman generator.
After bootstrapping your app, add the script given in the above documentation in the source file (in src/index.js), after installing dependancies with npm install
Run npm start
Open localhost:8080 and you should see the result you want.
bundle.js which is mentioned the the above module is the resultant javascript file after all node modules have been bundled into one browser compatible file.
I want to customize the Parse SDK. They provide source through an npm module, which makes it usable in node environments.
How can I compile this node module into a standalone parse.js script which will run as it is on a browser?
I tried using browserify as
browserify ./parse -o parse.js
but the parse.js it spits out is quite large and still contains node remanents: process and require commands. Although it executes without any error on browser, the browser cannot find Parse definition.
Found the correct way to compile the parse npm module into a browser script is to use:
browserify path/to/npm/parse --standalone parse > parse-browser.js
For any other script it should be :
browserify path_to_module --standalone global_name_to_expose > output.js
Also, since the parse node module has a lot of node code, I would recommend people to use envify followed by uglify to make their code more optimized.
AFAIK, Parse-module doesn't expose itself as a browser global. You should have a file, such as app.js that contains your definitions and use that to require the Parse module.
For example:
//app.js
var Parse = require("parse");
console.log(Parse)
Bundle it (the bundle will contain your app.js and the contents of the parse-module:
browserify ./app.js -o app.bundle.js
and include the bundled file to your HTML file
<script src="app.bundle.js"
After you open your HTML file, you should see the Parse object in your console.
The title seems confusing but I'll give an example.
Let's say I create a module that uses ES6 that runs in the browser, so I use browserify with babelify to build everything.
Now I want to include that same module in a project that uses browserify, but does not uses Babel to compile ES6, so I need the compiled version.
I tried to require the "browserified" module like this:
// es5-project.js
require('./compiled-module-with-browserify');
But when I run browserify es5-project.js I start to get some errors like this:
Error: Cannot find module './XXX' from '/Users/mauricio.oliveira/projects/project-name/dist-folder'
And that makes sense, since browserify compiled all modules into one file, it won't find the modules inside the compiled file.
Does anyone have faced a problem like this one? if you did, how you solved it?
Thanks!
Found the answer!
This will do the trick https://github.com/substack/browserify-handbook#browser-field
Just define a "browser" index in the package.json file, and point to the initial source file.
:)