typescript solution implemented

Author: pmunin

.vscode/tasks.json

@@ -0,0 +1,22 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "type": "npm",
+            "script": "dev",
+            "problemMatcher": []
+        },
+        {
+            "type": "npm",
+            "script": "test:watch",
+            "problemMatcher": []
+        },
+        {
+            "type": "npm",
+            "script": "build",
+            "problemMatcher": []
+        }
+    ]
+}

.webpack/webpack.config.base.js

@@ -1 +1,44 @@
-// TODO: extract to this module all basic logic used by all configurations
+// this module has all basic logic used by all configurations
+const webpack = require('webpack');
+const _ = require('lodash');
+const path = require('path');
+
+/**
+ * 
+ * @param {webpack.Configuration} mergeWith 
+ * @returns {webpack.Configuration}
+ */
+function createConfiguration(mergeWith = undefined) {
+  /**
+   * @type {webpack.Configuration}
+   */
+  let res = {
+    module: {
+      rules: [{
+          test: /(\.tsx|\.ts)$/,
+          loaders: ['babel-loader', 'ts-loader'],
+          exclude: /(node_modules|bower_components)/
+        },
+        {
+          test: /(\.jsx|\.js)$/,
+          loader: 'babel-loader',
+          exclude: /(node_modules|bower_components)/
+        },
+        {
+          test: /(\.jsx|\.js)$/,
+          loader: 'eslint-loader',
+          exclude: /node_modules/
+        }
+      ]
+    },
+    resolve: {
+      modules: [path.resolve('node_modules'), path.resolve('src')],
+      extensions: ['.json', '.js', '.jsx', '.ts', '.tsx']
+    },
+  };
+  if (mergeWith)
+    res = _.merge(res, mergeWith);
+  return res;
+}
+
+module.exports.createConfiguration = createConfiguration;

.webpack/webpack.config.dev.js

@@ -4,8 +4,7 @@ const webpack = require('webpack');
 const path = require('path');
 const env = require('yargs').argv.env; // use --env with webpack 2
 //const CleanWebpackPlugin = require('clean-webpack-plugin');
-
-var process = require('process');
+const base = require('./webpack.config.base');
 const pkg = require('../package.json');
 
 let libraryName = pkg.name;
@@ -18,9 +17,9 @@ function _with(obj, objEditFunc) {
 /**
  * @type {webpack.Configuration}
  */
-let config = {
+let config = base.createConfiguration({
   entry: {
-    [libraryName]: path.resolve('src/index.js'),
+    [libraryName]: path.resolve('src/index.ts'),
   },
   devtool: 'source-map',
   mode: 'development',
@@ -32,23 +31,6 @@ let config = {
     umdNamedDefine: true,
     globalObject: '(typeof global!=="undefined"?global:window)'
   },
-  module: {
-    rules: [{
-        test: /(\.jsx|\.js)$/,
-        loader: 'babel-loader',
-        exclude: /(node_modules|bower_components)/
-      },
-      {
-        test: /(\.jsx|\.js)$/,
-        loader: 'eslint-loader',
-        exclude: /node_modules/
-      }
-    ]
-  },
-  resolve: {
-    modules: [path.resolve('node_modules'), path.resolve('src')],
-    extensions: ['.json', '.js', '.jsx']
-  },
   //plugins: plugins,
   optimization: {
     minimize: false,
@@ -76,15 +58,14 @@ let config = {
     providedExports: true,
     usedExports: true,
     concatenateModules: true,
-    //includeTest? {chunks:'all'}:false,
   },
   plugins: [
     // new webpack.optimize.CommonsChunkPlugin({
     //          name: 'manifest'
     //   })
     //new webpack.HashedModuleIdsPlugin()
   ]
-};
+});
 
 
 module.exports = config;

.webpack/webpack.config.prod.js

@@ -3,6 +3,10 @@ const path = require('path');
 const env = require('yargs').argv.env; // use --env with webpack 2
 //const CleanWebpackPlugin = require('clean-webpack-plugin');
 const UglifyPlugin = require('uglifyjs-webpack-plugin')
+//const DeclarationBundlerPlugin = require('declaration-bundler-webpack-plugin')
+
+const base = require('./webpack.config.base');
+
 
 const _ = require('lodash');
 
@@ -25,9 +29,9 @@ function createConfig(overrides) {
   /**
    * @type {webpack.Configuration}
    */
-  let config = {
+  let config = base.createConfiguration({
     entry: {
-      [libraryName]: path.resolve('src/index.js'),
+      [libraryName]: path.resolve('src/index.ts'),
     },
     //devtool: 'hidden-source-map',
     mode: 'production',
@@ -39,30 +43,13 @@ function createConfig(overrides) {
       umdNamedDefine: true,
       globalObject: '(typeof global!=="undefined"?global:window)'
     },
-    module: {
-      rules: [{
-          test: /(\.jsx|\.js)$/,
-          loader: 'babel-loader',
-          exclude: /(node_modules|bower_components)/
-        },
-        {
-          test: /(\.jsx|\.js)$/,
-          loader: 'eslint-loader',
-          exclude: /node_modules/
-        }
-      ]
-    },
-    resolve: {
-      modules: [path.resolve('node_modules'), path.resolve('src')],
-      extensions: ['.json', '.js', '.jsx']
-    },
     optimization: {
       minimize: false,
       occurrenceOrder: true,
       namedModules: true,
       namedChunks: true,
-      splitChunks:{
-          minSize:200*1024*1024,
+      splitChunks: {
+        minSize: 200 * 1024 * 1024,
       },
       removeAvailableModules: true,
       mergeDuplicateChunks: true,
@@ -72,38 +59,43 @@ function createConfig(overrides) {
     },
     plugins: [
       //new webpack.HashedModuleIdsPlugin()
+      //TODO:
+      // new DeclarationBundlerPlugin({
+      //   moduleName: `"${libraryName}"`,
+      //   out: './index.d.ts',
+      // }),
     ]
-  };
+  });
 
-  if(overrides) config = _.merge(config, overrides);
+  if (overrides) config = _.merge(config, overrides);
   return config;
 }
 
 
 
 
 module.exports = [
-    createConfig(),//full
-    
-    //minimized
-    createConfig({
-        output:{
-            filename:'[name].min.js'
-        },
-        optimization:{
-            minimize:true,
-            minimizer:[
-                new UglifyPlugin({
-                    uglifyOptions:{
-                        compress:true,
-                        mangle:true,
-                        output:{
-                            comments:false,
-                        },
-                    },
-                    sourceMap:false,
-                })
-            ]
-        },
-    }),
+  createConfig(), //full
+
+  //minimized
+  createConfig({
+    output: {
+      filename: '[name].min.js'
+    },
+    optimization: {
+      minimize: true,
+      minimizer: [
+        new UglifyPlugin({
+          uglifyOptions: {
+            compress: true,
+            mangle: true,
+            output: {
+              comments: false,
+            },
+          },
+          sourceMap: false,
+        })
+      ]
+    },
+  }),
 ];