How to use browserify with brfs without npm or node installed? - javascript

I'm using browserify with brfs (as described here: knockout integration with browserify) and am checking-in to a build controller that doesn't have Node installed, and doesn't have npm installed either. My solution is to check-in node.exe and then do the following to use browserify:
.\node.exe .\browserify\bin\cmd.js index.js -o app.js
Works great. However, I want to use brfs, and browserify expects this as a transform, e.g.
browserify -t brfs main.js > bundle.js
Now I can't figure this out because 'brfs' won't be aliased, and I can't figure out how to use my node.exe trick again. What I think I want is this, which obviously doesn't work because parenthesis don't work like this in cmd:
.\node.exe .\browserify\bin\cmd.js -t (.\node.exe .\brfs\bin\args.js) index.js -o app.js
How can I accomplish this?

I figured it out - once I am running browserify using node.exe with my above method, as long as brfs is in my node_modules folder, node/browserify will search the node_modules folder for brfs. Thus, the following works:
.\node.exe .\browserify\bin\cmd.js -t brfs index.js -o app.js

Related

babel react issues finding modules

I have a small react jsx file that needs to be compiled to js.
I install babel and the presets like so in the directory with the js file
npm -g install babel-cli
npm install babel-preset-es2015 babel-preset-react
My script does this
babel --presets es2015,react input.js -o output.js
Everything works.
Reboot the machine and re-run the build. It fails.
Each time I reinstall babel and the presets to get it to work.
I am not a js dev and looking up the similar questions list and a google search for this issue returns 25 different ways of "fixing" the issue. This seems like a basic task, why is there so much noise around it and what is the right way to add this to a larger non-javascript build process .
You have to install the presets globally.
Do this
Create a new folder and move you input.js to that folder
Do npm init
Do npm i babel without -g
Do npm install babel-preset-es2015 babel-preset-react
Open the console at that location
Run ./node_mudules/.bin/babel --presets es2015,react input.js -o output.js

Why is it necessary to install Browserify twice to bundle

I created a new project
I npm install -g browserify
I tested using the cmdline, browserify app.js > bundle.js. Cool.
I want to minify so I npm install uglifyify --save-dev
I tested using the cmdline, browserify -g uglifyify app.js > bundle.js. Great.
Now I want to do this with code, but I get Error: Cannot find module 'browserify'
This is my code, basically to replace the cmdline
var browserify = require('browserify')
var fs = require('fs')
var bundler = browserify('./app.js')
bundler.transform({
global: true
}, 'uglifyify')
bundler.bundle()
.pipe(fs.createWriteStream('./bundle.js'))
It seems I would need to again install browserify locally to this project?
Installing an npm module like browserify allows you to use browserify as a command on the command line. To use the module within your project's code, you must install the module as a dependency. In other words, yes, is must be installed locally within the project's ./node_modules folder and referenced in the package.json file.
From the npm documentation:
Local install (default): puts stuff in ./node_modules of the current package root.
Global install (with -g): puts stuff in /usr/local or wherever node is installed.
Install it locally if you're going to require() it.
Install it globally if you're going to run it on the command line.
If you need both, then install it in both places, or use npm link.
As said in the other answer, one way to solve this is that you can install browserify locally instead of globally, like: npm install --save browserify uglifyfy. Then you can add a script in package.json:
...
"scripts": {
"build": "browserify app.js > bundle.js",
...
},
...
Now, npm run-script build will know how to find local browserify, which is going to be in your node_modules/ directory. And your require('browserify') will work, since browserify is now local.
Another way you could solve this is NODE_PATH env variable. Set this variable in your bashrc or equivalent like this:
export NODE_PATH=$NODE_PATH:$HOME/.nvm/versions/node/v4.2.6/lib/node_modules
Adjust the path to wherever your global node_modules are. Then you can require() whatever you installed with -g flag in your code.
However this is suboptimal, as it can lead to errors and misunderstandings. But if it's for some quick-and-dirty scripts, it can help.

