Documentation "How to consume the npm packages?"

Author: tkrotoff

README.md

@@ -322,6 +322,81 @@ You can use HTML5 attributes like `type="email"`, `required`, [`minlength`](http
 
 In the last case you will have to manage translations yourself (see SignUp example).
 
+## How to consume the npm packages?
+
+### ESNext (currently ES2018) + ES modules
+
+Files inside [`lib/`](https://unpkg.com/react-form-with-constraints@latest/lib/) (package.json `"module": "lib/index.js"`).
+
+A recent browser or Node.js is required or you will need to transpile the react-form-with-constraints source code using Babel (or TypeScript tsc).
+
+Several advantages:
+- The combine use of `"sideEffects": false` with `"module": ...` generates a smaller bundle thanks to [tree shaking](https://webpack.js.org/guides/tree-shaking/)
+- You can transpile react-form-with-constraints source code with your Babel's [preset-env](https://babeljs.io/docs/en/babel-preset-env) and [Browserslist](https://github.com/browserslist/browserslist) configuration
+
+For this to work, do not exclude `node_modules` from your webpack configuration, example:
+
+```JS
+// webpack.config.js
+module: {
+  rules: [
+    {
+      test: /\.(js|jsx?)$/,
+
+      // See [Enable babel-preset-env for node_modules that target newer Node versions](https://github.com/facebook/create-react-app/issues/1125)
+      // See [Create React App 2.0: "You can now use packages written for latest Node versions without breaking the build"](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html)
+      // See ["If you have to exclude node_modules/, how do you get babel to polyfill/transform code in 3rd party code?"](https://github.com/webpack/webpack/issues/6544#issuecomment-417108242)
+      // See [Compile dependencies with babel-preset-env](https://github.com/facebook/create-react-app/pull/3776)
+      //exclude: /node_modules/,
+      exclude: /\/core-js/,
+
+      loader: 'babel-loader',
+      options: {
+        // See https://github.com/facebook/create-react-app/blob/v2.1.0/packages/react-scripts/config/webpack.config.dev.js#L284
+        compact: false
+      }
+    }
+  ]
+}
+```
+
+You probably want to configure Babel with `sourceType: 'unambiguous'`:
+
+```JS
+// babel.config.js
+module.exports = {
+  // See https://github.com/facebook/create-react-app/blob/v2.1.0/packages/babel-preset-react-app/dependencies.js#L64
+  // See [Add Babel config sourceType: 'unambiguous' for dependencies](https://github.com/facebook/create-react-app/pull/5052)
+  sourceType: 'unambiguous',
+
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        useBuiltIns: 'usage'
+      }
+    ],
+    '@babel/preset-react'
+  ],
+  plugins: [
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-proposal-object-rest-spread'
+  ]
+};
+```
+
+### ES5 + CommonJS
+
+Classic ES5 transpilation, files inside [`lib-es5/`](https://unpkg.com/react-form-with-constraints@latest/lib-es5/) (package.json `"main": "lib-es5/index.js"`).
+No tree shaking.
+
+### UMD (Universal Module Definition) + ES5
+
+Files inside [`dist/`](https://unpkg.com/react-form-with-constraints@latest/dist/).
+Typical use is with `<script src="react-form-with-constraints.production.min.js">` inside your index.html.
+
+A good use case is [CodePen](https://codepen.io/tkrotoff/pen/BRGdqL), files are generated by [Rollup](packages/react-form-with-constraints/rollup.config.js).
+
 ## Notes
 
 - A [`type="hidden"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden#Validation), [`readonly`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) or [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-disabled) input won't trigger any HTML5 form constraint validation like [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-required), see https://codepen.io/tkrotoff/pen/gdjVNv