Resolve main field as array for Bower

[mrm007]

Fixes #3 and webpack/webpack#143

[sokra]

mainModules is a string array and you push an array to it.

mainModules = mainModules.concat(content[field]);

[mrm007]

You're right. Should it not work as it is?

[sokra]

In #3 we check if it's better to not add this behavior to the core, but extract it into a BowerPlugin. This could handle arrays with multiple element. So I won't merge this until we decided what to do. (I tend to extract it into a BowerPlugin)

[mrm007]

This is a small change which

• is guarded by tests
• doesn't break any existing functionality
• enables us to import Bower components easily

So I don't get it -- why the need for BowerPlugin?

[sokra]

The spec says that all files in the main array should be used, not only the first. This cannot be implemented as patch to enhanced-resolve, but need to be implemented as BowerPlugin (like the ComponentPlugin).

Example: https://github.com/danialfarid/angular-file-upload-bower/blob/master/bower.json do really require both files from the main field.

[mrm007]

I don't think the example you referenced makes sense. From the README file:

<script src="/bower_components/angular/angular-file-upload-shim.js"></script>
<!--only needed if you support upload progress/abort or non HTML5 FormData browsers.-->
<!-- NOTE: angular.file-upload-shim.js MUST BE PLACED BEFORE angular.js-->
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular/angular-file-upload.js"></script>

The -shim file is not always needed so I think the package author has made an error including them both in main. See discussions in bower/bower#46 and bower/bower#110.

---

Futhermore, what if all JS files referenced in main have a default export? i.e.

// a.js
define([], function() {
    return function A() {};
});

// b.js
define([], function() {
    return function B() {};
});

Or in ES6:

// a.js
export default function A() {};

// b.js
export default function B() {};

In these cases how would webpack resolve the bundle?

[sokra]

@gunta

[timsuchanek]

Hey, what's the state of this? I really need this for my bower components to work.

[gunta]

Because the specs for Bower are not finished yet,
first of all, we should create a BowerPlugin, follow (or participate in) the discussion that is going on this new bower spec repository.

For example, main array style might be deprecated, and some WebPack config related features might be added, making a BowerPlugin a must.

[kilokeith]

DirectoryDescriptionFilePlugin.js cannot parse a the "main" field if it is an array of paths.

"main": [
  "./dist/jquery.countdown.js",
  "./dist/jquery.countdown.min.js"
],

While technically not correct according to the bower.js specs, it doesn't stop people from doing that.

[adri]

+1 for merging this. I'm not using bower but a custom "plugin" definition which states css/js/... files to load. For this it would be very handy to have the array check in place.

[sokra]

You can do this:

new webpack.ResolverPlugin(
  new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main", ["main", 0]])
)

[adri]

Thanks @sokra. I think I misunderstood what DirectoryDescriptionFilePlugin does. What I actually want is when resolving for example ./plugins/some-plugin, read the plugin.json and load all defined files. Example plugin.json:

{
  "name": "Some plugin",
  "description": "...",
  "css": [
   "css/some-css.css"
  ],
  "js": [
    "js/some-js.js"
  ],
  "templates": [
    "templates/a.html"
  ]
}

I'm having a hard time finding documentation for this, do you have a hint?

[sokra]

That's not possible by resolving. Resolving means it finds one file for a given request. For your use case you need a loader that generates a artificial module which require all files.

You can combine it with a plugin to resolve it correctly.

That's similar to what the component-webpack-plugin does.

[adri]

Awesome, thank you @sokra

[MrJH]

Why is this still open since november last year?

[jrunestone]

@MrJH I don't know but I got away with using this: https://github.com/lpiepiora/bower-webpack-plugin

[MrJH]

@swemaniac i'll give it a try next week, thx

[faller]

I tried

new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main", ["main", 0]])

and

new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])

but can't solve the problem.

https://github.com/lpiepiora/bower-webpack-plugin help a lot, thx!