3 ms·
Ah, gotcha. Thanks! >I generally don't consider installing from npm a build step. I also don't really consider rewriting import specifiers a build step - it's
by mtlynch 4y ago
Ah, gotcha. Thanks!
>I generally don't consider installing from npm a build step. I also don't really consider rewriting import specifiers a build step - it's just locating files on disk.
Sorry, maybe this is just my JS ignorance, but I don't understand how this runs without a build step.
If I run npm -i lit, it puts lit into node_modules. But then if I put "import {LitElement, html} from 'lit';" into a JS file and run a dumb static webserver (like python3 -m http.server), what's linking "from 'lit'" to the necessary files in node_modules?
I just tried running the first tutorial[0] verbatim after npm installing lit to the same directory, and I get:
Uncaught TypeError: The specifier “lit” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”. my-element.js:1:31
I'd love to use this, I'm just not following how this works.
Is it designed to run server-side rather than for static sites?
[0] https://lit.dev/tutorials/intro-to-lit/ https://lit.dev/tutorials/intro-to-lit/
- TimTheTinker 4y agoLooks like you need a <script type="importmap"> -- it could map 'lit' to the CDN hosted version or to a relative path. More info: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sc...
- mtlynch 4y agoAh, thanks! I'd never encountered these before. It seems like a handy way to make my code match the code in documentation that assumes a Node environment.
- TimTheTinker 4y agoNo problem! There's also a polyfill if you need to support Safari: https://github.com/guybedford/es-module-shims https://github.com/guybedford/es-module-shims
- chrisehlee 4y agoThankfully iOS 16.4 will be natively supporting import maps so fingers crossed this might be easier soon https://webkit.org/blog/13878/web-push-for-web-apps-on-ios-and-ipados/ https://webkit.org/blog/13878/web-push-for-web-apps-on-ios-a...
- e111077 4y agoWhen one writes `import 'lit'` the browser doesn't know where Lit is. This is called a bare module specifier vs an absolute import specifier: import '/home/user/project/node_modules/lit/index.js' A relative specifier: import '../node_modules/lit/index.js' Or a URL Specifier: import 'https://unpkg.com/lit?module' So you have four-ish options to tell the browser where to look for 'lit': 1. Use a server that will use the node module resolution algorithm and transforms it to a relative specifier as it encounters the import (transform/build-ish?) 2. Use experimental "import maps" to go fully buildless to tell the browser where to point that bare module to (buildless) 3. Bundle all your code (build step) 4. Use a bundle from a CDN Here are some examples of each: Server that transforms import specifiers (lit.dev does this by default): https://lit.dev/playground/#gist=9092862a77acf73dd1e6faa73a326be9 https://lit.dev/playground/#gist=9092862a77acf73dd1e6faa73a3... (build-ish) Import Maps (2): https://lit.dev/playground/#gist=0c4f66396b333c82cb27e7dd3b2129c0 https://lit.dev/playground/#gist=0c4f66396b333c82cb27e7dd3b2... (buildless) https://lit.dev/playground/#gist=91c0b286698612b013eb81881ffdfeb2 https://lit.dev/playground/#gist=91c0b286698612b013eb81881ff... (build-ish) Url Specifiers (2): https://lit.dev/playground/#gist=05655736300f0425644e61a626410aef https://lit.dev/playground/#gist=05655736300f0425644e61a6264... (buildless) https://lit.dev/playground/#gist=6d23e8e8dadacd7488bdec81d0f6aa78 https://lit.dev/playground/#gist=6d23e8e8dadacd7488bdec81d0f... (build-ish) hope this helps with some of your questions
- mtlynch 4y agoCool, appreciate the thorough answer! I'll give Lit another look now that I understand how to run it buildless + static.