Transpilers
these are usually embedded in pipelines and we don't use it directly
JavaScript Transpilers: What They Are & Why We Need Them | Scotch
Overview - Editions Editions are the best way to produce and consume the JavaScript packages you care about. With Editions you can produce packages beautifully, and consume packages perfectly.
Babel
Babel · The compiler for next generation JavaScript
6.0.0 Released · Babel
Setting up Babel 6 · Babel
The Complete Guide to ES6 with Babel 6
Setting up ES6 | Leanpub
Hail, Babel! The Transpiling Overlord -Telerik Developer Network
A Smart(er) Transpilation Strategy | getiblog
jamiebuilds/babel-handbook: A guided handbook on how to use Babel and how to create plugins for Babel.
babel-handbook/README.md at master · jamiebuilds/babel-handbook
Understanding ASTs by Building Your Own Babel Plugin
Writing custom Babel and ESLint plugins with ASTs - Kent C. Dodds
Zero-config code transformation with babel-plugin-macros · Babel
All about macros with babel-plugin-macros 🎣 - Kent C. Dodds
results for babel-plugin
codemix/babel-plugin-closure-elimination
ooflorent/babel-plugin-graphql
chocolateboy/babel-plugin-source-map-support
tleunen/babel-plugin-module-resolver: Custom module resolver plugin for Babel
zloirock/core-js es6 shim used in Babel
{
"name": "wsi-viewer",
"version": "1.0.0",
"description": "",
"main": "bundle.js",
"scripts": {
"build": "browserify src/index.js --debug | exorcist public/bundle.js.map | uglifyjs -cm > public/bundle.js",
"watch": "watchify src/index.js -d -o public/bundle.js -v",
"test": "tape test/*.js",
"coverage": "covert test/*.js"
},
"author": "KY LEE <kylee@astri.org>",
"browserify": {
"transform": ["browserify-shim", "babelify"]
},
"browserify-shim": {
"openseadragon": "global:OpenSeadragon"
},
"babel": {
"presets": ["es2015", "react"]
},
"devDependencies": {
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"babelify": "^7.2.0",
"browserify": "^12.0.1",
"browserify-shim": "^3.8.11",
"covert": "^1.1.0",
"exorcist": "^0.4.0",
"tape": "^4.2.2",
"uglify-js": "^2.6.1",
"watchify": "^3.6.1"
},
"dependencies": {}
}Closure Compiler
Closure Compiler | Google Developers
Installing the Right Version
JavaScript needs the compile step (on install) | Better world by better software
Precompiled JavaScript | Better world by better software
bahmutov/compiled: Compiles the ES* bundle to your NodeJS version on install
Minifiers
babel/minify: An ES6+ aware minifier based on the Babel toolchain (beta)
estools/esmangle: esmangle is mangler / minifier for Mozilla Parser API AST
bholloway/esmangleify: A minifier browserify transform using esmangle
UglifyJS — JavaScript parser, compressor, minifier written in JS
terser · JavaScript parser, mangler and compressor toolkit for ES6+
terser/terser: 🗜 JavaScript parser, mangler and compressor toolkit for ES6+
Browserify VS Webpack - JS Drama
Webpack and Rollup: the same but different – webpack – Medium
Comparing bundlers: Webpack, Rollup & Parcel – js@imaginea – Medium
SnowPack
From Pika team, no longer maintained
Snowpack - The faster frontend build tool
A Future Without Webpack Pika -> SnowPack
Snowpack vs. webpack - LogRocket Blog 2020-03
Vite vs. Snowpack: A comparison of frontend build tools - LogRocket Blog
- ESM for dev
- preconfigured Rollup build for production
- different templates
snowpack/create-snowpack-app/cli at main · snowpackjs/snowpack
Introducing: @pika/pack multiple formats
Starting a New Project
I'm going to give Snowpack a try now ❄️📦 - DEV Community
Snowpack v3.0
Snowpack 3 Build Tool Further Streamlines Modern Front-End Development
Snowpack | CSS-Tricks
Snowpack: An Alternative Build Tool to Webpack | by Nathan Sebhastian | Mar, 2021 | Bits and Pieces
Why and how to use Snowpack instead of webpack - LogRocket Blog
Skypack: search millions of open source JavaScript packages
Streaming Imports use browser package from CDN (Skypack)
Introducing: Pika CDN + Deno - DEV Community
mrkldshv/snowpack-react-tailwind: React + Snowpack + Tailwindcss
Up and running with Snowpack and Svelte in seconds
The Snowpack Plugin Catalog
snowpack-plugin-wasm-pack - npm
build-info like untael/vue-cli-plugin-build-info: A plugin that allows you to see information about the current build.
Creating Your Own Plugin
snowpack lazy loading - Google Search
Pika Dependency Management with Fred Schott - Software Engineering Daily
Webpack
Webpack does too much magic behind the scene.
The config file syntax has been simplified and docs improved in v2 release. v4 updated API and hence new recommended sets of plugins.
Beware of articles for old version.
Webpack your bags - madewithlove from the first principle
Get to Know Webpack | recallact.com
Learn Webpack - Best Webpack Tutorials (2020) | gitconnected
webpack for browserify users
Lessons Learned From a Year of Fighting With Webpack and Babel
A Complete Webpack Setup for React - The Startup - Medium
3 ways webpack surprises web developers - rossta.net
Learn Using Webpack for the First Time – Webpack 4 Fundamentals
The Core Concepts | webpack learning academy
Lessons Learned From a Year of Fighting With Webpack and Babel
Learn Webpack - Best Webpack Tutorials (2019) | gitconnected
Webpack 4: Universal Code Splitting in React… The inventors are back baby!
Setting up webpack 4 for a project - DEV Community 👩💻👨💻
An in-depth perspective on webpack's bundling process - JavaScript inDepth 2021-09
SurviveJS - Webpack
Webpack - From Apprentice to Journeyman
Webpack - From Journeyman to Master
Re-imagining Webpack
Webpack your bags - madewithlove 2015
How to boost the speed of your webpack build? - DEV Community
Backend Apps with Webpack (Part I)
Backend Apps with Webpack: Driving with Gulp (Part II)
Live Editing JavaScript with Webpack (Part III)
petehunt/webpack-howto
OSCON 2014: How Instagram.com Works; Pete Hunt - YouTube
Using ES6 and ES7 in the Browser, with Babel 6 and Webpack
Webpack Made Simple - Building ES6 & LESS w/ autorefresh
liady/webpack-node-externals: Easily exclude node modules in Webpack
Webpack — The Confusing Parts — Medium
Minimal webpack.config.js:
var webpack = require("webpack");
var path = require("path");
var BUILD_DIR = path.resolve(__dirname, "src/client/public");
var APP_DIR = path.resolve(__dirname, "src/client/app");
var config = {
entry: APP_DIR + "/index.jsx",
output: {
path: BUILD_DIR,
filename: "bundle.js",
},
};
module.exports = config;Adding loader:
var config = {
// Existing Code ....
module: {
loaders: [
{
test: /\.jsx?/,
include: APP_DIR,
loader: "babel",
},
],
},
};Ecosystem
webpack-contrib/awesome-webpack: A curated list of awesome Webpack resources, libraries and tools
Webpack Visualizer
webpack-contrib/webpack-bundle-analyzer: Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap
Browserify
this is kept for archival purposes as there are now better tools
Browserify
substack/browserify-handbook
substack/browserify-handbook (builtins)
# export `require()` in browser and the module 'slugger'
browserify -r ./lib/slugger:slugger > static/bundle.jsUMD builds
Forbes Lindesay — Standalone Browserify Builds
# can now use require.js/<script> to load `bundle.js`
browserify -s ./index.js > dist/bundle.jsBuild for Node
browserify --node ./index.js > dist/bundle.jsGetting Started with Browserify | Scotch
Cross platform JavaScript with Browserify - Sharing Code Between Node.js and the Browser - codecentric Blog : codecentric Blog
How to work with Browserify?
browserify for webpack users
browserify+stylus+babel+hotreload
atomify/atomify
atomify/atomify-js
atomify/atomify-css
internals
How Browserify Works
Introduction to Browserify • Blake Embrey
substack/browserify-handbook (how browserify works)
substack/browserify-handbook (bundling)
Browserify V2 and You (nix) on Vimeo
option passing
substack/node-browserify browser-field in pacakge.json
substack/browserify-handbook (package.json)
substack/subarg: parse arguments with recursive contexts
CLI
browserify -t [ foo -v --bar=555 ] main.jsAPI
var bundler = browserify("main.js");
bundler.transform("foo", {
v: true,
bar: 555,
});
bundler.bundle().pipe(process.stdout);var bundler = browserify({ debug: true });
bundler.add("index.js").transform("uglifyify").bundle().pipe(process.stdout);package.json
"browserify": {
"transform": [
[
"foo",
{
"v": true,
"bar": 555
}
]
]
},transforms
substack/node-browserify (transforms)
substack/browserify-handbook (transforms)
list of transforms · substack/node-browserify Wiki
npm browserify-transform
The ordering of transforms matters, run babelify first since transforms doesn't understand ES6:
"browserify": {
"transform": [
"babelify",
"browserify-shim",
"require-globify"
]
},plugins
substack/node-browserify (plugins)
substack/browserify-handbook (plugins)
npm browserify-plugin
browserify for webpack users using cssify
dom
Matt-Esch/virtual-dom: A Virtual DOM and diffing algorithm
substack/hyperx: tagged template string virtual dom builder
substack/hyperglue: update html elements by mapping query selectors to attributes, text, and hypertext
styles
substack/insert-css: insert a string of css into the
davidguttman/cssify: Simple middleware for Browserify to add css styles to the browser. using css-module
css-modules/css-modulesify: A browserify plugin to load CSS Modules
stackcss/sheetify: Modular CSS bundler for browserify
stackcss/css-extract: Extract CSS from a browserify bundle create a .css file
budo
mattdesl/budo: a dev server for rapid prototyping
andyinabox/budo-demo: A tool for quickly building budo projects
joseluisq/node-random-strings-demo: Random strings demo using Budo + Browserify
css-modules/browserify-demo: A working demo of CSS Modules, using css-modulesify using budo
mattdesl/garnish: prettifies ndjson from wzrd and similar tools Prettifies ndjson or bole logs from budo, wzrd and other tools.
tools
browserify tools · substack/node-browserify Wiki
npm browserify-tool
lazy loading
Journey from RequireJS to Browserify - Esa-Matti Suuronen
A Journey From Require.js to Browserify – Oren Farhi – Thoughts On Javascript and Development
Asynchronous module loading with Browserify - Esa-Matti Suuronen
scriptjs
Browserify, why and how? External & require
niksy/browserify-require-async: Browserify transform to handle require.async calls.
substack/factor-bundle: factor browser-pack bundles into common shared bundles
arian/partition-bundle: A browserify plugin to partition your modules in different bundles
ecosystem
substack/schoolbus
substack/yarnify
substack/webworkify
Livereload
chrisdickinson/beefy
B E E F Y | a tiny browserify server
Kureev/browserify-react-live
Kureev/browserify-patch-server
React Live Demo
FormidableLabs/react-live: A production-focused playground for live editing React components
FormidableLabs/component-playground: A component for rendering React components with editable source and live preview
A Minimal Example of HMR in a Redux Application | Toptal
AgentME/browserify-hmr
AgentME/ud
substack/react-starter-hmr
AgentME/react-hot-transform
browserify-shim
Use thlorenz/browserify-shim to wrap non-CommonJS library to make them require()-able
mattdesl/shimbro
substack/browserify-handbook (browserify-shim)
browserify shim recipes · thlorenz/browserify-shim Wiki
{
// using different files for browser
"browser": {
"jquery": "./js/vendor/jquery.js"
},
// configure require-mapping
"browserify-shim": {
"jquery": "global:$"
"three": "global:THREE"
}
}jQuery will be bundled in bundle.js; and you are supposed to include three.js in HTML.
BROWSERIFYSHIM_DIAGNOSTICS=1 browserify -d . -o js/bundle.jswatchify
watchify wrapped browserify is as good as browserify
var b = browserify(opts);
if (opts.watch) {
b = watchify(b);
}gulp/fast-browserify-builds-with-watchify.md at master · gulpjs/gulp
dynamic requires
javascript - Compiling dynamically required modules with Browserify - Stack Overflow
capaj/require-globify
substack/bulkify
bower
taptapship/wiredep
eugeneware/debowerify
testing
how I write tests for node and the browser
substack/testling
Test in headless browser:
$ browserify test/beep.js | testling$ browserify -t coverify test/*.js | node | coverifyOnline Conversion
Browserify-CDN official
Browserify CDN