Going Buildless
Hi all 👋
I'm in a long distance relationship, and this means that every few weeks I'm on a plane to England. Everytime ...
For further actions, you may consider blocking this person and/or reporting abuse
This import maps things is pretty cool! When you used it to polyfill
kv-storageyou used/web_modules/kv-storage-polyfill.jsas the initial call:Would it be possible to go the other way:
Which would allow the seemingly more “correct”
import { StorageArea } from ‘std:kv-storage’? Or maybe “long lasting” is the better word…It seems that as of now, this is not possible, chrome will log the following in the dev tools:
Ignored an import map key "std:kv-storage": Invalid key (non-fetch scheme)Even though, according to the spec that should be possible yeah: github.com/WICG/import-maps#for-bu...
What about importception
Then in use
Would that work?
Hehe, that'll still result in:
Ignored an import map key "std:kv-storage": Invalid key (non-fetch scheme)What a shame...the future can't come fast enough!
Thanks, that's really inspiring! I am often wondering how cool it would be to shake of rollup (and friends) as well, thanks to this post now I know the direction! :)
But regarding
import-map, what about other browsers? Is there a polyfill maybe?Yep, you can use es-module-shims for that
Cool, thanks! :)
I love this exploration of the cutting edge of web development.
I used
lit-html, dynamic imports, and Pika CDN recently on a little project and it was a wonderful experience.I read up on import maps and the standard modules last year but didn't realize they had been deployed in Chrome (behind flags).
Thanks for coming up with this cool post to showcase the direction that JS browser tech is going!
The latest version of @pika/web will even generate an import map for you automatically! You can check out the v0.5.0 release notes here for more info: github.com/pikapkg/web/releases/ta...
Loved this article, it does a great job of connecting a lot of really new and tricky stuff into one easy-to-follow story. Well done!
Woah, thats awesome! I'll play with that and update the blog when I tried it out 😊
One thing to note is that I dont believe it's currently possible (in the Chrome implementation anyway) to load an import map as
<script type="importmap" src="myImportMap.json"/>, though according to the spec something like this should be possible: github.com/WICG/import-maps#import...Which may be a thing to document just in case.
I made a thing for you:
npmjs.com/package/are-you-tired-yet
Hahaha dude thats awesome 😂
Thanks, going buildless is very interesting, but how do you uglify/minify your assets (JS, CSS, even images...) without a build step ?
For a long time, having a build step has been the de facto standard for frontend projects, and have added significant complexity and configuration to projects, and it's been hard to build anything without a build step.
As from this blog by Fred Schott A Future Without Webpack: "In 2019, you should use a bundler because you want to, not because you need to.", and today, we can.
This blogpost shows that we now have the standards (es modules, import maps) to do so; we can go buildless, and you can add a buildstep if you need to improve performance, but we dont require a buildstep. And many apps may not even need it, for example pika.dev, or this reddit app I showcase, or perflink by Luke Jackson.
There are also platforms that host your applications that can do minification for you, like Netlify. Netlify has options to minify your assets for you
Check out this project as well hqjs.org it might be the only tool you need. And it is as simple as one command to start development.
I got tripped up briefly by import-maps not already being enabled by default (yet!). Here's the link to enable this functionality in chrome.