Resolve main entry for bower and component about enhanced-resolve HOT 28 CLOSED

component has a different resolving logic. Here is a webpack plugins that handles this: component-webpack-plugin.

from enhanced-resolve.

I see!
What about bower?

from enhanced-resolve.

That's not supported by default, but you can add it with this webpack plugin:

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

from enhanced-resolve.

Thank you! That's good to know :D

However, while having everything as a plugin is great for flexibility, basic stuff like this should be enabled by default, because if not it hampers wide adoption for beginners.
I for example, can see adding this ResolverPlugin to all the projects using webpack.

The problem is; how do you choose which package manager support by default for at least resolving paths?
A good way is to check what the community is using right now and what are the most popular projects.

You can compare project activity metrics here:
https://www.ohloh.net/p/compare?project_0=Twitter+Bower&project_1=component&project_2=isaacs%27s+npm

So right now npm and bower are the most used ones, being followed by component.
npm being the de facto standard in server-side, and bower being the de facto standard in the client-side of things.
Other package managers (volo, jam, etc) are as near as popular, so it's not crucial to have them working by default.

As you can see here it's not crazy and it seems to be becoming the norm to use npm, bower and component at the same time.
http://superbigtree.tumblr.com/post/58075340096/my-strategy-for-client-side-package-managers-choosing

If not at the very least, this could be remarked in the documentation.

In the end, having sensible defaults on this side can be something crucial for reaching wide adoption :)

from enhanced-resolve.

Update on this:

There are some packages that include an array of strings instead of a string.
Like this bower.json

Also main can be an object per the specification (see here and here)

I'm beginning to think that it will be better to create a BowerPlugin, how would you solve this?

from enhanced-resolve.

What should happen if the main field contains multiple files? We can only resolve to one file.

from enhanced-resolve.

That is a good question. How does it works for component.json?

A sensible way would be to concatenate all the main files.
For example here it's just a shim+main file.

The spec for this is yet not fixed as you can see here, but it should be a good idea to start handling all of this in a BowerPlugin.

from enhanced-resolve.

The component-webpack-plugin resolves to the component.json and loads it with a special loader. It could be handled the same way in a BowerPlugin.

from enhanced-resolve.

I'm still getting too big of a bundle (including .min and alternate files) when trying to use with some bower packages.

For Bootstrap and Chaplin, for instance, calling require('chaplin') causes Webpack to glob the whole directory @ ./bower_components/chaplin ^\.\/.*$ including minified files. I've got my plugin setup as above, but I can't tell why it's failing in this case (since it works with most of the other dependencies in the app).

from enhanced-resolve.

Try to compile with --display-reasons. That should show which line is causing the inclusion...

from enhanced-resolve.

What about for the node api?

from enhanced-resolve.

Use stats.toString({ reasons: true }).

from enhanced-resolve.

WARNING in ./bower_components/chaplin/chaplin.js
Critical dependencies:
312:23-42 the request of a dependency is an expression
309:13-43 the request of a dependency is an expression
 @ ./bower_components/chaplin/chaplin.js 312:23-42 309:13-43


WARNING in ./bower_components/chaplin/bower.json
Module parse failed: /Users/adam/Projects/map/bower_components/chaplin/bower.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "name": "chaplin",
|   "repo": "chaplinjs/downloads",
|   "version": "1.0.0",
 @ ./bower_components/chaplin ^\.\/.*$

WARNING in ./bower_components/chaplin/package.json
Module parse failed: /Users/adam/Projects/map/bower_components/chaplin/package.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "name": "chaplin",
|   "version": "1.0.0",
|   "description": "Chaplin.js",
 @ ./bower_components/chaplin ^\.\/.*$

WARNING in ./bower_components/chaplin/.bower.json
Module parse failed: /Users/adam/Projects/map/bower_components/chaplin/.bower.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "name": "chaplin",
|   "repo": "chaplinjs/downloads",
|   "version": "1.0.0",
 @ ./bower_components/chaplin ^\.\/.*$

