browserify

I am using browserify (using browserify-middleware) how can I require simple text files, something like: var myTmpl = require("myTmpl.txt"); I cheked stringify plugin for browserify but the code in the documentation is not working with browserify V2 require() is really best for just javascript code and json files to maintain parity with node and to improve readability of your code to outsiders who expect require() to work the way it does in node. Instead of using require() to load text files, consider using the brfs transform. With brfs, you maintain parity with node by calling fs.readFileSync

I recently switched from browserify to webpack and the build time jumped from 4s to 16s on (2014 MBP). I understand webpack does alot more than browserify but i shouldn't take that long. My build process is fairly simple. Are there any tips or options to improve my build time? var webpackOptions = { cache : true, output: { filename: '[name].js', }, module: { loaders: [ { test: /\.js$/, loader: 'jsx-loader' }, { test: /\.css$/, loader: "style!css" } ] }, }; gulp.task('buildJs', function(){ multipipe( gulp.src(jsSrcPath), named(), webpack(webpackOptions), uglify(), gulp.dest(jsDestPath) ).on(

For example could I do: import React from 'react'; import PanelA from './panelA.jsx'; import PanelB from './panelB.jsx'; React.render( <PanelA /> <PanelB />, document.body ); where React would render: body PanelA PanelB Currently I'm getting the error: Adjacent JSX elements must be wrapped in an enclosing tag while transpiling with browserify and babelify Since the React v16.0 release you can render an array of components without wrapping items in an extra element when you are inside a component: render() { return [ <li key="one">First item</li>, <li key="two">Second item</li>, <li key="three"

I'm considering adopting browserify for some of my projects, but would like to make sure that others don't have to use browserify if they want to use the (bundled) code. The obvious way to do this is to both expose the modules exports through module.exports as well as through a window. global. However, I'd rather not pollute the global namespace for those who are require ing the script. Is it possible to detect if a script is being require d? If it is, then I could do something like: var mymodule = (function() { ... })(); if (isRequired()) { module.exports = mymodule; } else { window.mymodule

I am trying to use gulp and browserify to transform my .jsx files into .js files. var gulp = require('gulp'); var browserify = require('browserify'); var reactify = require('reactify'); gulp.task('js', function () { browserify('public/javascripts/src/app.jsx') .transform(reactify) .bundle() .pipe(gulp.dest('public/javascripts/dist')) }); ``` The above threw Arguments to path.resolve must be strings . I managed to get around it by using vinyl-source-stream var source = require('vinyl-source-stream'); ... .bundle() .source('app.js') ... Why does this work? I am fairly new to nodejs and gulp.

The way I'm using packages that not available out of the box in npm, right now is like that: package.json has: "napa": { "angular": "angular/bower-angular", "angular-animate": "angular/bower-angular-animate", "d3": "mbostock/d3", "ui-router":"angular-ui/ui-router", "bootstrap":"twbs/bootstrap" }, "scripts": { "install": "node node_modules/napa/bin/napa" and that installs files into node_modules directory, and I use them natively like this require('angular/angular') require('ui-router') ... etc That works, but I was thinking if it's possible to use packages installed with bower (into bower

Using Vue (^2.0.0-rc.6) + Browserify, entry point is index.js: import Vue from 'vue' import App from './containers/App.vue' new Vue({ // eslint-disable-line no-new el: '#root', render: (h) => h(App) }) App.vue: <template> <div id="root"> <hello></hello> </div> </template> <script> import Hello from '../components/Hello.vue' export default { components: { Hello } } </script> <style> body { font-family: Helvetica, sans-serif; } </style> Hello.vue: <template> <div class="hello"> <h1>\{{ msg }}</h1> </div> </template> <script> export default { data () { return { msg: 'Hello Vue!' } } } </script>

I tried to uglify output of Browserify in Gulp, but it doesn't work. gulpfile.js var browserify = require('browserify'); var gulp = require('gulp'); var uglify = require('gulp-uglify'); var source = require('vinyl-source-stream'); gulp.task('browserify', function() { return browserify('./source/scripts/app.js') .bundle() .pipe(source('bundle.js')) .pipe(uglify()) // ??? .pipe(gulp.dest('./build/scripts')); }); As I understand I cannot make it in steps as below. Do I need to make in one pipe to preserve the sequence? gulp.task('browserify', function() { return browserify('./source/scripts/app