Gulp: npm install gulp --save-dev was expecting to see just a gulp folder inside the node_modules folder

Wonder if someone can tell me if im doing something wrong?
Downloaded Node from there website
Installed Gulp globally (npm install --global gulp)
Made a folder and inside ran (npm init) which makes the package.json file
Installed gulp to the project (npm install --save-dev gulp)
This then adds gulp as a dependency inside package.json and creates a node_modules folder.
I was expecting to only see a gulp folder inside node_modules folder like so:
| node_modules
|-- gulp
But for some reason it's adding around 132 extra dependency folders, is this correct, should this happen? I would of thought these should be contained inside the gulp folder itself?
Im using a Mac, Node v5.2.0, NPM v3.3.12, Gulp v3.9.0
npm since v3 puts almost all dependencies to the node_modules directly.
Your dependencies will now be installed maximally flat. Insofar as is possible, all of your dependencies, and their dependencies, and THEIR dependencies will be installed in your project's node_modules folder with no nesting. You'll only see modules nested underneath one another when two (or more) modules have conflicting dependencies.
References:
https://github.com/npm/npm/releases/tag/v3.0.0

Local Npm module "grunt-template-jasmine-istanbul" not found

Here is my grunt config file - https://github.com/mdarif/JavaScript-Boilerplate/blob/1.3/GruntFile.js
It's not loading the module - grunt-template-jasmine-istanbul and getting Local Npm module "grunt-template-jasmine-istanbul" not found. Is it installed?
Loading the grunt tasks like require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
Hope someone can help quickly!
I have to install 'load-grunt-tasks' package to load multiple grunt tasks excludes grunt-template-jasmine-istanbul rather than 'matchdep' package then given code works like charm.
require('load-grunt-tasks')(grunt, {
pattern: ['grunt-*', '!grunt-template-jasmine-istanbul']
});
as i told you in your other post. just install that module:
$ npm install grunt-template-jasmine-istanbul
you probably should save it into your package.json, you can do that directly when installing the plugin:
$ npm install grunt-template-jasmine-istanbul --save-dev
edit: if you use ..('matchdep').filterDev, it filters the devDependencies in your package.json. grunt-template-jasmine-istanbul is missing in your package.json! easiest way to fix that is the second command i gave you above!

How do I use GruntFile.coffee and package.json to extract/make/fetch/?? the Lungo.js example files?

I am wanting to try out the Lungo.js examples from here : https://github.com/tapquo/Lungo.js,
however the index.html in the example directory is expecting files in the components and package directories and, while those directories do exist as part of this bundle, they are empty of any files.
I have a GruntFile.coffee and a package.json and I believe that together these are some kind of make file that perhaps should make/pull/create the files that the example needs to run, but I don't know how to make them do that.
I have installed the following:
sudo npm install -g grunt-cli
sudo npm install -g grunt
sudo npm install -g coffee-script
I can now run "coffee GruntFile.coffee" successfully, but it does nothing I can see, certainly it is not creating the missing files.
And the "grunt" command simply says "Fatal error: Unable to find local grunt."
How do I tell this bundle of code that I have to get the other files I require?
And, bonus question, what's going on here?
(I understand javascript, and pulling code from github, but not these other frameworks)
package.json has devDependencies field. They need to be installed before you may use grunt command. First you need execute
npm install
in directory wich contains it.
There is definitely bug in this line of Gruntfile
You should change it to:
pkg: grunt.file.readJSON "package.json"
Then, after local grunt is installed, you may run
grunt
which will execute default task. This is well known practice last time.
You need to install grunt locally, not globally. Only grunt-cli should be installed globally.
So instead of
npm install -g grunt
Navigate to your project root folder and execute
npm install grunt
There's a getting started guide on the Grunt homepage.
The package.json file is a descriptor file for your application. More information on this file can be found in this interactive guide. You normally use grunt together with this file so you can list your grunt plugins as dependencies of your application. I suggest reading a tutorial on grunt to learn how it works.

Categories