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.
Related
Pure JavaScript support for Flatbuffers has been abandoned, and the project website tells you to use transpile from TypeScript.
This is what I tried:
Write a Flatbuffers file website.fbs.
Run flatc --ts website.fbs to receive website.ts.
Run tsc website.ts to receive website.js.
Run browserify website.js -o website.browser.js to receive a file which I can include with <script src="website.browser.js"></script>.
But console.log(Website) tells me there is no Website object.
What is the correct path to use Flatbuffers with JavaScript in the browser?
The problem is that browserify does not export to global namespace (window) by default. By supplying the -s parameter to browserify you can get it to export to a global symbol:
browserify website.js -o website.browser.js -s website
After that you should be able to find window.website with the same API as before with the old direct to js code generator.
Or, in my opinion, the better option is to use a more modern bundler (Rollup, Parcel, esbuild, Webpack etc.) and have it bundle the generated ts (or js) together with your application in a single step so that you do not need to use the global namespace at all. That would also allow for more efficient and small code, better IDE support and probably some other benefits.
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'm trying to compile my project to a single js file and definition, however the compiler doesn't seem to do it correctly.
example: node /home/ian/.m2/repository/com/williamsinteractive/oxygen/gdk-build/0.3.0-dirty/compile/tsc/1.3.0/tsc.js --out test.js -m amd -t ES5 -d Command.ts
A blank test.js and test.d.ts gets created with no code in them.
Also a Command.js and a Command.d.ts get created with the code in them.
I want to be able to compile all my classes into a single .js file and ideally a single .d.ts file as it is a library to be imported by other projects.
TypeScript doesn't support --out with external modules. Luckily there are external tools that do a great job for this e.g. for amd recommend you look at r.js
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.