Live data from Hacker News

Writing JavaScript without a build system

jvns.ca

91–100 of 187 posts

Re: Writing JavaScript without a build system

#91
post #6

All those extraneous elements to Javascript are a real turn-off. Python: batteries mostly included. Javascript: feels like you need to drag a dozen suitcases along anytime you embark on any non-trivial project.

Python has a fat standard library with a ton of cruft, but they are also missing crucial stuff like a `fetch`.

Re: Writing JavaScript without a build system

#92

Earlier quoted context omitted.

You’re missing the entire point. That’s still a build process and still has additional overhead for both development and deployment.

Have you used Vite before? If you have a simple project it's surprisingly fast and painless. What's the "additional overhead" you're talking about? I experienced that with Webpack, but not Vite. The author even shouts out esbuild as being "a little more stable", which Vite uses under the hood.

I think he just means you have to build before deploying and while developing. Even if that build takes fractions of a second and is trivially scaffolded and automated in a modern context, it’s still technically an extra step. There was a time I might have agreed with that take but I’ve since embraced the build since unless we’re talking about the kind of JavaScript you’d embed in a single blog article and then promptly forget about, chances are you’ll want to introduce build tools eventually.

Re: Writing JavaScript without a build system

#93

A lightning rod of an idea I’m sure, but would it help if typescript was accepted by browsers but ignored? Then I can write my typings in-line rather than in comments, and check them, but not have to transpile. I guess “enum” as a special snowflake would fail this. Where I’m coming from is that I can live without most build steps for a small project… but I can’t live without typescript.

I can happily live without TypeScript (ka-chow) but at the same time I don’t see why not.

Re: Writing JavaScript without a build system

#94
post #87

Earlier quoted context omitted.

I've been looking for a modern JS library that doesn't require a build step, and I've always skipped over Lit because I thought it depended on a build until this comment. Is there any documentation about using it without a build? All the documentation and tutorials seem to assume a build step. I've found several different "getting started" entrypoints on the site, and they all begin with "npm install" and "import {Li…

Some of this depends on what you consider a build step. 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. Regardless, we do have some workflows for completely "tool-less" (or local-tool-less). - We publish bundles to jsDelivr: https://lit.dev/docs/getting-started/#use-bundles - You can import directly…

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/

Re: Writing JavaScript without a build system

#95
You can use ES6 imports for JS and CSS directly in the browser, by including es-module-shims[1]. No need for a package manager, transpiler, or build step.

import Pkg from 'https://site.com/pkg.js'

import sheet from 'https://site.com/sheet.css' assert { type: 'css' };

1: https://github.com/guybedford/es-module-shims

Re: Writing JavaScript without a build system

#96

Earlier quoted context omitted.

> The appeal of JavaScript when it was invented was its immediacy. You can still do that. Nothing has changed. It's probably gotten even easier. Have fun implementing a complex UI without some sort of component Framework though.

You can easily build complex UIs without a framework. Chrome DevTools, Chrome OS, Photoshop, Firefox and other very complex apps have been built with web components.

Web Components aren’t an alternative to React so much as a complementary technology. Yes, you can build UIs without a reactive framework but it will involve compromises in expressivity, code organization, and whatever the Greenspun equivalent is for React.

Re: Writing JavaScript without a build system

#98
post #94

Earlier quoted context omitted.

Some of this depends on what you consider a build step. 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. Regardless, we do have some workflows for completely "tool-less" (or local-tool-less). - We publish bundles to jsDelivr: https://lit.dev/docs/getting-started/#use-bundles - You can import directly…

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…

Looks like you need a -- 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/sc...

Re: Writing JavaScript without a build system

#99
post #94

Earlier quoted context omitted.

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…

Looks like you need a -- 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/sc...

Ah, 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.

Re: Writing JavaScript without a build system

#100
post #94

Earlier quoted context omitted.

Some of this depends on what you consider a build step. 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. Regardless, we do have some workflows for completely "tool-less" (or local-tool-less). - We publish bundles to jsDelivr: https://lit.dev/docs/getting-started/#use-bundles - You can import directly…

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…

When 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=9092862a77acf73dd1e6faa73a3... (build-ish)

Import Maps (2):

https://lit.dev/playground/#gist=0c4f66396b333c82cb27e7dd3b2... (buildless)

https://lit.dev/playground/#gist=91c0b286698612b013eb81881ff... (build-ish)

Url Specifiers (2):

https://lit.dev/playground/#gist=05655736300f0425644e61a6264... (buildless)

https://lit.dev/playground/#gist=6d23e8e8dadacd7488bdec81d0f... (build-ish)

hope this helps with some of your questions

Post reply on HN