I have tried using browserify etc... But they include browser specific code. I just want one javascript file to contain all my server side app.
I want to compile all the disparate sources of a server side node.js app into one file "app.js" so I can distribute it by itself and it contains all dependencies it requires inside the one file.
So if I had:
one.js
require('./two.js')
two.js
console.log('two');
I'd run bundler one.js -o app.js
and app.js would look like:
console.log('two')
Ideally it would deal with the node system modules like fs, util, etc... intelligently. (I.e. probably not bundle them.)
Many nodejs modules require building or installation so you should consider distributing the node_modules folder or running npm install to install your app. If all the modules you use are simple js files with no further dependencies, I guess what you are looking for is to just merge the files together. You can easily do this with Gulp (and gulp-concat).
var gulp = require('gulp'),
concat = require('gulp-concat');
gulp.src(['imustbefirst.js', 'imustbesecond.js', '*.js'])
.pipe(concat('app.js'))
.pipe(gulp.dest('./'))
Related
I'm trying to use the h264-converter npm package (https://www.npmjs.com/package/h264-converter).
It is written in TypeScript. When I run npm install --save h264-converter I get a folder with the .ts TypeScript files, but it also comes with the .js Javascript files in the same folder already transpiled for you.
However, the .js files it comes with do not run in a browser. They contain Require(...) functions and undefined objects like exports that cause them not to run in a browser. Simply including these .js files with <script> tags causes errors. I did some reading and tried to use the browserify npm package (https://www.npmjs.com/package/browserify) to create .js files that work in a browser from .js files that don't. I ran
browserify "C:\...\h264-converter\dist\index.js" > "C:\...\h264-converter\dist\bundle.js"
like the in the example on the browserfiy main page and it seemed to run without error (their example uses main.js instead of index.js but I think index.js serves the same purpose). It created bundle.js. However, bundle.js still doesn't run in a broswer. bundle.js still has Require(...) functions.
How do I get the .js files that come with h264-converter npm package to run in a browser?
I can post the contents of some of the .js files that the h264-converter npm package comes with if that will help. Thanks.
npm package
To use an npm (node style commonjs) package in the browser you should use a a module bundler like webpack.
I have an NPM package that can be used with the browser. But in order to use it in the browser, I pre-package it using Webpack and put the browserified code in the /dist directory.
Normally, I don't feel it's necessary to include the /dist directory when publishing to NPM, unless someone wants to use the browser version instead of the Node.js version (most of my customers will be using my lib for Node.js not for front-end).
The dist is a huge directory (all the project's code, plus NPM deps) and I want to save people the disk space and install time.
Should I just create a separate package for the browser code, or is there some flag I can use for conditionally including the dist directory when people install my package?
I believe it's better to create two separate packages.
I'm working on a library using browserify. I have an entry point e.js which requires the files a.js b.js c.js.
As long as i'm just bundling the complete library,
browserify -e e.js -o dist/lib.js works just fine.
However, I'd like the library to be extensible by others. They should be able to load lib.js in their code and then require('./c.js')from the library.
Using factor-bundle it will always create a new dist/lib.jswhich is incompatible with the originally built one.
I guess using browserify -r with all internal dependencies to build dist/lib.jsand then doing a browserify -x ... -e module.js -o dist/module.js, externalizing all library dependencies will work, but isn't there an automated way of achieving this?
Is it possible to create a bundle with all dependencies being exported and then creating a second bundle for the add-on module which automatically externalizes everything from the first bundle?
Thanks for your answers!
Is it possible to exclude files from a list of NPM packages in my package.json?
I have a non-browser environment that works a bit differently: every file in node_modules dir becomes part of the production package. So there's no smart treeshaking that imports only the files that I use in my code.
For instance, I use some packages which also carry a lot of tests and i18n files, most of which I don't need and like to remove from my packaged production version. However, they are still included in the end package because the whole package folder is included in the build.
I'm trying to remove as many files from the packages as I can (without doing it manually each time) to save space and compilation time. The environment I use is looping all files in the node_modules directory and adds them to the production package (all packaged using Javascript). I would like a JavaScript solution to remove these files on compilation so the end package is as small as it can be.
I would use bower to manage client-side javascript modules, instead of using npm directly.
Bower packages are simpler than npm equivalents and don't have subfolders with module dependencies. Most will include a "dist" folder with pre-minified javascript. Right out of the box your packages will be smaller than if you use npm.
If you want to go further, you can include some processing in your gulpjs or gruntjs scripts to either manually copy needed files to lib and css folder(s), or use a plugin like gulp-bower-normalize to (somewhat) automatically do the same thing.
this is probably a silly question but am new to Meteor and struggling a bit. I want to build a stellar app that tweets when you get stellar. There is a nice Javascript API stellar-lib that works on node, but im unsure how to access the modules in Meteor...
I'm also building an app with Meteor and stellar-lib and have found two options:
1) You can manually copy over the built stellar-lib.js or stellar-lib-min.js from the build/ directory from either the github repo or the node_modules folder you installed it to when you ran the npm install command.
If you do this, you will have to copy the .js file to client/compatibility, otherwise stellar-lib will not work (note: this means you can only use Stellar on the client).
2) If you need it on the server, you can also have browserify wrap stellar-lib for you, then copy the output to lib/ in your Meteor app's root directory. I did this in my repo here with gulp.
Here's a short explanation to how 2) works:
.gulp is where I'll install my NPM modules where they will be ignored by the Meteor build environment (because the folder is hidden).
In deps.js, I require the modules I would want to use in my Meteor app as I would if I was using them in a traditional node.js app. package.json defines the modules I'll install with NPM and the gulpfile.js describes a build task that will resolve my require statements and output a single deps.js file that includes my dependencies to my Meteor app's lib/ folder.