Proposal: Babel + Lerna + Webpack combo

Here's an idea to help the build process. Utilize babel and lerna to build a production output. It will be 1000% better than whatever the goofy gulp script was doing.

Please give your thoughts once you see my arguments and examples.

• Faster builds
• Easier to understand
• Better utilization of lerna
• Build a version that can go on window.web3 for someone without webpack or to put on CDN

---

Add babel to each project:

./install.zsh

web3_home_dir=$PWD

for dir in `ls packages`; do
  cd packages/$dir
  echo "installing babel in packages/$dir"
  npm install @babel/core @babel/preset-env @babel/cli @babel/register --save-dev
  cd $web3_home_dir
done

---

In every ./packages/*/package.json

"main": "dist/index.js"
...
"scripts": {
  "dev-build": "NODE_ENV=development babel --presets @babel/preset-env --source-maps --out-dir dist src || true",
  "prd-build": "NODE_ENV=production babel --presets @babel/preset-env --no-comments --compact --minified --source-maps --out-dir dist src"
}

|| true in development stops npm errors while in production it will force errors. This is desirable in development.

---

In ./package.json

Run dev-build or prd-build on every package with lerna:

"scripts": {
  "dev-build": "NODE_ENV=development lerna run dev-build || true",
  "prd-build": "NODE_ENV=production lerna run prd-build"
}

---

Webpack the build easily for someone without webpack. e.g. window.web3

Add package.json browser tag if not in there: https://docs.npmjs.com/files/package.json#browser

npm install webpack webpack-cli uglifyjs-webpack-plugin
touch webpack.config.js

/*

# webpack config

https://webpack.js.org
https://webpack.js.org/configuration

*/

const path = require("path");
const UglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin");

const env = process.env.NODE_ENV;
const dev = env === "development";
const prd = env === "production";

const indexPath = path.join(__dirname, "packages", "web3", "index.js");
const distPath = path.join(__dirname, "dist");

if (env !== "development") {
  env = "production";
  prd = true;
}

const opts = {
  target: "web",
  mode: env,
  entry: {
    background: backgroundPath,
    popup: popupPath
  },
  output: {
    path: distPath,
    filename: "aion-web3.js",
    libraryTarget: "window"
  },
  watch: false,
  cache: dev,
  performance: {
    hints: false
  },
  stats: {
    assets: false,
    colors: dev,
    errors: true,
    errorDetails: true,
    hash: false
  }
};

if (dev === true) {
  opts.devtool = "source-map";
}

if (prd === true) {
  opts.optimization = {
    minimize: true,
    minimizer: [
      new UglifyjsWebpackPlugin({
        sourceMap: false,
        uglifyOptions: {
          ecma: 5,
          mangle: true,
          compress: true,
          warnings: false
        }
      })
    ]
  };
}

module.exports = opts;

Doing the above will likely fix another inexplicable problem we were having getting the build to work with modules we wanted. I wanted to include safe-buffer but the gulp build would not allow it.

https://github.com/aionnetwork/aion_web3/commit/0904fb7e18b3b27d38d6b0e0faff905c7a912b8d#diff-53fba2022d662120f492b028a7208088

The webpack script above needs babel-loader.