webpack package builder

package.json

@@ -2,10 +2,8 @@
   "name": "@oceanprotocol/squid",
   "version": "0.1.25",
   "description": "JavaScript client library for Ocean Protocol",
-  "main": "dist/squid.js",
-  "module": "dist/esm/squid.js",
-  "browser": "dist/umd/squid.min.js",
-  "files": ["dist/umd"],
+  "main": "./dist/node/squid.js",
+  "browser": "./dist/browser/squid.cjs2.min.js",
   "scripts": {
     "test": "mocha",
     "test:watch": "mocha -w --watch-extensions js,ts,json",
@@ -13,13 +11,9 @@
     "clean": "rm -rf ./dist/ ./doc/ ./coverage ./.nyc_output",
     "lint": "tslint -c tslint.json 'src/**/*.ts' 'test/**/*.ts'",
     "start": "npm link @oceanprotocol/keeper-contracts @oceanprotocol/secret-store-client && npm run build:watch",
-    "build": "npm run clean && npm run lint && tsc && npm run build:all && npm run doc",
-    "build:all": "npm run build:es2015 && npm run build:esm && npm run build:cjs && npm run build:umd && npm run build:umd:min",
-    "build:es2015": "tsc --module es2015 --target es2015 --outDir dist/es2015",
-    "build:esm": "tsc --module es2015 --target es5 --outDir dist/esm",
-    "build:cjs": "tsc --module commonjs --target es5 --outDir dist/cjs",
-    "build:umd": "rollup dist/esm/squid.js --format umd --name squid --sourceMap --file dist/umd/squid.js",
-    "build:umd:min": "cd dist/umd && uglifyjs --compress --mangle --comments -o squid.min.js -- squid.js && gzip squid.min.js -c > squid.min.js.gz",
+    "build": "npm run clean && npm run build:tsc && npm run build:dist",
+    "build:tsc": "tsc",
+    "build:dist": "cross-env NODE_ENV=production webpack",
     "build:watch": "tsc -w",
     "doc": "typedoc --mode modules --out ./doc/ ./src/",
     "run": "ts-node",
@@ -75,14 +69,20 @@
     "@types/mocha": "^5.2.5",
     "@types/node": "^10.12.10",
     "chai": "^4.2.0",
+    "cross-env": "^5.2.0",
     "mocha": "^5.2.0",
     "nyc": "^13.1.0",
     "rollup": "^0.67.3",
     "source-map-support": "^0.5.9",
+    "ts-loader": "^5.3.0",
     "ts-node": "^7.0.1",
     "tslint": "^5.11.0",
     "typedoc": "^0.13.0",
     "typescript": "^3.1.6",
-    "uglify-js": "^3.4.9"
+    "uglify-js": "^3.4.9",
+    "webpack": "^4.26.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-concat-plugin": "^3.0.0",
+    "webpack-merge": "^4.1.4"
   }
 }

plugins/add-vendors-plugin.js

@@ -0,0 +1,31 @@
+const { ConcatSource } = require('webpack-sources')
+
+module.exports = class AddVendorsPlugin {
+    constructor(base) {
+        this.base = base
+    }
+
+    apply(compiler) {
+        compiler.hooks.emit.tapAsync(
+            `AddVendorsPlugin ${this.base}`,
+            (compilation, callback) => {
+                const main = compilation.assets[`main.${this.base}`]
+                const mainMap = compilation.assets[`main.${this.base}.map`]
+                const vendor = compilation.assets[`vendors.${this.base}`]
+
+                if (main && vendor) {
+                    const compiledAsset = new ConcatSource(main.children[0])
+                    compiledAsset.add(vendor)
+                    compiledAsset.add(main.children[1])
+                    compilation.assets = {}
+                    compilation.assets[this.base] = compiledAsset
+                } else if (main && mainMap) {
+                    compilation.assets = {}
+                    compilation.assets[this.base] = main
+                    compilation.assets[`${this.base}.map`] = mainMap
+                }
+                callback()
+            }
+        )
+    }
+}

src/keeper/ContractHandler.ts

@@ -28,7 +28,7 @@ export default class ContractHandler {
     private static async load(what: string, where: string): Promise<Contract> {
         const web3 = Web3Provider.getWeb3()
         // Logger.log("Loading", what, "from", where)
-        const artifact = require(`@oceanprotocol/keeper-contracts/artifacts/${what}.${where}`)
+        const artifact = require(`@oceanprotocol/keeper-contracts/artifacts/${what}.${where}.json`)
         // Logger.log('Loaded artifact', artifact)
         const code = await web3.eth.getCode(artifact.address)
         if (code === "0x0") {

tsconfig.json

@@ -12,7 +12,7 @@
     "noImplicitAny": false,
     "removeComments": true,
     "preserveConstEnums": true,
-    "outDir": "./dist/",
+    "outDir": "./dist/node/",
     "rootDir": "./src/",
     "sourceMap": true
   },

webpack.common.js

@@ -0,0 +1,21 @@
+'use strict'
+
+const { paths } = require('./webpack.parts.js')
+
+module.exports = {
+    entry: paths.entry,
+    mode: 'none',
+    module: {
+        rules: [
+            { test: /\.tsx?$/, loader: "ts-loader" }
+        ]
+    },
+    optimization: {
+        minimize: true,
+        noEmitOnErrors: true
+    },
+    resolve: {
+        extensions: ['.js','.ts'],
+        modules: ['node_modules'],
+    },
+}

webpack.config.js

@@ -0,0 +1,28 @@
+'use strict'
+
+const PRODUCTION = process.env.NODE_ENV === 'production'
+
+const common = require('./webpack.common.js')
+
+const { outputs } = require('./webpack.parts.js')
+
+// '[libraryTarget]': [file extension]
+const OUTPUT_MAPPING = {
+    'amd': 'amd',
+    'commonjs': 'cjs',
+    'commonjs2': 'cjs2',
+    'umd': 'umd',
+    'window': 'window',
+}
+
+const OVERRIDES = {
+    // optimization: {
+    //     minimize: false
+    // }
+}
+
+if (PRODUCTION) {
+    module.exports = outputs(common, 'production', OUTPUT_MAPPING, OVERRIDES)
+} else {
+    module.exports = outputs(common, 'development', OUTPUT_MAPPING, OVERRIDES)
+}

webpack.development.js

@@ -0,0 +1,28 @@
+'use strict'
+
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+
+module.exports = {
+    devtool: 'inline-source-map',
+    optimization: {
+        minimizer: [
+            new UglifyJsPlugin({
+                test: /vendor/,
+                sourceMap: false,
+            }),
+            new UglifyJsPlugin({
+                test: /^((?!(vendor)).)*.js$/,
+                sourceMap: true,
+            })
+        ],
+        splitChunks: {
+            cacheGroups: {
+                commons: {
+                    test: /[\\/]node_modules[\\/]/,
+                    name: 'vendors',
+                    chunks: 'all'
+                }
+            }
+        },
+    },
+}

webpack.parts.js

@@ -0,0 +1,53 @@
+'use strict'
+
+const path = require('path')
+const merge = require('webpack-merge')
+
+const development = require('./webpack.development.js')
+const production = require('./webpack.production.js')
+
+const AddVendorsPlugin = require('./plugins/add-vendors-plugin')
+
+const paths = {
+    entry: path.resolve(__dirname, './src/squid.ts'),
+    bundle: path.resolve(__dirname, 'dist/browser'),
+}
+
+const outputs = (base, env, mapping, overrides) => {
+    const collection = []
+    const library = 'squid'
+    const windowLibrary = 'Squid'
+
+    let environment = development
+    let ext = 'js'
+
+    if (env === 'production') {
+        environment = production
+        ext = `min.${ext}`
+    }
+
+    Object.entries(mapping).forEach(([target, extension]) => {
+        const filename = `[name].${library}.${extension}.${ext}`
+
+        const compiled = {
+            output: {
+                filename: filename,
+                library: target === 'window' ? windowLibrary : library,
+                libraryTarget: target,
+                path: paths.bundle
+            },
+            plugins: [
+                new AddVendorsPlugin(`${library}.${extension}.${ext}`)
+            ]
+        }
+
+        collection.push(merge(base, environment, compiled, overrides))
+    })
+
+    return collection
+}
+
+module.exports = {
+    outputs,
+    paths
+}

webpack.production.js

@@ -0,0 +1,5 @@
+'use strict'
+
+module.exports = {
+    devtool: 'source-map',
+}