I have this project structure:
myApp ├── gulpfile.js ├── package.json └── source └── scripts ├── modules │ └── utils.js ├── background.js └── data.json My browserify task:
gulp.task('browserify', function () { return gulp.src(['./source/scripts/**/*.js']) .pipe($.browserify({ debug: true,//for source maps standalone: pkg['export-symbol'] })) .on('error', function(err){ console.log(err.message); this.emit('end'); }) .pipe(gulp.dest('./build/scripts/')); }); My sample utils.js:
const data = require('../data.json'); const utils = (function () { const output = function () { console.log(data); }; return { output: output, }; }()); module.exports = utils; If I try to build it with the current directory structure, I get this error:
module "../data.json" not found from "/dev/myApp/source/scripts/fake_4d8cf8a4.js"
I can only build it, if I put data.json inside the modules directory AND inside the scripts directory, ie. it only works if I duplicate the file:
myApp ├── gulpfile.js ├── package.json └── source └── scripts ├── modules │ ├── utils.js │ └── data.json ├── background.js └── data.json Obviously this is not okay... what am I doing wrong?
Thank you
1 Answers
Answers 1
I'm inferring from your use of gulp.src to pass files to $.browerify that you are using a Gulp plugin, probably gulp-browserify. It is generally not recommended to use a plugin to invoke Browserify from Gulp. The recommended way to do it is to just call Browserify directly. Indeed, Gulp's blacklist of plugins states:
"gulp-browserify": "use the browserify module directly", I've replicated your directory structure and put some reasonable values for the files for which you did not provide contents (data.json, background.js) and indeed, I get the same error you get when I try to run the Gulp code you show. However, if I switch to calling Browserify directly, I do not get any error. Here is the code I have:
const gulp = require("gulp"); const browserify = require("browserify"); const source = require('vinyl-source-stream'); gulp.task('browserify', function () { return browserify({ entries: ["./source/scripts/background.js", "./source/scripts/modules/utils.js"], debug: true,//for source maps standalone: "foo", }) .bundle() .pipe(source('bundle.js')) // This sets the name of the output file. .pipe(gulp.dest('./build/scripts/')); }); You use gulp.src(['./source/scripts/**/*.js']) in your code, which means that Browserify will take all your .js files as entries into the bundle. So I've put two entries in my code above, which manually replicates the pattern you use with the plugin. However, while Browserify does not produce an error with this setup, I suspect you don't actually want to have multiple entries. Typically, we pass one entry point to Browserify and let it trace the require calls to figure what it needs to pull.
0 comments:
Post a Comment