feat(build): update to webpack 3 with scope hoisting + enable experim…

…ental flat esm bundle (#3)

Closes #2

.gitignore

@@ -7,6 +7,7 @@ node_modules
 coverage
 lib
 lib-esm
+lib-fesm
 umd
 typings
 docs

README.md

@@ -12,6 +12,7 @@ This npm library starter:
   - main -> UMD bundle for Node and Browser
   - module -> transpiled files to ES5 + es2015 modules for tree shaking
   - es2015 -> raw files transpiled to latest ES standard ( es2017 ) ( this is useful if you wann transpile everthing or just wann ship untranspiled esNext code for evergreen browsers)
+- also we provide experimantal **FESM** bundle thanks to Webpack 3 and scope hoisting -> you can find it in `lib-fesm` folder ( scope hoisting is now enabled also within UMD == smaller payload size )
 - type definitions are automatically generated and shipped with your package
 
 ## Start coding jedi!

package.json

@@ -16,9 +16,10 @@
     "node": ">=6.9"
   },
   "scripts": {
-    "cleanup": "shx rm -rf umd lib lib-esm typings coverage docs",
+    "cleanup": "shx rm -rf umd lib lib-esm lib-fesm typings coverage docs",
     "prebuild": "npm run cleanup && npm run verify",
     "build": " tsc && tsc --target es2017 --outDir lib-esm && webpack",
+    "build:fesm:min": "uglifyjs lib-fesm/index.js --compress --mangle --source-map --output lib-fesm/index.min.js",
     "docs": "typedoc -p . --theme minimal --target 'es6' --excludeNotExported --excludePrivate --ignoreCompilerErrors --exclude \"**/src/**/__tests__/*.*\" --out docs src/",
     "test": "jest",
     "test:watch": "npm test -- --watch",
@@ -92,7 +93,7 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@types/jest": "19.2.4",
+    "@types/jest": "20.0.0",
     "awesome-typescript-loader": "3.1.3",
     "commitizen": "2.9.6",
     "cross-var": "1.0.3",
@@ -101,18 +102,20 @@
     "husky": "0.13.4",
     "irish-pub": "0.2.0",
     "jest": "20.0.4",
-    "lint-staged": "3.6.0",
-    "prettier": "1.4.2",
+    "lint-staged": "3.6.1",
+    "prettier": "1.4.4",
     "shx": "0.2.2",
     "standard-version": "4.0.0",
     "strip-json-comments-cli": "1.0.1",
-    "ts-jest": "20.0.5",
-    "tslint": "5.4.2",
-    "tslint-config-standard": "5.0.2",
+    "ts-jest": "20.0.6",
+    "tslint": "5.4.3",
+    "tslint-config-standard": "6.0.1",
     "tslint-react": "3.0.0",
     "typedoc": "0.7.1",
     "typescript": "2.3.4",
-    "validate-commit-msg": "2.12.1",
-    "webpack": "2.6.1"
+    "uglify-js": "git://github.com/mishoo/UglifyJS2#harmony-v2.8.22",
+    "uglifyjs-webpack-plugin": "0.4.3",
+    "validate-commit-msg": "2.12.2",
+    "webpack": "3.0.0-rc.2"
   }
 }

webpack.config.js

@@ -1,21 +1,75 @@
 const { resolve } = require('path');
 const webpack = require('webpack');
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+
 
 const packageJSON = require('./package.json');
 const packageName = normalizePackageName(packageJSON.name);
 
