minipack - πŸ“¦ A simplified example of a modern module bundler written in JavaScript

  •        9

As front-end developers, we spend a lot of time working with tools like Webpack, Browserify, and Parcel. Understanding how those tools work can help us make better decisions on how we write our code. By understanding how our code turns into a bundle and how that bundle looks like we can also debug it better.

https://github.com/ronami/minipack

Dependencies:

babel-core : ^6.26.0
babel-preset-env : ^1.6.1
babel-preset-es2015 : ^6.24.1
babel-traverse : ^6.26.0
babylon : ^6.18.0
eslint : ^4.17.0
eslint-config-airbnb-base : ^12.1.0
eslint-plugin-import : ^2.8.0

Tags
Implementation
License
Platform

   




Related Projects

Webpack - A bundler for javascript and friends

  •    Javascript

Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

Parcel - Blazing fast, zero configuration web application bundler

  •    Javascript

Parcel is a blazing fast zero configuration web application bundler. It automatically transforms modules using Babel, PostCSS, and PostHTML when needed - even node_modules. It has out of the box support for JS, CSS, HTML, file assets, and more - no plugins to install.

rollup - Next-generation ES6 module bundler

  •    Javascript

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD. ES6 modules let you freely and seamlessly combine the most useful individual functions from your favorite libraries. This will eventually be possible natively, but Rollup lets you do it today.Install with npm install --global rollup. Rollup can be used either through a command line interface with an optional configuration file, or else through its JavaScript API. Run rollup --help to see the available options and parameters. The starter project templates, rollup-starter-lib and rollup-starter-app, demonstrate common configuration options, and more detailed instructions are available throughout the user guide.

pax - The fastest JavaScript bundler in the galaxy.

  •    Rust

The fastest JavaScript bundler in the galaxy. Fully supports ECMAScript module syntax (import/export) in addition to CommonJS require(<string>). Because your bundler is too slow.

Steal - Universal module loader

  •    Javascript

steal is unique because it can load JavaScript modules defined in ES6, AMD, and CommonJS formats (unlike most other module loaders, which only support one of these formats at a time). In JavaScript, the word "modules" refers to small units of independent, reusable code. They are the foundation of many JavaScript design patterns, and can look like this in ES6.


react-custom-scrollbars - React scrollbars component

  •    Javascript

This assumes that you’re using npm package manager with a module bundler like Webpack or Browserify to consume CommonJS modules. If you don’t yet use npm or a modern module bundler, and would rather prefer a single-file UMD build that makes ReactCustomScrollbars available as a global object, you can grab a pre-built version from unpkg. We don’t recommend this approach for any serious application, as most of the libraries complementary to react-custom-scrollbars are only available on npm.

splittable - Module bundler with support for code splitting, ES6 & CommonJS modules.

  •    Javascript

Requires java for one dependency to run. It is recommended to run splittable from the root directory of your project.

react-forms - Forms library for React.

  •    Javascript

React Forms library provides a set of tools for React to handle form rendering and validation. You would probably also need a module bundler such as Browserify or Webpack as React Forms is distributed as a set of CommonJS modules.

react-toolbox - A set of React components implementing Google's Material Design specification with the power of CSS Modules

  •    Javascript

React Toolbox uses CSS Modules by default to import stylesheets written using PostCSS & postcss-preset-env features. In case you want to import the components already bundled with CSS, your module bundler should be able to require these PostCSS modules. Although we recommend webpack, you are free to use whatever module bundler you want as long as it can compile and require PostCSS files located in your node_modules. If you are experiencing require errors, make sure your configuration satisfies this requirement.

collections - This package contains JavaScript implementations of common data structures with idiomatic interfaces

  •    Javascript

This package contains JavaScript implementations of common data structures with idiomatic iterfaces, including extensions for Array and Object. You can use these Node Packaged Modules with Node.js, Browserify, Mr, or any compatible CommonJS module loader. Using a module loader or bundler when using Collections in web browsers has the advantage of only incorporating the modules you need. However, you can just embed <script src="collections/collections.min.js"> and all of the collections will be introduced as globals. ⚠️ require("collections") is not supported.

rollupify - Browserify transform to apply Rollup

  •    Javascript

Browserify transform to apply Rollup, converting ES6/ES2015 modules into one big CommonJS module. This tends to result in smaller bundle sizes, due to Rollup's tree-shaking and scope-hoisting capabilities.

sheetify - :sparkles: Modular CSS bundler for browserify

  •    Javascript

Modular CSS bundler for browserify. Works with npm modules like browserify does. Sheetify is very good for namespacing static css assets in your javaScript code. Currently there is no support for dynamic variables within sheetify, however you could achieve this by setting the inline style property of an element.

direction-reveal - Direction aware content reveals via hover or tab on an element.

  •    CSS

This plugin detects which direction a user enters/exits a block, allowing you to reveal/hide content based on this direction. The hidden content can animate in from the direction the user enters and animate out the direction the user leaves, allowing you to create interesting animation effects. The script is an ES6(ES2015) module but a compiled version is included in the build as index.js. You can also copy scripts/direction-reveal.js into your own site if your build process can accomodate ES6 modules, Babel and Browserify are used in the demo site.

awesome-webpack - A curated list of awesome Webpack resources, libraries and tools

  •    HTML

webpack is a module bundler. webpack takes modules with dependencies and generates static assets representing those modules.

microbundle - πŸ“¦ Zero-configuration bundler for tiny modules.

  •    Javascript

The zero-configuration bundler for tiny modules, powered by Rollup. Microbundle includes two commands - build (the default) and watch. Neither require any options, but you can tailor things to suit your needs a bit if you like.

parcelify - Add css to your npm modules consumed with browserify.

  •    Javascript

Add css to your npm modules consumed with browserify. Many thanks to James Halliday for his help and guidance in bringing this project into reality.

conditioner - πŸ’†πŸ» Frizz free, context-aware, JavaScript modules

  •    Javascript

Conditioner provides a straight forward Progressive Enhancement based solution for linking JavaScript modules to DOM elements. Modules can be linked based on contextual parameters like viewport size and element visibilty making Conditioner your perfect Responsive Design companion. Mount a component (like a Date Picker, Section Toggler or Carrousel), but only do it on wide viewports and when the user has seen it.

es6-module-transpiler - Tomorrow’s JavaScript module syntax today

  •    Javascript

This project is part of esnext, which has merged with Babel. All the features of esnext are supported by Babel, and more. All the tests from esnext have been ported over to Babel to ensure that switchers will have minimal code changes to make. The maintainers of esnext will continue working on Babel to bring better spec compliance, ES6 feature support, and performance. If you want a fast tool with bundling support as found in this project, you should check out Rollup. ES6 Module Transpiler is an experimental compiler that allows you to write your JavaScript using a subset of the ES6 module syntax, and compile it into AMD or CommonJS modules.

react-webpack-starter - A template for writing React based ES6 app using webpack

  •    Javascript

The aim of this repository is to provide a template for developing React based applications using ES6 syntax and webpack as a module bundler.

pundle - πŸ‘Ύ peaceful bundles - js bundler, built from the ground up for speed and extensibility

  •    Javascript

Pundle is a next generation module bundler. It's written with extensibility and performance in mind.Welcome to the official documentation of Pundle, the peaceful module bundler of the 21st century.