How to include bower component in a web page - javascript

I'm starting with bower and followed this tutorial at first. I have no problems with installing a package, but with how to use it in a static web page.
I could obviously do something like:
<script src="bower_components/module_name/module.js"></script>
for each the components I need, but it seems to me not the good way to do. So I think I am missing something which could link the page generation to my bower components.
May be there a bower component which could help me to include all packages in a bower_components directory.

That is one way to do it but I usually use bower in conjunction with other build tools, like grunt or gulp. Then you can use a task, like grunt-bower-task, to copy only the necessary files to a directory of your choosing.
If you are feeling really ambitious, you could leverage the bower api to roll your own build solution that extracts the "main" files into your project.
Another thing to be aware of, is that not every dependency you will want to include will implement bower's configuration properly (example: missing main attribute or bower.json file). There will also be those projects that require you to include assets (fonts, images, etc.), which bower doesn't currently solve for. In these cases, you will need to come up with a way to move the files around. I always end up having to use something like grunt-contrib-copy to get everything in it's place.

Related

How do you handle bower components properly when it comes to references, concat, and minify?

I recently started an endeavor on creating a VSTS Extension. I utilized bower to automatically pull in the latest vss-web-extension-sdk component, and everything works fine so far. One thing that bothers me is that I had to reference the script in the following way:
<script src="bower_components/vss-web-extension-sdk/lib/VSS.SDK.min.js"></script>
I understand that I can change the bower components directory, but should it be a unique name or can it be scripts, which is the folder where my own scripts reside?
Additionally:
Should I (and how do I) concatenate components together when it comes to production?
Should I minify all of my components (Javascript) together, even though I'm already provided *.min.js files?
I've come across other similar questions relating to this, but I'm not utilizing Grunt or Gulp, just npm and bower. I ask this because I want to ensure that my production code does not identify which tooling I used (npm, bower), and I want the production code to be as proper as possible, which may require me to minify all JS together (I'm not sure on this one)?

Bundle external javascript libraries automatically

I often see browser-focused javascript libraries with an option to install over npm.
Is there a reason to install it using npm instead of just using <script src="cdn-url"></script>?
I am loading many libraries, so I guess it might be a good idea to fetch these files, so I don't make so many url requests (even though all the requests are targeting CDNs).
I could potentially install via npm and then use <script src='/node_modules/...'></script>, but then I need to make these paths public accessible using express.static() or something like that.
I know that I could use webpack, browserify, etc., but they seem overly complicated when I just want to bundle a few external libraries into 1 file automatically.
The point of using npm in this case is so you get the updates automatically. You bundle to reduce the number of requests and include only 1 script tag.
but they seem overly complicated when I just want to bundle a few external libraries into 1 file automatically.
This is complicated unfortunately. It would be nice if it wasn't. Also, you need to think about things like browser caching when you update a library. If you have a vendor libraries bundle, you will have to manually cachebust with a query string when you update. So to simplify the process, webpack does it all for you.
I would move to Webpack and use the CommonsChunkPlugin to create a vendor build. See this example.
To fully automate everything, combine this with Html Webpack Plugin to automatically add the script tags and cache-bust with hashing.

Meteor Differential Boilerplate - need for compatibility file and when to use bootstrap package

I was looking at Differential's meteor-boilerplate app and noticed that they do not use a bootstrap package and also saw a directory/file in the client directory that is related - client/compatibility/bootstrap.js
I was wondering if anyone had an explanation for why/when you'd want to avoid using a package like twbs:bootstrap and when you'd need to create a compatibility file.
I would say that it's the lazy path to include external libraries in a Meteor application.
You basically have two ways to achieve this include:
The road of glory. Create a package (meteor create --package), clone the source inside it, then edit and "Meteorize" the source (declare package-scoped variables instead of window-scoped, ...). You can then publish this package on Atmosphere so that others can benefit of it.
Copy/paste everything in a client/compatibility folder.
As explained in the docs, everything in this folder is not embraced with an IIFE and is executed before the other code files.
When you have the time to, be brave and take the heroes path.

Dependency manager for Web

I have 2 projects. They use same js/img files. When I change js content in first project I should also change it in second project. I wanna make it as dependency. So I deploy changes to my local repository, then goto project1/project2, call update and changes are loaded.
I have tried to use bower but it doesn't satisfy me because of some strange behaviour (it copies whole folder content and ignores main section in component.json)
How can I implement normal dependency managment in my project? note: I need to manage my local dependencies
The main property in component.json is currently only used for other tools using Bower. There is currently a discussion going if Bower should have a .bowerignore file for ignoring files it doesn't need.
You might be better of just using a git submodule or symlinking the files.
Alternatively you could check out if any of the other JS package managers fills your need: npm, Ender, volo, component, jam
Another option (if you just want to fetch single files) might be: pulldown.
Configuration is extremely simple and you can easily add your own files/urls to the list.

Bundler for javascript, or how to source control external javascript files

I am in the process of converting an existing Rails 3.1 app I made for a client into a Backbone.js app with the Rails app only as a backend server extension. This is only a personal project of mine, to learn more about Backbone.js.
While setting up Backbone.js (using Backbone-on-Rails), I noticed I have some dependencies (like backbone-forms) that come from external sources and are frequently updated.
I've grown accustomed to using Bundler to manage my Ruby gems, but I haven't found anything similar for JavaScript files. I'm wondering if there is any way to do the same for Javascript (and possibly css) files.
Basically I can see three possibilities to solve this issue:
Simply write down all the sources for each JS file and check these sources from time to time to see what has changed.
Use some kind of existing "Bundler for Javascript" type of tool, I've been looking for something like this but have yet to find anything (good).
Since most of these JS files will be coming from Git anyway, use Git to get the files directly and use checkout to get the latest version from time to time.
I prefer the last option, but was hoping on some more input from other people who have gone this route or preferred some other way to tackle this issue (or is this even an issue?).
I figure the Git way seems easy, but I am not quite sure yet how I could make this work nicely with Rails 3.1 and Sprockets. I guess I'd try to checkout a single file using Git and have it be cloned in a directory that is accessible to Sprockets, but I haven't tried this yet.
Any thoughts?
You don't mention it in your alternatives, but ideally you should use something like Maven to manage your dependencies. Unfortunately, there are no public repositories for javascript files. This discussion lists some other options which might be of help to you: JQuery Availability on Maven Repositories
For now I've settled on using the Git solution combined with some guard-shell magic.
The steps I follow:
Create a dependencies directory somewhere on your local drive
Clone the repositories with javascript (or css) files you want to use in the app
Set up a custom guard-shell command to do the following:
group 'dependencies' do
guard 'shell' do
dependencies = '~/path/to/dependencies/'
watch(%r{backbone-forms/src/(backbone\-forms\.js)}) {|m| `cp #{dependencies + m[0]} vendor/assets/javascripts/#{m[1]}` }
end
end
Place the Guardfile at the root of the app directory
It takes some time to set things up, but after that, when you have the Guard running, and you pull changes into your dependencies, the required files are automatically copied to your application directory, which are then part of your repository.
It seems to work great, you need to do some work for each new file you want to include in the asset pipeline, but all that is required is cloning the repository in your dependencies directory and adding a single line to your Guardfile, for example for the backbone-form css:
watch(%r{backbone-forms/src/(backbone\-forms\.css)}) {|m| `cp #{dependencies + m[0]} vendor/assets/stylesheets/#{m[1]}` }
Also, the reason I added this Guard to a group is because I keep my dependencies outside the main application directory, which means guard normally doesn't check my dependencies directory. To make this work, I start up my main Guard processes using bundle exec guard -g main and use bundle exec guard -w ~/path/to/dependencies -g dependencies in a new terminal window/tab to specify the -w(atchdir).

Categories

Resources