5 ms·

Yarn is particularly great for front-end web apps because of its flat installation mode. ES6 module imports and HTML Imports both require that dependencies are

Yarn is particularly great for front-end web apps because of its flat installation mode. ES6 module imports and HTML Imports both require that dependencies are imported by URL. This means that the only reliable way to import another module is by relative URL, like: import * as $ from '../jquery/jquery.js'; This requires that packages are installed flat, as siblings. Yarn is going to enable native JS modules and projects like Polymer to use npm instead of Bower. :)

MatthewPhillips 10y ago
This is what I was most curious about, but it looks like --flat is a cli option but not the default. Definitely moving in the right direction though!
- spankalee 10y ago
  --flat is the cli option, but there's also "flat": true support in package.json. Used at the top level this forces a flat install, but used in a dependency it means that that package requires a flat install and it throws an error if it's not. This means that HTML imports and ES6 modules can force flat installs and start moving the front-end package ecosystem in that direction.
dismantlethesun 10y ago
You can use webpack or JSPM to resolve directories at the top level. That way you can just import "web/X" even if the web/ directory isn't a sibling to your current file. It's not very helpful if you are distributing an NPM package, but for people who aren't authoring libraries, its a godsend.
- spankalee 10y ago
  Do you mean import '/web/X'? Import URLs have to start with a `/`, `./`, or `//`. Even so, that requires a build tool. I want to be able to load working sources directly out of my packages directory.
  - dismantlethesun 10y ago
    > Do you mean import '/web/X'? Not if you use a build tool for your frontend. > Even so, that requires a build tool. That was basically what I was suggesting. I'm not sure what the other option really is. If you're working within the browser (implied by this being a frontend), then you have to use a build tool since javascript modules/imports haven't landed in any browser yet.
    - spankalee 10y ago
      > If you're working within the browser (implied by this being a frontend), then you have to use a build tool since javascript modules/imports haven't landed in any browser yet. For now, but native JS module loading is right around the corner, and at that point I don't want to have a required tool to load my modules. Currently I use HTML Imports, which don't require tools because they use relative URLs. It works really well, so I hope to use that pattern with JS modules.

MatthewPhillips 10y ago

This is what I was most curious about, but it looks like --flat is a cli option but not the default. Definitely moving in the right direction though!

spankalee 10y ago
--flat is the cli option, but there's also "flat": true support in package.json. Used at the top level this forces a flat install, but used in a dependency it means that that package requires a flat install and it throws an error if it's not. This means that HTML imports and ES6 modules can force flat installs and start moving the front-end package ecosystem in that direction.

dismantlethesun 10y ago

You can use webpack or JSPM to resolve directories at the top level. That way you can just import "web/X" even if the web/ directory isn't a sibling to your current file. It's not very helpful if you are distributing an NPM package, but for people who aren't authoring libraries, its a godsend.

spankalee 10y ago
Do you mean import '/web/X'? Import URLs have to start with a `/`, `./`, or `//`. Even so, that requires a build tool. I want to be able to load working sources directly out of my packages directory.
- dismantlethesun 10y ago
  > Do you mean import '/web/X'? Not if you use a build tool for your frontend. > Even so, that requires a build tool. That was basically what I was suggesting. I'm not sure what the other option really is. If you're working within the browser (implied by this being a frontend), then you have to use a build tool since javascript modules/imports haven't landed in any browser yet.
  - spankalee 10y ago
    > If you're working within the browser (implied by this being a frontend), then you have to use a build tool since javascript modules/imports haven't landed in any browser yet. For now, but native JS module loading is right around the corner, and at that point I don't want to have a required tool to load my modules. Currently I use HTML Imports, which don't require tools because they use relative URLs. It works really well, so I hope to use that pattern with JS modules.