Comments (28)
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"
],
"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.
Related Issues (20)
- virtual module not found error HOT 1
- add type defines for `CachedInputFileSystem` ? HOT 5
- CachedInputFileSystem OOM when duration is infinity HOT 5
- signature of method `stat` in interface `FileSystem` mismatches. HOT 2
- bug: exports map key with star in the middle doesn't work HOT 1
- is this possible with webpack AliasPlugin to automatically switch to a different alias when original file is deleted? HOT 7
- can't resolve exports pattern startsWith wildcards HOT 1
- Use of `extensionAlias` fails resolution of subpath exports in `exports` fields HOT 2
- resolving packages entrypoints with a non-standard node_modules HOT 4
- `exports.types` after `exports.default` HOT 5
- Hooks do not fire events from CSS/SCSS imports HOT 6
- AliasPlugin crash when file is deleted or rename (have to restart to make it work)
- Seeing "Error: No file content" for different package.json files when webpack rebuilds HOT 1
- ESM: Resolving to the wrong package with `exports` and nested same package but different versions HOT 3
- ESM: package.exports array target not conforming to the ESM specification HOT 10
- Add ability to handle win32 relative paths HOT 4
- [Feature Request]: Support resolve the modules with hard-links HOT 5
- lstat error when requiring virtual modules HOT 14
- Can i use withOptions Api ? HOT 1
- File Extension Substitution for TypeScript Support HOT 19
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from enhanced-resolve.