Top 8 JavaScript Bundler Projects
-
webpack
A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
const path = require("path"); const webpack = require("webpack"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const HtmlBeautifierPlugin = require("html-beautifier-webpack-plugin"); module.exports = { mode: "development", entry: "./target/index.js", output: { path: path.resolve(__dirname, "public"), filename: "js/libs/bundle.js", clean: false, }, devtool: "source-map", module: { rules: [ { // docs: https://webpack.js.org/configuration/module/#resolvefullyspecified test: /\.m?js/, resolve: { fullySpecified: false, alias: { models: "../src/amplify/models/index.js", "ui-components": "../src/amplify/ui-components", }, }, }, { test: /\.jsx$/, exclude: /node_modules/, use: ["babel-loader"], }, ], }, resolve: { extensions: ["", ".js", ".jsx"], }, plugins: [ new webpack.ProvidePlugin({ process: "process/browser", }), new HtmlWebpackPlugin({ template: "./public/index.html.tmpl", filename: "index.html", }), new HtmlBeautifierPlugin(), ], };
-
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).
-
Scout APM
Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.
-
Project mention: What are the new and exciting tech for React projects for 2022? | reddit.com/r/reactjs | 2022-01-05
I've been hearing good things about snowpack and have been wanting to give it a go myself as an alternative to webpack/babel
-
-
So, the website looks promising:
-
I would recommend starting by using https://github.com/developit/microbundle , as it has pretty good default behavior for generating library output.
-
Speed Measure Plugin
⏱ See how fast (or not) your plugins and loaders are, so you can optimise your builds
The first thing to do should always be to see where the time is being spent. For that you can use https://github.com/stephencookdev/speed-measure-webpack-plugin
-
SonarQube
Static code analysis for 29 languages.. Your projects are multi-language. So is SonarQube analysis. Find Bugs, Vulnerabilities, Security Hotspots, and Code Smells so you can release quality code every time. Get started analyzing your projects today for free.
-
JavaScript Bundlers related posts
- How to Use Amplify Studio Figma Connector with Clojurescript
- Code Splitting with dynamic imports
- Configuring CommonJS & ES Modules for Node.js
- My FrontEnd Stack
- Make SvelteKit bundle all *.ts files into a single bundle.js
- What JS is essential before learning React?
- Part 2/2 - Game in ReactJS - Cuzzle
Index
What are some of the best open-source Bundler projects in JavaScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | webpack | 60,261 |
| 2 | Rollup | 21,072 |
| 3 | Snowpack | 19,643 |
| 4 | webpack-dashboard | 13,854 |
| 5 | Brunch | 6,802 |
| 6 | Microbundle | 6,668 |
| 7 | Speed Measure Plugin | 1,999 |
| 8 | klap 👏 | 169 |
Are you hiring? Post a new remote job listing for free.
