#React script unpkg

[arizonamains]

React script unpkg

#React script unpkg how to#

#React script unpkg how to#

At the time of this writing, that’s what the React docs show you how to do it for basic examples, i.e.: ReactDOM. Granted, you can author in JSX and ship it directly to the browser. (Once we get stuff like import maps you wouldn’t even have to do this.) I import the libraries in one place and export them for use in other files. For example, having a deps.js file makes it so I don’t have to write out those long CDN URLs all the time. Then my index.js file: import ` īut as I mentioned, I like splitting the JavaScript out into individual modules because it helps me expand and grow the functionality over time. If it becomes viable longer term, I then consider factoring in a build process, removing my dependence on React, etc.įirst, I have my root HTML file ( index.html): Title of Your Page This is a great place to start with an idea. The code I write is the code that ships to the browser. It allows me to leverage React and write JSX-like syntax without any dependence on a build tool. Ok, so, with that context in mind, I have this little boilerplate I’ve pieced together from a couple different sources (big thanks to the preact docs). computer-“can I get this working?”-and I find that I’ll move heaven and earth just to see something work only to realize that what I wanted to do was building something usable in a browser, not optimize and streamline my “DX”. It’s like I immediately forget that I was trying to build something useful and instead it becomes a fight of nerd vs. The moment configurations, build processes, and what not get involved, those become the focus of my attention. Using a framework like React can make doing that incredibly easy-as long as there is no build tooling involved. I find myself quite often needing to prototype something really quick, sometimes even build an “MVP” of something I can put out into the world for feedback. First off: this is mostly a reference for myself.

[suzanneshannon]

Snowpack

Snowpack. Love that name. This is the new thing from the Pika people, who are on to something. It's a bundler alternative, in a sense. It runs over packages you pull from npm to make sure that they are ES module-compatible (native imports).

This is how I digest it. When you write a line of code like:

import React from "react";

That's actually invalid JavaScript. It looks like a native import, but it isn't. (It would start with a filepath character like ./ and end in .js to be valid.) It's just an agreement from Big Bundler like, "Oh, I know what you mean. You mean I should go look in node_modules for this thing." Then it goes and does it.

A lot of stuff on npm isn't ready for ES modules. It's in some other module format (e.g. CommonJS) and assumes you'll be using a bundler with it. An assumption served them just fine for a while, but it's an assumption that is starting to be a bit of a thorn for front-end developers.

UNPKG has had a feature where you could add ?module to the end of their URLs to get it to serve up an ES module-friendly version of the package, but it's been in an experimental stage for a long time because, presumably, it's a hard problem to solve. Which packages are ready for ES modules? Can they be processed to be ready on the fly?

Even the Pika CDN doesn't solve the issues of packages that aren't written to be used via ES modules. For example, since React isn't written to be used with ES modules directly, so you just can't (but you can still use it via <script> tag).

Snowpack has apparently dealt with this. It runs its magic over the packages that you install (locally) and prepares them for ES module usage. So, after Snowpack has ran, now you can do this (which you haven't been able to do before):

import React from '/web_modules/react.js';

Which is valid code for ES modules. Plus, if you run Babel anyway, you don't even have to change that original line.

Hence their marketing/explanation:

1) Instead of bundling on every change, just run Snowpack once right after npm install. 2) Snowpack re-installs your dependencies as single JS files to a new web_modules/ directory. 3) Write code, import those dependencies via an ESM import, and then run it all in the browser. 4) Skip the bundle step and see your changes reflected in the browser immediately after hitting save. 5) Keep using your favorite web frameworks and build tools! Babel & TypeScript supported.

It's kinda like you get native code splitting for free, and you're just crossing your fingers that ES modules will be just as fast as bundling with that benefit. I'm optimistic. I think it's early days and would be nervous on Big Production Stuff, but I also think native ES modules are probably the future.

The post Snowpack appeared first on CSS-Tricks.

Snowpack published first on https://deskbysnafu.tumblr.com/