Once upon a time, we could simply put an HTML and a script file into an FTP server, quickly have a working website and call it a day. Today, we have to jump through many hoops just to get the right things in the right places. Suppose Alice wants to spend her weekend making a simple to-do app or whatever little idea she enjoys. First, she has to install a big heap of 10k npm packages files. Then she spends a few hours searching how to get this week's js bundler working with the latest typescript with the latest trending UI framework. And a lot frustrating when things don't work or those articles have just outdated. Once she has actually started building the first feature for her little fun app, the weekend has mostly gone! But things are changing... A little backstory: CommonJS and ES Module Working with NodeJS, we all get familiar with CommonJS, the standard (read: legacy) way for NodeJS to load dependency code. After installing a module, for example, , we can load it into our code by using . This is how NodeJS handles dependency code from the beginning: lodash require('lodash') {snakeCase} = ( );

[ , , ].forEach( { .log(snakeCase(text));
}); const require 'lodash' 'HelloWorld' 'left pad' 'ECMAScript' => text console { }

exports.snakeCase = snakeCase; // somewhere in lodash package ( ) function snakeCase input // where magic happens ECMAScript 2015 (ES6) introduced ES Module - an official, standardized module system for JavaScript. It took a while to get here. Nowadays, and NodeJS ( ) ship support for ES Module by default. ES Module has the advantage of static analysis, tree shaking, and asynchronous. all major browsers since v13.2.0 {snakeCase} ;

[ , , ].forEach( { .log(snakeCase(text));
}); import from 'lodash' 'HelloWorld' 'left pad' 'ECMAScript' => text console { } // somewhere in lodash package export ( ) function snakeCase input // where magic happens In NodeJS, to enable ES Module, we have two choices: use extension or set in . And while most development tools understand ES Module, there are still many incompatibles. For example, TypeScript still . Or Vercel . So some transpilers and workarounds are still required. Hopefully the situation will change soon™. .mjs "type": "module" package.json does not support outputting to .mjs files does not work with ES Module Many packages in NodeJS are already shipped with ES Module files. But many packages are not. At the time of this writing, in , only supports by including in . Many other top packages still don't ship ES Module: lodash, moment, react, request, axios, chalk, commander, express... It's actually not a problem for NodeJS, because NodeJS allows using . the top 10 depended packages on npm tslib ES Module file "exports" package.json to work with both ES Module and CommonJS format import But browsers don't have that privilege. What if you want to import your favorite node module in the browser? Well, you have to be lucky. At the time of this writing, for React to get started in the browser is to include the UMD version in tag, and use the global variable : the recommended way <script> window.ReactDOM < = > script src "https://unpkg.com/react@17/umd/react.development.js" </ > script < = > script src "https://unpkg.com/react-dom@17/umd/react-dom.development.js" </ > script < > script ReactDOM.render( , .getElementById( )
  ); Hello, world! < > h1 </ > h1 document 'root' </ > script No ES Module for Alice. Skypack is a wonderful CDN service that transpiles node packages to be able to work well in the browser. It's backed by the Snowpack team. Simply put the package after and you are ready to go: Skypack name@version cdn.skypack.dev < = = > script type "module" src "myscript.js" </ > script { snakeCase } ;

[ , , ].forEach( { .log(snakeCase(text));
}); // myscript.js import from 'https://cdn.skypack.dev/lodash@4' 'HelloWorld' 'left pad' 'ECMAScript' => text console It just works! Of course, you may ask, there is " " that we can import. But many packages don't have their doppelgängers. Or they are not frequently updated. Here, comes to the rescue. lodash-es skypack.dev It still has some problems, though. For unclear reasons, some versions did not work. When visiting , the React version 17 is served instead. But the future is bright. Alice can now start working right on her app without spending most of her weekend configuring this week's js bundler ... cdn.skypack.dev/react@16 Side note : I also put my own version at espkg.vercel.app/react@16 . You can use espkg.vercel.app as an alternative until Skypack team fixes the problem. Other packages also work, for example, espkg.vercel.app/lodash@4 (give it a little time for building, then the response will be cached by Vercel). Snowpack Okay, I lied, a bit. won't work directly in the browser. You still need some more work. Here comes the real power of : minimal config and remote packages. You don't even have to install to start working with your little fun app. Simply run 2 setup commands: TypeScript Snowpack node_modules yarn global add snowpack
snowpack init This will give you an empty skeleton . Then add the single line config under : snowpack.config.js source: 'remote' packageOptions packageOptions: { : ,
}, // snowpack.config.js source 'remote' That's all. Now run and start adding your and (yes, it's ): snowpack dev index.html myscript.ts TypeScript My little app <!doctype html> < = > html lang "en" < > head < > title </ > title </ > head < > body < = = > script type "module" src "myscript.js" </ > script </ > body </ > html {snakeCase} ; words: string[] = [ , , ];
words.forEach( { .log(snakeCase(text));
}); // myscript.ts import from 'lodash' const 'HelloWorld' 'left pad' 'ECMAScript' => text console It just works! 🎉 Look ma, no o We even got and for free. Yay! node_modules! N package.json! TypeScript hot-reload Recap The example code can be downloaded here: . There are other configs on that you may need. Let's save that for another day. Now start tinkering with your app and spend your precious time on the most valuable feature! 🚀🚀 gist.github.com/olvrng snowpack.config.js P.S. Oh, but Alice wants to use . No worry, just a single line config... I swear! She could add a file and one more line for . Everything will be okay. Well, this time she must remember to run ! Only this time... less mystyle.less snowpack.config.js yarn add snowpack-plugin-less plugins: [ ,
], // snowpack.config.js 'snowpack-plugin-less' {snakeCase} ; ; words: string[] = [ , , ];
words.forEach( { .log(snakeCase(text));
}); // myscript.ts import from 'lodash' import './style.less' // the less file const 'HelloWorld' 'left pad' 'ECMAScript' => text console Thank you for reading! And don't forget my little page . espkg.vercel.app Previously published at https://olvrng.github.io/w/esm/

2022 - HackerNoon Contributor of the Year - Golang

Nominated for 2022 - HackerNoon Contributor of the Year - Golang

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Front-End Development Without Node_modules Using Skypack and Snowpack

Too Long; Didn't Read

Company Mentioned

Oliver Nguyen

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Front-End Development Without Node_modules Using Skypack and Snowpack

Too Long; Didn't Read

Company Mentioned

Oliver Nguyen

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES