chore: Webpack, babel-loader, Prettier, TSLint

[fernandoespinosa]

Overview

These changes aim to implement a minimal Webpack build setup with babel-loader and the necessary plugins to build this TypeScript project.

npm build scripts (see sample output below):

    "build:dev": "webpack --mode development --display-error-details",
    "build:prod": "webpack --mode production"

These PR also includes Prettier setup with TSLint for TypeScript.

Output

Dev Build

➜  polymath-sdk git:(chore/webpack-setup) yarn build:dev
yarn run v1.15.2
warning package.json: No license field
$ webpack --mode development --display-error-details
Hash: d590b0c34685dd7772e7
Version: webpack 4.29.6
Time: 3540ms
Built at: 04/01/2019 11:58:04 PM
  Asset     Size  Chunks             Chunk Names
main.js  3.3 MiB    main  [emitted]  main
Entrypoint main = main.js
[./src/Context.ts] 1.44 KiB {main} [built]
[./src/LowLevel/index.ts] 38 bytes {main} [built]
[./src/LowLevel/types.ts] 965 bytes {main} [built]
[./src/LowLevel/utils.ts] 1.51 KiB {main} [built]
[./src/Polymath.ts] 45.6 KiB {main} [built]
[./src/PolymathError.ts] 4.79 KiB {main} [built]
[./src/browserUtils.ts] 8.59 KiB {main} [built]
[./src/entities/Checkpoint.ts] 5.08 KiB {main} [built]
[./src/entities/Dividend.ts] 7.23 KiB {main} [built]
[./src/entities/Erc20DividendsModule.ts] 3.38 KiB {main} [built]
[./src/entities/Erc20TokenBalance.ts] 3.98 KiB {main} [built]
[./src/entities/index.ts] 539 bytes {main} [built]
[./src/index.ts] 238 bytes {main} [built]
[./src/types/index.ts] 4 KiB {main} [built]
[./src/utils/index.ts] 2.07 KiB {main} [built]
    + 333 hidden modules
✨  Done in 4.12s.

Prod Build

➜  polymath-sdk git:(chore/webpack-setup) yarn build:prod
yarn run v1.15.2
warning package.json: No license field
$ webpack --mode production
Hash: d45e3cdd0adc809a309b
Version: webpack 4.29.6
Time: 3797ms
Built at: 04/02/2019 12:04:45 AM
  Asset      Size  Chunks                    Chunk Names
main.js  1.15 MiB       0  [emitted]  [big]  main
Entrypoint main [big] = main.js
  [0] ./src/types/index.ts 4 KiB {0} [built]
  [1] ./src/LowLevel/types.ts 965 bytes {0} [built]
  [2] ./src/LowLevel/utils.ts 1.51 KiB {0} [built]
  [6] ./src/utils/index.ts 2.07 KiB {0} [built]
  [9] (webpack)/buildin/global.js 472 bytes {0} [built]
 [22] (webpack)/buildin/module.js 497 bytes {0} [built]
[133] buffer (ignored) 15 bytes {0} [optional] [built]
[165] util (ignored) 15 bytes {0} [built]
[167] util (ignored) 15 bytes {0} [built]
[199] crypto (ignored) 15 bytes {0} [optional] [built]
[287] ./src/index.ts + 60 modules 450 KiB {0} [built]
      | ./src/index.ts 238 bytes [built]
      | ./src/PolymathError.ts 4.79 KiB [built]
      | ./src/browserUtils.ts 8.59 KiB [built]
      | ./src/entities/index.ts 539 bytes [built]
      | ./src/Polymath.ts 45.6 KiB [built]
      | ./src/entities/SecurityTokenReservation.ts 4.64 KiB [built]
      | ./src/entities/SecurityToken.ts 6.02 KiB [built]
      | ./src/entities/Erc20DividendsModule.ts 3.38 KiB [built]
      | ./src/entities/EthDividendsModule.ts 3.27 KiB [built]
      | ./src/entities/Dividend.ts 7.23 KiB [built]
      | ./src/entities/Checkpoint.ts 5.08 KiB [built]
      | ./src/entities/TaxWithholding.ts 4.85 KiB [built]
      | ./src/entities/PolyTransaction.ts 12.3 KiB [built]
      | ./src/entities/TransactionQueue.ts 10.9 KiB [built]
      | ./src/entities/Erc20TokenBalance.ts 3.98 KiB [built]
      |     + 46 hidden modules
    + 277 hidden modules

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  main.js (1.15 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (1.15 MiB)
      main.js


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
✨  Done in 4.45s.

References

Webpack/Babel

https://medium.com/@francesco.agnoletto/how-to-set-up-typescript-with-babel-and-webpack-6fba1b6e72d5
https://iamturns.com/typescript-babel/
https://www.thebasement.be/working-with-babel-7-and-webpack/

Prettier + TypeScript

https://prettier.io/docs/en/precommit.html
https://prettier.io/docs/en/install.html
https://palantir.github.io/tslint/usage/cli/

Mixing both:

https://alexjover.com/blog/use-prettier-with-tslint-and-be-happy/
https://github.com/prettier/tslint-config-prettier
https://medium.com/@sgroff04/configure-typescript-tslint-and-prettier-in-vs-code-for-react-native-development-7f31f0068d2

[fernandoespinosa]

🎉 This PR is included in version 1.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