I've been cranking out some might-fine components that use Bower. I'm not a RequireJS kind of guy, but a lot of my users are. I don't know the best way to setup dependencies for them.
If you have any feedback, please provide it in the Issue Tracker.
This repo has several versions of the same example. I'm trying to figure out the best way to implement it.
The example is set up like a project using Bower. It uses two components. Here's their file structure:
components/
greeter/
greeter.js
recipient/
recipient.js
name.js
And their dependency structure:
greeter/greeter
recipient/recipient
recipient/name
greeter/greeter
relies on recipient/recipient
. recipient/recipient
relies on recipient/name
.
I've put together three versions:
My initial attempt is to use shorthand aliases for dependencies. Users then have to set up these aliases as config paths.
// main script file base.js
requirejs.config({
paths: {
greeter: 'components/greeter/greeter',
recipient: 'components/recipient/recipient'
}
});
requirejs( [ 'greeter' ], function( Greeter ) {
new Greeter();
});
Aliases can then be used for dependencies.
// greeter.js
define([ 'recipient' ], function( Recipient ) {
But this doesn't work as it breaks relative dependencies.
// recipient/recipient.js relies on recipient/name.js
define( [ './name' ], function( recipientName ) {
No dice.
GET http://localhost/requirejs-bower-homework/config-aliases-main/name.js 404 (Not Found)
Provide your feedback for this example in issue #1.
To remedy this, I could require users to setup aliases for every file necessary.
requirejs.config({
paths: {
greeter: 'components/greeter/greeter',
recipient: 'components/recipient/recipient',
'recipient-name': 'components/recipient/name'
}
});
// recipient/recipient.js
define( [ 'recipient-name' ], function( recipientName ) {
It works, but this seems a bit heavy-handed and hard to automate. Provide your feedback for this example in issue #2.
@necolas recommends Configure the path to point to the lib roots.
paths: {
greeter: 'components/greeter',
recipient: 'components/recipient'
}
Keep discussion on Issue #1
Instead of using aliases, the component-path example uses the component path.
// base.js
requirejs( [ 'components/greeter/greeter' ], function( Greeter ) {
// greeter.js
define([ 'components/recipient/recipient' ], function( Recipient ) {
This can still work if the main script is not in the root directory, by providing a config path to components
.
// deep/logic/far-out.js
requirejs.config({
paths: {
components: '../../components'
}
});
requirejs( [ 'components/greeter/greeter' ], function( Greeter ) {
This seems to be the most efficient way to handle Bower dependencies. However, I'm worried that it relies too much on the Bower file structure. Provide your feedback for this example in issue #3.
If you have a better way of handing dependencies with RequireJS, just open up a new issue, or better yet, fork this project and add in your example with a Pull Request.
These projects all use Bower to manage dependencies. Your assistance would go a long way.
- Masonry
- Isotope (eventually)
- Packery
- imagesLoaded
- Draggabilly