Comments (25)
Maybe it's just writing a loader for component.json
and setup component.json
as default module file. I have to check it.
from webpack.
As far as I understood everything a module needs is defined in the component.json
. A require()
within a module can simply be resolved by examining the component.json
. For instance:
component.json
{
"name": "test",
"repo": "jhnns/test",
"dependencies": {
"component/emitter": "*"
},
"development": {},
"scripts": [
"index.js",
"template.js"
]
}
index.js
// requires starting with a dot are located relative to the current module (like node)
var template = require("./template.js"),
// requires not starting with a dot are expected to be under ./components
// the / is replaced by a -
// this module for instance would be located at ./components/component-emitter
emitter = require("component/emitter"),
// this is not valid as the referenced module is not included in the scripts-array
// currently 'component build' prints no warning, but by runtime require() will
// throw an exception
bla = require("./bla.js");
As I mentioned in #47 component uses a flat dependency hierarchy. This means that every component an application uses is installed directly under ./components/<user>
-<project>
.
Regarding styles webpack should not automatically include the styles via the style-loader. This decision should be up to the developer imho.
You can find more information in the spec. I'm currently not sure how this will turn out but components brings some good ideas (e.g. simplicity, no opinionated styling, no or just a few dependencies). On the other hand it adds another fragmentation to the community.
from webpack.
Thanks for the explaination. The resolving process is more complex than i thought. We may need some plugin system for the resolver...
from webpack.
Yes. This could work well with your latest changes on webpack. π
from webpack.
webpack 0.9 is nearly a complete rewrite ;)
from webpack.
I think it can be quite easy to make webpack work with component. I'm not sure but maybe webpack just has to add ./components as a lookup path (like node_modules and web_modules). Relative requires require("../b.js")
inside the modules should work like expected (as they are the same as in node) and dependency requires require("moduleA")
should resolve than too - oh wait ... there is this thing that dependencies are stored differently within the components folder.
Hopefully they'll change this π componentjs/component#212
from webpack.
emitter = require("component/emitter"),
That may be how they're namespaced (github-style) but that's not how they're requirable. You have to use emitter = require("component-emitter"),
from root namespace (where you're usually not).
When you're, say, in index.js
of your component (with index.js
being referenced from scripts: []
property), it's just require('emitter')
because it's aliased.
from webpack.
Ah ok. Didn't get that π
from webpack.
I think he want to point out, that you write require("emitter")
, which checks the dependencies
and load component/emitter
if you depend on it, or sokra/emitter
if you depend on it.
from webpack.
I do mean that, but never sokra/emitter
. That just won't work. It is sokra-emitter
.
ie my components/ folder : http://i.imgur.com/QaGgy5G.png
from webpack.
Ok thanks for making that clear.
Another point, @jhnns mentioned: Should be stylesheets applied to the DOM on require
? Why not? I didn't find anything about that in the spec.
from webpack.
You just <link />
build.css
from webpack.
ok... I think I will make it configurable how the mapping between fields in component.json
and loaders should be:
{
// field in component.json ":" require request with "[file]" replaced
scripts: "[file]", // normal require
styles: "style!css![file]", // apply styles
less: "style!css!val!less![file]", // apply also less styles
coffee: "coffee![file]", // load also coffeescript
}
default:
{
scripts: "[file]",
styles: "style!css![file]"
}
so you can opt-out from applying styles by: {scripts: "[file]"}
from webpack.
Mhmm I don't think that the component should decide whether to apply styles or not. It's the developers decision who uses the component in an application.
Also relying on the loader-syntax will break other module loaders / bundlers who don't support this syntax.
from webpack.
So I refactored the enhanced-resolve module to support plugins.
So it's now possible to write a ComponentsPlugin
for webpack, which
- adds resolving logic for components
- registers a
component-loader
forcomponent.json
The component-loader
process the component.json
and applies fields.
new ComponentPlugin({
styles: "!style!css![file]",
});
require("emitter");
- Lookup the nearest
component.json
- Reads the
component.json
and the the full name of the dependency - Resolves to
.../components/sokra-emitter/component.json
- The
component-loader
is applied. And generates something like this:
// component.json
{
"main": "main.js",
"styles": [
"style.css"
]
}
// !component-loader!component.json
require("!style!css!.../components/sokra-emitter/style.css");
module.exports = require(".../components/sokra-emitter/main.js");
- The remaining process is as normal...
from webpack.
Ah cool. So requiring components should work with webpack 0.9?
from webpack.
I think less than 200 LOC... :)
from webpack.
Wow. Let's hope that they don't change the specification too often.
from webpack.
Where can I find the ComponentPlugin?
from webpack.
I haven't made it yet....
from webpack.
Ah sorry, I misunderstood your comment. π
from webpack.
Wolla... here it is: component-webpack-plugin
from webpack.
as promised less then 200 LOC π
from webpack.
Great !
from webpack.
Awesome!!! π
from webpack.
Related Issues (20)
- Webpack build error for second time HOT 1
- `exportsPresence` does not work for unused imports HOT 3
- Implement ability to use "node:" prefixes for Node.js core modules HOT 1
- mangled exports breaks with destructuring assignment of JSON imports HOT 7
- there are confusing JDocs code
- Potential bug issues
- Webpack is not resolving node_modules specified in `resolve.modules` property.
- Dynamically loading chunks
- [Code implementation issues] ArrayQueue
- [feature] create cli HOT 3
- Not able to build node script
- bootstrap:27 Uncaught TypeError: __webpack_require__.nmd is not a function
- Self-reference dependency has unused export name when imported inside of a web worker
- support `import.meta.dirname` and `import.meta.filename` HOT 2
- <!-- identifier: admin-actions -->
- Remote into Web Component from React giving an error saying " Module does not exist in container"
- Multiple DefinePlugin instances cause aggressive cache invalidation due to collisions HOT 7
- Webpack fails when importing module
- import .scss build to js, the exported mapping is inconsistent with the usageγUrgent!!γ
- Unused code elimination and deduplication is not applied when using sass's api: 'legacy' setting
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 webpack.