using a module exported from browserify - javascript

I have a simple node.js project where I ran the following commands:
npm init
npm install buffer --save
browserify -r buffer -o buffer.js
How can I require that buffer.js file into other files or projects, and actually use the Buffer classed contained within it?
I have tried
var Buffer = require('./buffer.js');
var x = new Buffer();
but I get TypeError: Buffer is not a constructor
What am I doing wrong to be able to use that node module from another location?

Generate a UMD bundle with the -s flag:
browserify -r buffer -o buffer.js -s buffer
And then fix the file in which you require it:
var Buffer = require('./buffer').Buffer;
var x = new Buffer('some content');

Related

CoffeeScript Cakefile not finding NPM Module node-glob

I am trying to use a code snippet from a README for node-glob in CoffeeScript. I installed the package:
npm install --global glob
I am trying to use the following snippet:
var glob = require("glob")
// options is optional
glob("**/*.js", options, function (er, files) {
// files is an array of filenames.
// If the `nonull` option is set, and nothing
// was found, then files is ["**/*.js"]
// er is an error object or null.
})
and I assume its then written something similar to this in CoffeeScript:
# Cakefile
{glob} = require 'glob' # npm install --global glob
task 'glob-test', 'Testing Globs', ->
glob.sync("**/*.ts") (er, files) ->
console.log files
However, I get the following error messages:
Error: Cannot find module 'glob'
Am I doing this correctly, or is it even possible CoffeeScript and I should just abandon the whole idea?
UPDATE:
Installed the node-glob module as a locally vendored module this time using:
npm install glob
and changed {glob} to glob in the require statement.
and ran the Cakefile task again. Got this error this time.

Gulp error on node_module that has scss

I recently npm installed the node module react-calendar-timeline .
After implementing it one of my components, I ran gulp to build.
gulp threw an error:
events.js:141
throw er; // Unhandled 'error' event
^
SyntaxError:
/var/www/monitor/node_modules/react-calendar-timeline/modules/lib/Timeline.scss:1
$item-color: white;
^
ParseError: Unexpected token
My gulpfile file for this component looks like this:
var gulp = require('gulp');
var browserify = require('gulp-browserify');
var concat = require('gulp-concat');
var babel = require('gulp-babel');
gulp.task('browserify', function() {
gulp.src('js/ScheduleMain.js')
.pipe(browserify({transform:'babelify'}))
.pipe(concat('ScheduleMain.js'))
.pipe(gulp.dest('static/dist/js'));
It seems as though I am not able to handle the .scss file of the module I have installed. What is the proper way to handle this?
It could be an issue related more to gulp-browserify than your build script.
Keep in mind that gulp-browserify is long dead, in fact it's been more than an year since the last update; this is from it's npm page:
NOTE: THIS PLUGIN IS NO LONGER MAINTAINED , checkout the recipes by gulp team for reference on using browserify with gulp.
Browserify natively supports streming and with just a pair of plugins you can trasform that stream to be gulp compatible, I suggest you to take a look at gulp's examples folder, more specifically to this example using browserify.
By the way, what's the point in running gulp-concat when in your stream theres only one file?

How to manually bundle two javascript files?

I'm writing code in Javascript for Espruino (an embedded platform) and there is a restriction: Only one file is allowed to be saved into the device.
For the following code to work:
var x = new require("Something");
x.hello()
Something module should be reachable from main.js file. The Something module is a separate file and looks like this:
function Something() {
....
}
Something.prototype.hello = function() {
console.log("Hello there!");
}
exports = Something;
Question is; How can I concatenate these two files and still use the Something module as require("Something"); format?
The answer is found in Espruino forums:
# create bundle
BUNDLE="init.min.js"
echo "" > ${BUNDLE}
# Register modules via `Modules.addCached()` method
# see: http://forum.espruino.com/comments/12899741/
MODULE_NAME="FlashEEPROM"
MODULE_STR=$(uglifyjs -c -m -- ${MODULE_NAME}.js | sed 's/\"/\\\"/g' | sed "s/\n//g")
echo "Modules.addCached(\"${MODULE_NAME}\", \"${MODULE_STR}\");" >> ${BUNDLE}
uglifyjs -c -m -- init.js >> ${BUNDLE}
Why don't you use webpack to bundle the modules files into one file.
I suppose that your current directory is your project directory
First install nodejs at:
https://nodejs.org/en/download/
or sudo apt-get install nodejs
Second, install webpack using this command
npm i -g webpack
bundle your module
To build your bundle run this command:
webpack ./main.js bundle.js
Note: your bundle.js will include all the module files that you have required in main.js
There is https://www.npmjs.com/package/espruino tool that has function to prepare code (concatenate + minimize) for uploading to your board.
I use it in my build proc that compiles typescript code to javascript and then prepares for board upload. Tutorial is here https://github.com/espruino/EspruinoDocs/blob/master/tutorials/Typescript%20and%20Visual%20Studio%20Code%20IDE.md
Yes like it's mentioned above, you need to uglify the code. You cannot use webpack or grunt here. They will transpile the code which will break your require libraries.
Here is how I achieved this in my case:
I put all my files inside a folder (like /src). Don't import one file from another. Then minify all files in the folder into a single file (eg. index.js)
uglifyjs src/* --compress --mangle -o ./index.js
Then just upload this index.js into espruino. You need to install this library globally first.
npm install -g espruino
espruino -p /dev/cu.wchusbserial1420 -b 115200 --board ESP8266_4MB.json -e 'save()' index.js
I made a simple example here:
https://github.com/aliustaoglu/espruino-http-server

Bitcoinjs browser compile creating empty file

I'm attempting to do a build of Bitcoinjs for browser testing folloing the instructions on the BitcoinJS page (included below).
$ npm install -g bitcoinjs-lib
$ npm -g install bitcoinjs-lib browserify uglify-js
$ browserify -r bitcoinjs-lib -s Bitcoin | uglifyjs > bitcoinjs.min.js
When I run this is does generate a file called bitcoinjs.min.js but it is empty. Can anyone explain what I'm doing wrong?
what does your index.js look like?
try the following: Create index.js with the following content in the same folder:
var bitcoin = {
base58: require('bs58'),
bitcoin: require('bitcoinjs-lib'),
ecurve: require('ecurve'),
BigInteger: require('bigi'),
Buffer: require('buffer'),
elliptic: require('elliptic'),
bs58check: require('bs58check'),
}
module.exports = bitcoin;
Then run:
browserify index.js -s bitcoin | uglifyjs > bitcoinjs.min.js

Browserify: How would you read the contents of a directory

In my current Browserify project, I need the ability to loop through the folders of a specific directory and get a json file from each. So I'll need some kind of fs module.
Are there any specific modules you can recommend that play nice with Browserify & will let me use readdirsync / readdir or another method to read the contents of another directory?
Apparently I can't use the normal nodejs fs module, and I've looked at brfs but that only gives me access to readFile.
I would love to do something like :
// app.js
getFiles = require('./getFiles.js')():
and
// getFiles.js
module.exports = function(){
var fs = require('some_module_system');
var folders = fs.readdir('../path/to/dir', function(err, contents){
console.log(contents);
});
}
and wrap it all up with
browserify app.js > build.js
You can do this with the brfs browserify transform. It has readdir and readdirSync (and all the other fs stuff too).
First install brfs:
npm install --save brfs
then replace your 'some_module_system' with the normal 'fs' module (brfs transform will process that out when you call browserify).
After that:
browserify -t brfs app.js > build.js
and you're good to go.

Categories

Resources