file-pathify

Browserify alternative to Webpack's 'file-loader'

Installation

npm install file-pathify

or

yarn add file-pathify

Basic usage

Given the sample.js file

var img1 = require('./assets/images/img1.png');
var movie1 = require('./assets/files/movie1.mp4');
 
// ...

And this browserify configuration

bundle.transform('file-pathify', { outDir: 'dist', test: /\.(png|mp4)$/ })

The resulting sample.js file, after transformation will be

var img1 = 'dist/assets/images/img1.png';
var movie1 = 'dist/assets/files/movie1.mp4';
 
// ...

Also, files "assets/images/img1.png" and "assets/files/movie1.mp4" will be copied to "dist/assets/images/img1.png" and "dist/assets/files/movie1.mp4", respectively.

Options

Option	Description	Type
test	Only files that match this criteria will be copied and transformed.	RegExp or string
outDir	Output directory where files will be copied.	string
customProcess	Function that overrides the default behavior.	Function(parentFile: string, requiredFile: string, outDir: string) : string

Using "customProcess"

When "customProcess" is passed it will be used to override the default behavior of the transform. This means that YOU are responsible for copying files to the apropriate location and also for calculating and returning the final path of the file.

This function receives 3 parameters: the path of the file being transformed, the path being required and the outDir parameter.

function myCustomProcess(parentFile, requiredFile, outDir) {
    var fullRequiredFile = path.resolve(path.dirname(parentFile), requiredFile);
    var destFile = path.join('some/other/path', requiredFile);
 
    fs.copySync(fullRequiredFile, destFile);
 
    return destFile;
}
 
bundle.transform('file-pathify', { outDir: 'dist', test: /\.(png|mp4)$/, customProcess: myCustomProcess });