Make CJS and UMD builds (#12)

* Add Webpack and write a config to create UMD builds
* Make Webpack building normal and minified UMD builds
* Add TS configs for CJS (tsconfig.node.json) and UMD (tsconfig.webpack.json) builds
* Write some scripts to create different builds
* Update .eslintrc and up its version
* Update dependencies
* Up library version to 1.2.0

Author: Vasilii Kovalev

.eslintrc

@@ -1,5 +1,5 @@
 {
-  // "version": "1.0.0",
+  // "version": "1.1.0",
   "plugins": [
     "@typescript-eslint"
   ],
@@ -70,6 +70,14 @@
         "ts": "never"
       }
     ],
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": [
+          "webpack.config.ts"
+        ]
+      }
+    ],
     "import/prefer-default-export": "off"
   },
   "parser": "@typescript-eslint/parser",

package-lock.json

@@ -1,10 +1,10 @@
 {
   "name": "hydrate-text",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "description": "Tiny library for dynamic text hydrating with variables",
-  "main": "lib/index",
-  "module": "lib/index",
-  "types": "lib/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/typings/index.d.ts",
   "sideEffects": false,
   "keywords": [
     "javascript",
@@ -26,22 +26,38 @@
     "url": "https://github.com/vasilii-kovalev/hydrate-text/issues"
   },
   "devDependencies": {
-    "@types/jest": "^26.0.5",
+    "@types/jest": "^26.0.7",
+    "@types/node": "^14.0.26",
+    "@types/terser-webpack-plugin": "^3.0.0",
+    "@types/webpack": "^4.41.21",
     "@typescript-eslint/eslint-plugin": "^3.7.0",
     "@typescript-eslint/parser": "^3.7.0",
+    "babel-core": "6.26.3",
+    "babel-loader": "8.1.0",
+    "cross-env": "^7.0.2",
     "eslint": "^7.5.0",
     "eslint-config-airbnb-base": "^14.2.0",
     "eslint-plugin-import": "^2.22.0",
     "husky": "^4.2.5",
     "jest": "^26.1.0",
+    "terser-webpack-plugin": "^3.0.7",
     "ts-jest": "^26.1.3",
-    "typescript": "^3.9.7"
+    "ts-node": "^8.10.2",
+    "tsconfig-paths": "^3.9.0",
+    "typescript": "^3.9.7",
+    "webpack": "4.44.0",
+    "webpack-cli": "3.3.12"
   },
   "scripts": {
     "test": "jest",
     "tslint": "tsc --noEmit",
-    "eslint": "eslint --ext .ts src --color",
-    "build": "tsc",
+    "eslint": "eslint --ext .ts src webpack.config.ts --color",
+    "build:esm": "tsc -p tsconfig.json",
+    "build:cjs": "tsc -p tsconfig.node.json",
+    "build:umd": "cross-env TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack",
+    "build:umd:min": "npm run build:umd -- --env.MINIMIZE",
+    "prebuild": "npm run build:esm && npm run build:cjs",
+    "build": "npm run build:umd && npm run build:umd:min",
     "prepare": "npm run build",
     "prepublishOnly": "npm run tslint && npm run eslint && npm test",
     "postversion": "git push && git push --tags"

package.json

@@ -1,9 +1,10 @@
 {
-  "version": "1.0.0",
+  "version": "1.0.1",
   "extends": "./tsconfig.json",
   "exclude": [],
   "include": [
-    "src"
+    "src",
+    "webpack.config.ts"
   ],
   "compilerOptions": {
     "noEmit": true

tsconfig.eslint.json

@@ -1,10 +1,11 @@
 {
-  "version": "1.0.0",
   "exclude": [
     "node_modules",
     "src/**/*.test.ts",
-    "lib/*"
+    "dist/*"
   ],
+  // Without "include" TypeScript tries to compile "webpack.config.ts" as well.
+  "include": ["src"],
   "compilerOptions": {
     /* Basic Options */
     // "incremental": true,
@@ -15,10 +16,11 @@
     // "checkJs": true,
     // "jsx": "preserve",
     "declaration": true,
+    "declarationDir": "./dist/typings/",
     // "declarationMap": true,
     // "sourceMap": true,
     // "outFile": "./",
-    "outDir": "./lib",
+    "outDir": "./dist/esm/",
     "rootDir": "src",
     // "composite": true,
     // "tsBuildInfoFile": "./",

tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "outDir": "./dist/cjs/",
+  }
+}

tsconfig.node.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "esModuleInterop": true
+  }
+}

tsconfig.webpack.json

@@ -0,0 +1,41 @@
+import path from 'path';
+
+import TerserPlugin from 'terser-webpack-plugin';
+import { ConfigurationFactory } from 'webpack';
+
+const configurationFactory: ConfigurationFactory = env => {
+  const parsedMinimize = typeof env === 'string'
+    ? false
+    : env?.MINIMIZE;
+  const minimize = Boolean(parsedMinimize);
+
+  return {
+    mode: 'production',
+    entry: {
+      index: path.resolve(__dirname, './dist/esm/index.js'),
+    },
+    output: {
+      path: path.resolve(__dirname, './dist/umd'),
+      filename: `[name]${minimize ? '.min' : ''}.js`,
+      library: 'hydrateText',
+      libraryTarget: 'umd',
+      globalObject: 'this',
+    },
+    module: {
+      rules: [
+        {
+          test: /\.t|js$/,
+          use: 'babel-loader',
+        },
+      ],
+    },
+    optimization: {
+      minimize,
+      minimizer: [
+        new TerserPlugin(),
+      ],
+    },
+  };
+};
+
+module.exports = configurationFactory;