Combine multiple javascript files with bower - javascript

I'm looking into using Bower with my project (more specifically, django-bower), and I was curious if bower has the ability to combine multiple javascript files into one file when pushing to production.
In other words it would take:
jquery.min.js
angular.min.js
something_else.js
another_thing.js
and produce one file that the user loads: everything.js
In reality we have upwards of 20-30 js files, which is why this would be incredibly helpful.

Bower is a package manager. I think what you're looking for is Grunt.
See how to minify multiple js files using grunt.

Use Browserify. It takes your Node requires and compiles them into a single JS file that can be included in your HTML. Ex main.js:
var JQuery = require('jquery');
var Angular = require('Angular');
require('./something_else');
require('./another_thing');
Browserify your dependency chain...
browserify main.js > compiled.js
Include in your HTML
<html>
<head>
<script type="text/javascript" src="compiled.js"></script>
</head>
</html>

Related

Including bundled webpack file in webpack build

I have a webpack bundled widget that I pack into a single file using webpack, and can use as follows:
<script type="text/javascript" src="my-bundle.js"></script>
<script type="text/javascript">
(function() {
MyBundle.render();
}) ();
</script>
This works fine, but I want to use this widget in my main Rails app. So I've copied the my-bundle.js file into my main project directory and required it.
When I run webpack on my main app, I can see that the code in my-bundle is being included in the resulting js file, but I cannot access the code. i.e. calling MyBundle gives a not defined error.
How can I access it?
EDIT - it looks like I can just use script-loader to run the my-bundle.js file once (which defines a MyBundle function). This doesn't feel like the best way to do it though

How do you use bundles in your code when you browserify an npm module?

I want to use a javascript library called fuse.js. (https://fusejs.io/) in my vanilla javascript app.
I npm install fuse and then add
const Fuse = require('fuse.js')
...other javascript functions here
to the top of my script.js file. (i have trie removing the .js but the lib is called fuse.js in the node_modules folder)
I then run:
browserify script.js -o bundle.js
then I add the bundle.js to my index.html
<script type="module" src="bundle.js"></script>
then, no matter what I do I can't access the Fuse object or any of my other javascript functions...It does load the bundle...but it's completely "closed", I can't use any functions in it.
I have seen that the guys export the bundle to the window object, but there are a lot of people saying this isn't best practice?
Are there any good resources anyone can recommend that I can study up to understand the concept of
I see a useful library on npm, and I use it in my front-end code
(fuse.js does have a cdn that I can just include in the script tag, but I want to know for future use how to use npm modules in my front-end workflow?)

how to use pdf.js without defining pdf.worker location

I meet a problem when using pdf.js to view pdf. The problem comes from the
PDFJS.workerSrc setting. Is that possible to include the pdf.worker.js in
header, like
<script type="text/javascript" src="./../jsfiles/pdf.worker.js"></script>
and not using
PDFJS.workerSrc = './../jsfiles/pdf.worker.js';
is that possible for that? Thanks a lot.
From the documentation:
In order to bundle all src/ files into two production scripts and build the generic viewer, run:
$ gulp generic
This will generate pdf.js and pdf.worker.js in the build/generic/build/ directory. Both scripts are needed but only pdf.js needs to be included since pdf.worker.js will be loaded by pdf.js. The PDF.js files are large and should be minified for production.
This means that you only need to add the following code:
<script type="text/javascript" src="pdf.js"></script>
Remember that all files generated should located in the same directory as pdf.js

setup angular js application index.html page to include only singe controller

I have written a angular application (MEAN) using nodejs in back-end. There are multiple modules in the application so have multiple controller.
We have to include all the controllers in the index.html file and new one as well if we added in any module.
I have checked the other application which are running on the same stack (MEAN) but in there source code i haven't found all the controllers.
So please help me around the same to optimize my application.
Well then I'd suggest looking into Gulp as it allows you to concatenate and, if you want to, minify your codebase and place it into one file. That single file can then be referenced in your index.html
// Example - Concate the js files together and place them in the dist folder
gulp.task('js', function(){
var src = ['../../file-name.js'];
return gulp.src(src)
.pipe(concat('main.js').on('error', gutil.log))
.pipe(gulp.dest('dist/js').on('error', gutil.log))
});
This is an example of what I used when I worked with Angular1. Gulp places all my target files into the dist folder and into the main.js file which I reference in the index.html file.
<script type="text/javascript" src="js/main.js"></script>

how to use webpack to load CDN or external vendor javascript lib in js file, not in html file

I am using react starter kit for client side programming. It uses react and webpack. No index.html or any html to edit, all js files. My question is if I want to load a vendor js lib from cloud, how to do I do that?
It would be easy to do that in a html file. <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
However, in js file, it only uses npm installed packages. How can I import the above lib with no html file? I tried import and require, they only work for local files.
update 10/21/15
So far I tried two directions, neither is ideal.
#minheq yes there is a html file sort of for react start kit. It is html.js under src/components/Html. I can put cloud lib and all its dependencies there like this:
<div id="app" dangerouslySetInnerHTML={{__html: this.props.body}} />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
<script src="/app.js"></script>
<script dangerouslySetInnerHTML={this.trackingCode()} />
</body>
Good news is it works, I don't need do anything else in js file, no import or require. However, now I have two jquery libs loaded in different ways. One in here, the other through npm and webpack. I wonder it will give me trouble later. The react-routing I use give me 'undefined variable' error if I type a none home path in browser window due to the server side loading I guess. So this solution is not very good.
Use webpack externals feature. This is documented as: link. "You can use the externals options for applications too, when you want to import an existing API into the bundle. I.e. you want to use jquery from CDN (separate tag) and still want to require("jquery") in your bundle. Just specify it as external: { externals: { jquery: "jQuery" } }."
However, the documentation I found a few places are all fussy about how to do this exactly. So far I have no idea how to use it to replace <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script> in html.
externals is not intended to let you do this. It means "don't compile this resource into the final bundle because I will include it myself"
What you need is a script loader implementation such as script.js. I also wrote a simple app to compare different script loader implementations: link.
var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
$('body').html('It works!')
});
You can create a script tag in your JS as
$("body").append($("<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>"))
There is one html file that is definitely being used to serve to users with your js bundle attached. Probably you could attach the script tag into that html file
Use webpack's externals:
externals allows you to specify dependencies for your library that are
not resolved by webpack, but become dependencies of the output. This
means they are imported from the environment during runtime.
I have looked around for a solution and most of all proposals were based on externals, which is not valid in my case.
In this other post, I have posted my solution: https://stackoverflow.com/a/62603539/8650621
In other words, I finished using a separate JS file which is responsible for downloading the desired file into a local directory. Then WebPack scans this directory and bundles the downloaded files together with the application.

Categories

Resources