Rollup VS browserify

If you've done web development for any amount of time, there's a good chance you've had to work with tools like Webpack, Rollup, Browserify and other front-end tooling systems. But do you know why we started using them in the first place, and why they are still part of our everyday workflow?

One of the advantages of using Nx over - say CRA or a custom starter template - is that your Nx workspace is evergreen. What do I mean by that: by now we all know how fast the frontend space is moving, and so are the corresponding devtools. Today you might be using Rollup to build your libraries, tomorrow you use swc, vite or esbuild. Same with Webpack. Webpack 5 has been around for a while already, and still, a lot of projects are stuck at v4.

How can I use tree shaking tools (like in Webpack 2 or rollup?I don't want to eject already so seems like I don't really have access to the Webpack configuration.

Vite addresses this problem by providing a development server and a lightning-fast build command. Vite, pronounced /vit/, is French for "quick," and this name describes the goal for this tool. The build command uses Rollup under the hood, which is preconfigured to create highly optimized code. The development server makes use of browser support for ES modules. Hot Module Replacement will instantly load any codebase changes into the browser.

Svelte Native is based on Svelte, and it allows Svelte developers to build native Android and iOS applications. It was initially released in November 2021 by Rich Harris, the Creator of Rollup, the popular JavaScript module bundler.

Nowadays, almost every web developer uses one bundler or another. Webpack is by far the most popular, with Rollup and Vite in second and third, respectively. Currently, Vite is the fastest-growing major bundler, which has been adopted by frameworks like Vitepress, SvelteKit, Astro, and more.

I have recently been looking into rollup and seeing how it differs from Webpack and other bundlers. One thing I came across was that it is better for libraries because of "flat bundling". This is based on a tweet and from a recent PR for React to utilize Rollup.

This also means that whatever build tooling must produce the distribution file with a .cjs file extension. This might necessitate chaining multiple build tools or adding a subsequent step to move/rename the file to have the .cjs file extension (ex mv ./dist/index.js ./dist/index.cjs)3. This can be worked around by adding a subsequent step to move/rename those outputted files (ex Rollup or a simple shell script).

I think Rollup is where the code-splitting is happening so you will need to address the problem there. Here is an ongoing discussion that seems to have some solutions: https://github.com/rollup/rollup/issues/2756

Vite doesn't create itself the bundles. Under the hood, it uses two tools: Esbuild while you're developing, and Rollup.js to create the production bundle.

This demo runs in a static site hosted on Amazon S3. As I’ve used a Node.js module to connect with IoT, the index.html file adds a bundle.js that was processed with Browserify. I’ll explain how it was done in the following sections.

If you've done web development for any amount of time, there's a good chance you've had to work with tools like Webpack, Rollup, Browserify and other front-end tooling systems. But do you know why we started using them in the first place, and why they are still part of our everyday workflow?

Browserify

For a large part of the web, bundlers did not exist. To include scripts, most people just linked to the library on a CDN like CDNJS or Google Hosted Libraries. This would begin to change in 2009 when Node.js was released. Instead of using CDNs, Node.js came with its package manager, npm. npm was easy to use because every library was just one npm install away, and updating was effortless. Because of the ease of use, many people wanted to use npm on the web. However, this was impossible until Browserify came along.

CommonJS(CJS) specification, released in 2009, is a JavaScript module format that uses module.exports/require and loads modules synchronously. NodeJS and Browserify are the dominant implementation of the CommonJS format.

Use NPM (node package manager) from your command line to add Appwrite SDK to your project. If you're using a bundler (like Browserify or webpack), you can import the Appwrite module when you need it:

React.js/ Next.js / Material-UI / Browserify (bundle packaging) / Serve (static site serving) / React-Dropzone (file drag drop) / React-Idle-Timer / zxcvbn.js (Password strength estimation)

Another way to put it - I've read about broswerify. In theory, what happens behind the scenes, is that it simply adds all the .js files in the Node module into one .js file? Any explanation / specific resource will be appreciates

The Yoroi browser extension is also made with React. I don't know if Browserify would be able to import the libraries the app and extension use to make the code run on the client side, but if that's possible, then at least users wouldn't have to send their passphrase anywhere.