WARNING in ./bower_components/chaplin/README.md
Module parse failed: /Users/adam/Projects/map/bower_components/chaplin/README.md Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
| # Chaplin downloads
|
| Stable versions of [Chaplin](http://chaplinjs.org).
 @ ./bower_components/chaplin ^\.\/.*$

WARNING in ./bower_components/chaplin/component.json
Module parse failed: /Users/adam/Projects/map/bower_components/chaplin/component.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "name": "chaplin",
|   "repo": "chaplinjs/downloads",
|   "version": "1.0.0",
 @ ./bower_components/chaplin ^\.\/.*$

from enhanced-resolve.

stats.toString({
  modules: true,
  reasons: true
});

It should display the list of modules in your application including references to all requires of this module. You should find the @ ./bower_components/chaplin ^\.\/.*$ module and check which module requires it.

from enhanced-resolve.

Ok the key line seems to be here:

   [15] ./bower_components/chaplin ^\.\/.*$ 376 {0} [built] [5 warnings]
        cjs require context . [2] ./bower_components/chaplin/chaplin.js 312:23-42
        amd require context . [2] ./bower_components/chaplin/chaplin.js 309:13-43

Chaplin dynamically requires files matching "controllers/" + controllerName as they're needed, which seems to trigger webpack to glob the vendor folder where the chaplin lib lives but not in my project directory like I'd like. Is there a way to disable the automatic globbing here? (and while I'm at it, any way to set up the auto-imports for controllers this way?).

I pushed the code to github here: https://github.com/akre54/Chaplin-webpack

from enhanced-resolve.

It would be better if the first argument is an array. e.g.:

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

and DirectoryDescriptionFilePlugin should pick up and use the first one in sequence, noticed that Bower supports bower install some-non-bower-component, and it will generate a .bower.json file for those package that does not have a bower.json (or component.js from the old time sake).

from enhanced-resolve.

@blai Good point! 👍

from enhanced-resolve.

I've created bower-webpack-plugin, which works similar to component-webpack-plugin. That is, it resolves a main manifest file, parses it, and requires files pointed by it.

@sokra any remarks regarding the usage of the plugin API are well come, if you will and find a moment.

from enhanced-resolve.

Cool @lpiepiora 👍

from enhanced-resolve.

@akre54 I have the same problem. Do you have a solution yet?

from enhanced-resolve.

We moved on from Chaplin, but as I recall there was a bug in
ContextRequirePlugin that sokra fixed pretty quickly. Try searching the
issues for my name.

On Sun, Mar 22, 2015, 11:59 Sebastian Deutsch [email protected]
wrote:

@akre54 https://github.com/akre54 I have the same problem. Do you have
a solution yet?

—
Reply to this email directly or view it on GitHub
#3 (comment)
.

from enhanced-resolve.

@gunta concatenating the files wouldn't always work. I've seen modules with main containing a JS file and a CSS file.

from enhanced-resolve.

@quarterto that is still ok. You can have "sensible" values for the plugin as in:

if js 
    require js

if js + css
    require js
    require css

from enhanced-resolve.

What if you're not using Webpack for CSS?

from enhanced-resolve.

@quarterto Well the idea is to optimise the workflow for the common case where you do use WebPack for all the assets.

Let's say you have the following library in a "widget-button" folder:

main:
  widget-button.js
  widget-button.css

Doing

require('widget-button');

should require both files.

If you want to, for some reason, not use Webpack for the CSS, or not include any other assets,
you would do

require('widget-button/widget-button');

from enhanced-resolve.

The current implementation for new DirectoryDescriptionFilePlugin("bower.json", ["main"])
doesn't work for bower.json description files when 'main' field is an array.

For example in the angular-xeditable bower.json description file:

"main": [
    "dist/css/xeditable.css",
    "dist/js/xeditable.js"
  ],

angular-growl-2

"main": [
    "./build/angular-growl.js",
    "./build/angular-growl.css"
  ],

angular-ui-bootstrap
"main": ["./ui-bootstrap-tpls.js"],

The expected behavior should be to require all files in the array, and return the .js file as module file

from enhanced-resolve.

There is a bower-plugin, which should handle this

from enhanced-resolve.

I have made a small plugin to support array like main fields in bower.json: https://github.com/codewizz/bower-resolve-webpack-plugin

from enhanced-resolve.