Browserify is meant to be fed a single “entry point” file, through which it recursively traverses all of your require statements, importing the code from other modules. So you should be require‘ing the _babel.js versions of modules, not _browserified.js ones. From the looks of it, you intend for your app’s “entry point” to be demos/helicopter_game/PlayState_browserified.js, … Read more
Below is a task I was able to build that seems to solve the problem. Basically I use an outside library to gather the files names as an array. And then pass that array as the entry points ‘use strict;’ var config = require(‘../config’); var gulp = require(‘gulp’); var plumber = require(‘gulp-plumber’); var glob = … Read more
Use this as your start point: var gulp = require(‘gulp’); var gutil = require(‘gulp-util’); var sourcemaps = require(‘gulp-sourcemaps’); var source = require(‘vinyl-source-stream’); var buffer = require(‘vinyl-buffer’); var browserify = require(‘browserify’); var to5ify = require(‘6to5ify’); var uglify = require(‘gulp-uglify’); gulp.task(‘default’, function() { browserify(‘./src/index.js’, { debug: true }) .transform(to5ify) .bundle() .on(‘error’, gutil.log.bind(gutil, ‘Browserify Error’)) .pipe(source(‘bundle.js’)) .pipe(buffer()) .pipe(sourcemaps.init({loadMaps: … Read more
That is how Browserify transforms work, transforms only have an effect directly in the module that is being referenced. If you want a module in node_modules to have a transform, you’d need to add a package.json to that module and add babelify as a transform for that module too. e.g. “browserify”: { “transform”: [ “babelify” … Read more
If you want to inline file contents from fs.readFileSync() calls, you can use brfs: var fs = require(‘fs’); var src = fs.readFileSync(__dirname + ‘/file.txt’); then do: browserify -t brfs main.js > bundle.js and src will be set to the contents of file.txt at compile time.
I don’t have a good environment to test this in right now, but my guess is that it would look something like: gulp.task(“js”, function(){ var destDir = “./dist”; return browserify([ “./js/app.js”, “./js/public.js” ]) .bundle() .pipe(source(“appBundle.js”)) .pipe(gulp.dest(destDir)) .pipe(rename(“publicBundle.js”)) .pipe(gulp.dest(destDir)); }); EDIT: I just realized I mis-read the question, there should be two separate bundles coming from … Read more
Writing Spine = require(‘spine’) in each file is the right way to do. Yet, there are several possibilities by using the global or window object (browserify sets the global object to window, which is the global namespace): in spine.js: global.Spine = module.exports in any other .js file bundled by browserify: global.Spine = require(‘spine’) in a … Read more
With browserify-shim you can add this in your package.json file: “browserify”: { “transform”: [ “browserify-shim” ] }, “browserify-shim”: { “jquery”: “global:$” } Then jquery will be available in your modules via require(‘jquery’)
The “require” function is only available in the “https://stackoverflow.com/questions/28696511/bundle.js” script context. Browserify will take all the script files necessary and put them into the “https://stackoverflow.com/questions/28696511/bundle.js” file, so you should only have to include “https://stackoverflow.com/questions/28696511/bundle.js” in the HTML file, not the “script.js” file.
You shouldn’t need to shim jquery that way if you’ve installed it with npm. The following works for a project I’ve been writing: I’ve also learned that using npm for bootstrap is kind of a PITA. I’ve been using bower to install and maintain certain front-end components when they need to be shimmed like this. … Read more