Skip to content

Conversation

@prescottprue
Copy link
Contributor

@prescottprue prescottprue commented Sep 7, 2017

This is a lot of stuff, so feel free to comment on any of it that you are unsure of.

Features

  • Multiple versions now being built:
    • commonjs - npm run build:commonjs - module parameter of package.json now points to this version
    • es - npm run build:es
    • umd (webpack) - npm run build:umd
    • minified umd (webpack with minification) - npm run build:umd:min
  • Webpack 3 🎊
  • Comments removed from all builds (comments: false in babel config)
  • Size reduction of umd (wepacked) build (comments removed, webpack 3 setup)
  • dist folder ignored
  • UMD version is smaller (32.9kb instead of 35.6kb) and now includes a minified version which is only 11.4kb (see size comparison below for more details)
  • Includes setup + instructions for using unpkg cdn
  • watch now rebuilds commonjs build instead of umd build (commonjs is most common)

Reasoning

  • Drastically decreases size that is loaded when using within a project built using Webpack (commonjs version without comments is used instead of UMD)
  • Stack traces + Line Numbers actually make sense (using commonjs over UMD)
  • UMD version includes minified version since it is most commonly used in the browser
  • Those using react-selectable in the browser can use the unpkg CDN, and it points to a minified version (11.4kb vs 35.6kb)
  • Those using esnext can require a version that has not been modularized (es version)
  • dist folder does not need to be tracked in git (it will still be released to npm), and adding it to the .gitignore makes diffs more clear - Ignore dist folder #41
  • Similar setup is common to some of the most popular libraries such as redux to allow for maximum flexibility

Size Comparison

Was
image

Is Now

image

Scott Prue added 2 commits September 6, 2017 18:39
* Webpack 3
* Multiple versions now being built:
  * commonjs - `npm run build:commonjs`
  * es - `npm run build:es`
  * umd (webpack) - `npm run build:umd`
  * minified umd (webpack with minification) - `npm run build:umd:min`
* Comments removed from all built versions (comments: false in babel
config)
* Size reduction of umd (wepacked) version (comments removed, webpack 3
setup)
* dist folder ignored
@prescottprue prescottprue changed the title Build Multiple Versions (commonjs, es, and UMD) and other build setup updates Multiple Build Types (commonjs, es, and UMD) and other build setup updates Sep 7, 2017
@prescottprue prescottprue mentioned this pull request Sep 7, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant