Including standalone browserify bundle into main bundle - javascript

My browserify project is dependent on another browserify bundle, which uses standalone bundling. According to docs (on jquery example) I'm supposed to include it as a separate file. But I'd like to have my project in single file (as are my automatisation tools set up at the mooment). If I don't exclude it, my browserify fails to build as it complains about requires to nonexistant paths within dependency.
Is there a simple way to incorporate standalone build into my bundle?
Project I'm dependent on is Matterjs (link to this specific build)

Found it! Add this to your browserify config:
{
noParse: [require.resolve('matter-js')]
}

Related

What is the difference between ng build and webpack

As I understand it, ng-build creates a distributable packaged version of your application. I also understand that webpack is used to bundle Javascript modules.
I ran ng build on a test project and found that it created a dist folder containing what looked like a packaged version of my Angular application. All of the .js files had been combined however my referenced .css files had been left in the original form (not bundled or minified).
Therefore, what is the difference between using ng build or webpack to do this job. Or are they complimentary? Would I potentially use both in my deployment pipeline?
Not a complete answer, but worth to note:
If your css files were not compiled, it probably means, either:
you ran ng build (a.k.a. ng build --dev) which adds default --extract-css to false:
--extract-css (aliases: -ec)
Extract css from global styles onto css files instead of js ones.
You ran ng build --prod but forgot to reference your styles as global styles in angular.cli.json:
"styles": [
"styles.css",
"assets/styles/test.component.css"
],
Once you do this you will find your css files inlined, however, you will also find them in normal format as well. Cant understand why is that..
Webpack and ng-build do pretty much the same job, which is bundling your modules to be used in a browser environment For example, the Angular module is a feature, which doesn't support in the browser, and ES 6 modules are not implemented in any browser yet, which is why things need to be bundled.ng build only for angular. we can you webpack any UI related applications including angular.

Using a pre-minified Javascript library with jspm?

I am trying to do all my package management with JSPM, and I would like in some cases for the bundled minifed version of a library to be loaded by SystemJS instead of each individual source files (and I don't want to do the bundling myself with the JSPM CLI).
For example, I am doing the following:
jspm install angular2
And then I have a small application based on Angular2. When I look at what happens on the network, the browser loads a whole bunch of files that are part of Angular2, although in this particular case I would like to use angular2.dev.js, which is part of the angular2 module installed by JSPM (and maybe in production I would like to load something else).
Is there a way to do this with jspm (basically to replace bower + a script tag)?

Browserify: using external libraries from within bundle

Our team develops browser side javascript app. We use angularjs as framework and some helper libraries in global namespace. For example: underscore.
We carried out a large piece of code (input/output data tranformation) into a standalone library for unit testing reasons.
Now i try to use browserify with this library. The question is about what the best way to exclude from bundle shared (with main app) dependences (underscore for example).
I tried 2:
Using --external. I have to create bundle from underscore and use it for all code stuff in app. If i understood right this way seems inconvenient.
Using browser property in package.json to replace underscore with stub:
module.exports = _;
I believe that there is more clean approach, but where is it?
You don't have to use --external or something like that. Just include the library like this:
<script src="external/lib.js"></script>
then you can use it within your bundle (without require).
BUT: In my opinion you shouldn't mix global libs with browserify. All benefits of browserify will decrease drastically this way.
Contras:
more than one file to include
worse readability cause fewer `require` statements
RECOMMEND:
create one bundle with all external libs and install them as npm modules.
npm install --save angular
npm install --save lodash
create external bundle:
browserify -r angular -r lodash > external/libs.js
you only have to bundle it once because they should never change. then create main app bundle without external modules:
browserify --no-bundle-external app.js > bundle.js
then include these two bundles to your page:
<script src="external/libs.js"></script>
<script src="bundle.js"></script>

Browserify: take minified file from node module

I installed bootstrap via npm and i'd like to require it via browserify, so I use:
require('bootstrap');
But there are 2 problems here:
It takes the non minified version of bootstrap
I would also like to include the bootstrap.tpl.min file
How can i do it?
Unfortunately browserify won't solve either of those problems for you. NPM packages are meant to be small and solve one problem well and browserify's domain is resolving all the dependencies you require and packaging them up into one file for the browser.
Minification of your bundle should happen as part of your build step using gulp or grunt using a package like uglify.
Including a template file will also require some additional work if it's not included in what's exported from bootstrap. You can either require the specific file from the module if you need access to it in code, or you could copy it to the directory that you're serving up either with your build tool or using bower

Building material-ui with browserify

I'm trying to build the material-ui (material-ui.com) javascript so that I can include it in my project and use the react components. I've been using browserify to bundle all the javascript into a single file, which I then include in my HTML file. So, in the material-ui/lib directory (which is where the JSX-transformed JS seems to live -- I'm very new to NPM bundles + browserify etc), I run
browserify index.js -o material-ui.js -r material-ui
I then include that material-ui.js file in my HTML.
But then when I try writing require('material-ui') in my javascript in the HTML page I get "Cannot find module 'material-ui'".
I don't really understand what browserify is meant to be doing, what the require function is doing, and how I'm meant to reference any of the material-ui react classes. Thanks!
So I just managed to solve this. Browserify was creating a require() function but not the material-ui module because I was calling it from the wrong directory. Calling it from the npm's module root without specifying a starting .js point somehow made it actually work, allowing me to use require('material-ui') without any errors.

Categories