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.
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'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.
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.
:)
I developed a javascript web app with npm and webpack. Now I converted all those .js files to .ts by using the powershell command stated here. The succeeding actions in the link is using grunt; I want to directly use VS2015 Typescript project but I cannot find any reference on the net about what to do with the node_modules and how I can fully convert all my package.json and webpack into Typescript project. The Task Runner Explorer in VS2015 only supports Grunt and Gulp tasks.
I recommend going with the "bare-foot" solution first. I'd rely much less on VS2015. It's maybe the best IDE available, but JS and TS projects can be handled from command line without relying on the magic of the IDE. This way you can gain a deeper understanding of these technologies and I think now it would be easier too.
I recommend the following steps:
create a tsconfig.json in the root folder. Read around, there's plenty of info available. Just one hint: use 'filesGlob' to specify the files to compile.
use TSD to get the .d.ts files of the libs you use from DefinitelyTyped. You might create, or at least just declare, the missing packages.
run 'tsc --project .' from command line to compile everything. You'll see the errors that are to be solved.
I'm typing from mobile, I can edit the codes tomorrow. Have any comments?
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.