+
+const LIB_NAME = pascalCase(packageName);
 const PATHS = {
   entryPoint: resolve(__dirname, 'src/index.ts'),
-  bundles: resolve(__dirname, 'umd'),
-}
-
-const UMD = {
-  libName: pascalCase(packageName),
-}
-
-const config = (env) => {
-
-  return {
+  umd: resolve(__dirname, 'umd'),
+  fesm: resolve(__dirname, 'lib-fesm')
+};
+
+const EXTERNALS = {
+  // lodash: {
+  //   commonjs: "lodash",
+  //   commonjs2: "lodash",
+  //   amd: "lodash",
+  //   root: "_"
+  // }
+};
+
+const RULES = {
+  ts: {
+    test: /\.tsx?$/,
+    exclude: /node_modules/,
+    use: [
+      {
+        loader: 'awesome-typescript-loader',
+        options: {
+          // we don't want any declaration file in the bundles
+          // folder since it wouldn't be of any use ans the source
+          // map already include everything for debugging
+          // This cannot be set because -> Option 'declarationDir' cannot be specified without specifying option 'declaration'.
+          // declaration: false,
+        }
+      }
+    ]
+  },
+  tsNext: {
+    test: /\.tsx?$/,
+    exclude: /node_modules/,
+    use: [
+      {
+        loader: 'awesome-typescript-loader',
+        options: {
+          target: 'es2017'
+        }
+      }
+    ]
+  }
+};
+
+const PLUGINS = [
+  // enable scope hoisting
+  new webpack.optimize.ModuleConcatenationPlugin(),
+  // Apply minification only on the second bundle by using a RegEx on the name, which must end with `.min.js`
+  new UglifyJSPlugin({
+    sourceMap: true,
+    include: /\.min\.js$/
+  }),
+  new webpack.LoaderOptionsPlugin({
+    minimize: true
+  })
+];
+
+
+const config = env => {
+  const UMDConfig = {
     // These are the entry point of our library. We tell webpack to use
     // the name we assign later, when creating the bundle. We also use
     // the name to filter the second entry point for applying code
@@ -29,60 +83,49 @@ const config = (env) => {
     // We target a UMD and name it MyLib. When including the bundle in the browser
     // it will be accessible at `window.MyLib`
     output: {
-      path: PATHS.bundles,
+      path: PATHS.umd,
       filename: '[name].js',
       libraryTarget: 'umd',
-      library: UMD.libName,
+      library: LIB_NAME,
+      // libraryExport:  UMD.libName,
+      // will name the AMD module of the UMD build. Otherwise an anonymous define is used.
       umdNamedDefine: true
     },
     // Add resolve for `tsx` and `ts` files, otherwise Webpack would
     // only look for common JavaScript file extension (.js)
     resolve: {
       extensions: ['.ts', '.tsx', '.js']
     },
+    // add here all 3rd party libraries that you will use as peerDependncies
+    // https://webpack.js.org/guides/author-libraries/#add-externals
+    externals: EXTERNALS,
     // Activate source maps for the bundles in order to preserve the original
     // source when the user debugs the application
     devtool: 'source-map',
-    plugins: [
-      // Apply minification only on the second bundle by
-      // using a RegEx on the name, which must end with `.min.js`
-      // NB: Remember to activate sourceMaps in UglifyJsPlugin
-      // since they are disabled by default!
-      new webpack.optimize.UglifyJsPlugin({
-        sourceMap: true,
-        include: /\.min\.js$/,
-      }),
-
-      new webpack.LoaderOptionsPlugin({
-        minimize: true
-      }),
-    ],
+    plugins: PLUGINS,
     module: {
-      // Webpack doesn't understand TypeScript files and a loader is needed.
-      // `node_modules` folder is excluded in order to prevent problems with
-      // the library dependencies, as well as `__tests__` folders that
-      // contain the tests for the library
-      rules: [{
-        test: /\.tsx?$/,
-        exclude: /node_modules/,
-        use: [{
-          loader: 'awesome-typescript-loader',
-          options: {
-            // we don't want any declaration file in the bundles
-            // folder since it wouldn't be of any use ans the source
-            // map already include everything for debugging
-
-            // This cannot be set because -> Option 'declarationDir' cannot be specified without specifying option 'declaration'.
-            // declaration: false,
-          }
-        }],
-      }]
+      rules: [RULES.ts]
     }
-  }
-}
+  };
 
-module.exports = config;
+  const FESMconfig = Object.assign({}, UMDConfig, {
+     entry: {
+      'index': [PATHS.entryPoint],
+      'index.min': [PATHS.entryPoint]
+    },
+    output: {
+      path: PATHS.fesm,
+      filename: UMDConfig.output.filename,
+    },
+    module: {
+      rules: [RULES.tsNext],
+    },
+  });
 
+  return [UMDConfig, FESMconfig];
+};
+
+module.exports = config;
 
 // helpers
 
@@ -91,7 +134,7 @@ function camelCaseToDash(myStr) {
 }
 
 function dashToCamelCase(myStr) {
-  return myStr.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+  return myStr.replace(/-([a-z])/g, g => g[1].toUpperCase());
 }
 
 function toUpperCase(myStr) {
@@ -102,7 +145,7 @@ function pascalCase(myStr) {
   return toUpperCase(dashToCamelCase(myStr));
 }
 
-function normalizePackageName(rawPackageName){
+function normalizePackageName(rawPackageName) {
   const scopeEnd = rawPackageName.indexOf('/') + 1;
 
   return rawPackageName.substring(scopeEnd);