Scout APM is great for developers who want to find and fix performance issues in their applications. With Scout, we'll take care of the bugs so you can focus on building great things 🚀. Learn more →
Top 23 JavaScript Rollup Projects
-
NOTE: If your project uses TypeScript, I would suggest using tsdx instead.
-
For package authoring - microbundle is a handy boilerplate (I would avoid tsdx personally - it’s basically been abandoned for turborepo but that’s not apparent at first glance).
-
Zigi
The context switching struggle is real. Zigi makes context switching a thing of the past. It monitors Jira and GitHub updates, pings you when PRs need approval and lets you take fast actions - all directly from Slack!
-
Project mention: How are you bundling a React Component Library? | reddit.com/r/reactjs | 2021-12-12
At first i thought that this was THE solution but looking deeper at the source code, this tool is a wrapper around a wrapper around a wrapper.... Don't get me wrong, it probably works, but it's currently using a rollup configuration that was created in 2018, the package itself has not seen any updates in 17 months and has 106 open issues. Also the owner says himself that he's not able to work that much on it anymore and suggest to use TSDX which in return hasn't been updated in several months, many open issues and extensive customization is recommended with patch-package which already in itself is a red-flag :(
-
wmr for near-instant builds & native TS support
-
Project mention: Trouble Building Chrome Extension to Get News Article Content | reddit.com/r/webdev | 2022-11-22
I've been working on an enhanced reader mode extension for the last few months. I found that Mercury Reader's parser tool is useful for extracting content. If that's not exactly what you're looking for, readibility is another good option. It's a library used inside Firefox's reader moder that you can use in any project.
-
rollup v3.2.3 bundles ./src/index.js → dist/bundle.js... babelHelpers: 'bundled' option was used by default. It is recommended to configure this option explicitly, read more here: https://github.com/rollup/plugins/tree/master/packages/babel#babelhelpers [!] (plugin commonjs--resolver) SyntaxError: Unexpected token (12:2) in /Users/krishna404/codeProjects/All_SmartAgent/desktopSmartAgent/src/index.js src/index.js (12:2) 10: import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'; 11: ReactDOM.render( 12: ^ 13:
-
template.js
A javascript template engine, simple, easy & extras, support webpack, rollup, parcel, browserify, fis and gulp
-
InfluxDB
Build time-series-based applications quickly and at scale.. InfluxDB is the Time Series Data Platform where developers build real-time applications for analytics, IoT and cloud-native services in less time with less code.
-
react-component-library
A project skeleton to get your very own React Component Library up and running using Rollup, Typescript, SASS + Storybook
Project mention: Reactjs Typescript Lib Starter kit using Storybook, Rollup and Sass | reddit.com/r/reactjs | 2022-01-18This project skeleton was created to help people get started with creating their own React component library. I struggled to get a working starter kit. Finally found https://github.com/HarveyD/react-component-library and I customised it little bit to suit my style
-
-
xdm
Just a *really* good MDX compiler. No runtime. With esbuild, Rollup, and webpack plugins (by wooorm)
-
bundlejs
An online tool to quickly bundle & minify your projects, while viewing the compressed bundle size, all running locally on your browser. A quick and easy way to bundle, minify, and compress (gzip and brotli) your ts, js, jsx and npm projects all online, with the bundle file size.
Project mention: How much space do packages end up taking in production build? | reddit.com/r/reactjs | 2022-07-08Try https://bundlejs.com/ to see
-
flopflip
🎚Flip or flop features in your React application in real-time backed by flag provider of your choice 🚦
-
Rocket is a tool used for creating web pages and it is fabulous for generating static content starting from markdown files. One of the cool thing about Rocket is the fact that web components and javascript can be used inside the markdown files. Creating a project with Rocket is quite straightforward, you can take a look at the documentation or if you like to learn by looking at examples, you can find good ones in the Rocket’s GitHub repository . This guide is created for getting you started with Rocket and FicusJS. FicusJS is a set of lightweight functions for developing applications using web components. Using the Create Ficus App CLI you can quickly scaffold a project that contains a basic structure for working with Rocket and FicusJS. The project will contain:
-
You could make it work by yourself, but… instead of spending some time figuring out how to do it (feel free to do it if you want or have time for that), I recommend you to check this amazing package (Alias HQ) which is free and basically uses your tsconfig.json or jsconfig.json file to setup everything for you and make really easy to configure all those more advanced needs.
-
-
react-border-wrapper - A wrapper for placing elements along div borders in React.
-
Project mention: threlte v5.0 is here! A completely new developer experience that is faster, more powerful, and incredibly flexible. | reddit.com/r/sveltejs | 2022-11-16
Unfortunately it's not that easy. While in this component there are only two imports happening, these two imports will still have an impact on your bundle size that is larger than the actual two files imported. This is the nature of three.js. A popular tool to minify three.js for production is this minifier. It's an interesting topic for sure but our goal is not to market threlte against other frameworks but to cooperate. There's a lot of tooling that threlte is able to benefit from in the react-three-fiber ecosystem and there's the intention from both sides to do so. One of the first candidates for this could be gltfjsx. For me personally using Svelte over React is huge.
-
Project mention: How to add a babel plugin config to the webpack.config.js? | reddit.com/r/learnjavascript | 2022-05-20
And here's the babel plugin I would like to add in my project which recommend to register in the babelrc file.
-
vue3-component-library
This is a template for building vue components library.Project makes use of vue3.0 with rollup configuration to build treeshakable imports and Postcss for compilation of css
-
-
fastify-preact-ssr
Fastify server-side renders Preact to html and serves with a Preact client.js bundle for DOM hydration.
-
-
shopify-bare
Shopify starter theme that provides Javascript modules(ES6 and node_modules), tree-shaking, Live Reloading/ Auto Reload Tab, Sass imports, purged unused CSS, minify your built files, compress your images, and use quick commands to develop easier.
-
Scout APM
Truly a developer’s best friend. Scout APM is great for developers who want to find and fix performance issues in their applications. With Scout, we'll take care of the bugs so you can focus on building great things 🚀.
NOTE:
The open source projects on this list are ordered by number of github stars.
The number of mentions indicates repo mentiontions in the last 12 Months or
since we started tracking (Dec 2020).
The latest post mention was on 2022-11-22.
JavaScript Rollup related posts
- Trouble Building Chrome Extension to Get News Article Content
- Migrating app from parcel to rollup
- Rollup Library Starter
- Extracting Text button no longer works
- Creating Modern npm Packages
- I'd like to use Svelte with PHP with SSR and an island architecture. How would I go about doing this?
- Path Aliases in TypeScript and why you should use them
-
A note from our sponsor - Scout APM
scoutapm.com | 29 Nov 2022
Index
What are some of the best open-source Rollup projects in JavaScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | tsdx | 10,379 |
| 2 | Microbundle | 7,347 |
| 3 | create-react-library | 4,740 |
| 4 | wmr | 4,717 |
| 5 | parser | 4,393 |
| 6 | plugins | 2,897 |
| 7 | template.js | 1,268 |
| 8 | react-component-library | 703 |
| 9 | rollup-plugin-postcss | 622 |
| 10 | xdm | 579 |
| 11 | bundlejs | 479 |
| 12 | flopflip | 385 |
| 13 | rocket | 279 |
| 14 | alias-hq | 274 |
| 15 | klap 👏 | 175 |
| 16 | react-border-wrapper | 155 |
| 17 | three-minifier | 153 |
| 18 | babel-plugin-prismjs | 151 |
| 19 | vue3-component-library | 76 |
| 20 | svelte-tailwind2-starter | 56 |
| 21 | fastify-preact-ssr | 40 |
| 22 | electron-svelte-typescript | 37 |
| 23 | shopify-bare | 29 |
Write Clean JavaScript Code. Always.
Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.
www.sonarsource.com