How does one specify a custom search path with Browserify? - javascript

I have a large project that consists of hundreds of source files broken into several folders.
Something like this:
src/
AAA.js
subdir/
DDD.js
I would like to be able to specify dependencies with non-relative paths.
For instance, in DDD.js I would like to do this:
var AAA = require('AAA');
...rather than this:
var AAA = require('../AAA');
How can I achieve this with Browserify?

As stated in the documentation, Browserify uses browser-resolve under the hood.
When using the node API (as opposed to the CLI), you can specify a paths option which contains a list of directories to pass to browser-resolve.
The solution for my example would thus be something like this:
var browserify = require('browserify');
var b = browserify({
paths: [
__dirname + '/src'
]
});
b.add(__dirname + '/src/AAA.js');
b.bundle().pipe(process.stdout);

Or if you want to do it from the command line you can add your directory to the node search path:
NODE_MODULES=$NODE_MODULES:src browserify -o output.js input.js

Related

Gulp- Versioning for javascript files

I am doing bundling and minification for javascript files. I am doing this using gulp. Now I want that if I make any change in any of my file and hit gulp then it generate a new bundled and minified file with version number like:
<script src="https://cdn.test.com/bundle-1.0.0-min.js/"></script>
then
<script src="https://cdn.test.com/bundle-1.0.1-min.js/"></script>
I want to do this using gulp because I am already using gulp for other purposes. And one more thing if this is possible then is there any way that I don't specify version no in my html page every time I make a change and my html page get the latest version by its own somehow.
This is just a rename of the file in general. But this should really not be an automated task to increment the version number. Otherwise you will be quickly getting a version like 1.0.2092 what is not helpful. I would suggest to read the version out of the package.json and use it for the name of the file. Should be pretty easy, if you already worked with gulp.
If you don't want to use the global version (version entry) of your package.json, you could add an own entry for your bundle version. Or even use a different file than package.json. You could even use that as config for which files should be bundled, to have everything in one place:
{
"bundle": {
"version": "1.0.1",
"files": [
"path/to/file-one.js",
"another/file.js",
"..."
]
}
}
Just a quick example:
var pkg = require("./package.json");
var gulp = require("gulp");
var rename = require("gulp-rename");
gulp.src(pkg.bundle.files)
.concat("bundle.js")
.pipe(uglify())
.pipe(rename(function(path) {
path.extname = "-" . pkg.bundle.version + "-min" + path.extname;
}))
.pipe(gulp.dest("./"));
Note: instead of rename you can just set the concat name, but I like to split this. But just to be complete:
.concat("bundle-" + pkg.bundle.version + "-min.js")
About the second parts of your question, to replace things in your files:
This would be possible if you build your html pages too, and replace/inject the relevant path into it. You could use the version of the package.json again, to build it and replace. Or use tools like gulp-inject. That simple tool can add js and css files into your html templates. Just create an area where they should be placed in the html file, like: <!-- inject:js --><!-- endinject -->. Afterwards it is a simple gulp taks too:
var pkg = require("./package.json");
var gulp = require("gulp");
var inject = require("gulp-inject");
gulp.src("dev/index.html")
.pipe(inject("bundle-" + pkg.bundle.version + "-min.js"))
.pipe(gulp.dest("prod/"));

Can i use wild card with browserify require?

Currently for loading a module in a folder, i need to explicitly call each file:
require('path/to/file/someFile.js')
Is there a way to require all modules in a folder using a wild card? something like:
require('path/to/file/*.js')
You can use a browserify transform such as bulkify:
var bulk = require('bulk-require');
var whatever = bulk(__dirname, [ '*.js' ]);

Require a module relative to the original code

I have this directory structure:
project/
mymodule.js
test/
run.js
node_modules/
canvas/
I have code like so:
run.js
var Canvas = require(__dirname+"/../mymodule");
mymodule.js
if (typeof require==='function' && typeof module==='object'){
// when using mymodule with Node the 'canvas' module must be available
var canvas = require('canvas');
module.exports = canvas;
} else {
// code that works in a web browser, without Node
}
The result of node test/run.js is Error: Cannot find module 'canvas'.
How can I make it so that the require from mymodule knows to look relative to the original script? Or is that contrary to the way Node modules work? Must I move canvas (which is only used for testing on my end) out of the test directory?
When you don't put a path in the require statement, it assumes you're trying to load a module. If you want to load something in your code, be sure to include a relative or absolute path. In your case:
var canvas = require('./test/node_modules/canvas');
The other way to do this is to have your node_modules directory in root, and not web-accessible.
project/
mymodule.js
node_modules/
canvas/
test/
run.js
Then in your run.js or your mymodule.js you can require('canvas') as you'd expect.

Copy files to sub-directories

Using gulp, is there any easy way to copy each file that matches some glob to a sub-directory relative to the original file's location?
For example:
The source glob might look like this:
'./**/*.txt'
This is what the file structure might look like beforehand:
./dir1/file1.txt
./dir2/file2.txt
./dir3/file3.txt
This is what the corresponding file structure would look like afterward:
./dir1/file1.txt
./dir1/sub/file1.txt
./dir2/file2.txt
./dir2/sub/file2.txt
./dir3/file3.txt
./dir3/sub/file3.txt
I'm still not sure whether native gulp provides any way of doing this. But it looks like one way of doing this would be to use the gulp-rename package.
var rename = require('gulp-rename');
gulp.src('./**/*.txt')
.pipe(rename(function (path) {
path.dirname += '/sub';
}))
.pipe(gulp.dest('./'));

How to import all tasks from another gulp file.js

Is it possible to have one main gulpfile.js from which to call tasks from other gulp files.js? Simple "require" of child gulpfile.js into main one doesn't work.
I have a platform project which includes several sub projects with separate gulpfiles, so I need a solution to manage all child gulpfiles from within main one
It is possible to have one main gulpfile.js from which to call tasks from other gulp files.js using the require-dir module. From the projects README use it like this:
Split tasks across multiple files
If your gulpfile.js is starting to grow too large, you can split the tasks
into separate files by using the require-dir
module.
Imagine the following file structure:
gulpfile.js
tasks/
├── dev.js
├── release.js
└── test.js
Install the require-dir module:
npm install --save-dev require-dir
Add the following lines to your gulpfile.js file.
var requireDir = require('require-dir');
var dir = requireDir('./tasks');
I've create a special gulp-require-tasks module that will help you to split your gulpfile.js into separate smaller task files. Please see the README for example and documentation.
Please consider using it and let me know if it works for you! If you have any suggestions or ideas for improvement, I will gladly accept them.
And what if I want to make it future-proof and don't want to install
another package for it.
The following works for me with gulp 4, without any extra plugins.
In taskfile.js:
const { src, dest } = require('gulp');
const mytask = function () {
return src('assets/**/*')
.pipe(dosomething())
.pipe(dest('dest');
}
module.exports = {
mytask
}
In gulpfile.js:
const { mytask } = require('taskfile.js');
// use in other tasks
gulp.task('manythings', gulp.series(..., mytask, ...));
// or use directly as 'gulp mytask'
module.exports = {
mytask
}
I would recommend this answer for anyone who doesn't want to include a separate module or refactoring:
https://stackoverflow.com/a/5809968/40769
var fs = require('fs');
// file is included here:
eval(fs.readFileSync('tools.js')+'');

Categories