Updated typescript library template

.gitignore

@@ -2,6 +2,6 @@
 .DS_Store
 node_modules
 
-lib
-lib-esm
-_bundles
+dist-commonjs
+dist-esmodule
+dist-umd

LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2017 Marco Botto
+All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1 @@
+Read about this setup at: [Compiling and bundling TypeScript libraries with Webpack](http://marcobotto.com/compiling-and-bundling-typescript-libraries-with-webpack/).

package.json

@@ -1,19 +1,34 @@
 {
   "name": "typescript-lib-example",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Example of TypeScript library setup for multiple compilation targets using tsc and webpack",
-  "main": "index.js",
-  "repository": "https://www.github.com/elboman/typescript-lib-example",
-  "author": "Marco Botto",
+  "main": "dist-commonjs/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://www.github.com/elboman/typescript-lib-example.git"
+  },
+  "author": {
+    "name": "Marco Botto",
+    "email": "[email protected]",
+    "url": "http://marcobotto.com"
+  },
+  "contributors": [{
+      "name": "Benny Bottema",
+      "email": "[email protected]",
+      "url": "http://www.bennybottema.com"
+    }],
   "license": "MIT",
   "scripts": {
-    "clean": "shx rm -rf _bundles lib lib-esm",
-    "build": "npm run clean && tsc && tsc -m es6 --outDir lib-esm && webpack"
+    "clean": "shx rm -rf dist-umd dist-commonjs dist-esmodule",
+    "build": "npm run clean && tsc && tsc -m es6 --outDir dist-esmodule && webpack"
   },
   "dependencies": {
+    "moment": "^2.18.1"
+  },
+  "devDependencies": {
     "awesome-typescript-loader": "^3.0.4-rc.2",
     "shx": "^0.2.2",
-    "typescript": "^2.1.6",
-    "webpack": "^2.2.1"
+    "typescript": "2.3.1",
+    "webpack": "2.4.1"
   }
 }

src/Greeter.ts

@@ -1,6 +1,13 @@
+import * as moment from 'moment';
+
 export class Greeter {
     constructor(public greeting: string) { }
     greet() {
+        if (typeof moment !== 'undefined') {
+            console.log('it is now: ', moment().format());
+        } else {
+            console.log('it is now: ', new Date().toString());
+        }
         return `Hello, ${this.greeting}!`;
     }
 }

src/index.ts

@@ -1,5 +1 @@
-import {Greeter} from './Greeter';
-
-const example = new Greeter('World');
-
-console.log(example.greet());
+export * from './Greeter';

tsconfig.json

@@ -4,10 +4,12 @@
     "module": "commonjs",
     "target": "es5",
     "lib": [ "es2015", "dom" ],
-    "outDir": "lib",
+    "outDir": "dist-commonjs",
     "allowSyntheticDefaultImports": true,
     "suppressImplicitAnyIndexErrors": true,
     "forceConsistentCasingInFileNames": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
     "sourceMap": true,
     "declaration": true,
     "jsx": "react"

webpack.config.js

@@ -1,67 +1,58 @@
 var path = require("path");
 var webpack = require("webpack");
 
-var PATHS = {
-  entryPoint: path.resolve(__dirname, 'src/index.ts'),
-  bundles: path.resolve(__dirname, '_bundles'),
-}
-
 var config = {
-  // 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
-  // minification via UglifyJS
-  entry: {
-    'my-lib': [PATHS.entryPoint],
-    'my-lib.min': [PATHS.entryPoint]
-  },
-  // The output defines how and where we want the bundles. The special
-  // value `[name]` in `filename` tell Webpack to use the name we defined above.
-  // 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,
-    filename: '[name].js',
-    libraryTarget: 'umd',
-    library: 'MyLib',
-    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']
-  },
-  // 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({
-      minimize: true,
-      sourceMap: true,
-      include: /\.min\.js$/,
-    })
-  ],
-  module: {
+    // 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 minification via UglifyJS
+    entry: {
+        'my-lib': ['./src/index.ts'],
+        'my-lib.min': ['./src/index.ts']
+    },
+    // The output defines how and where we want the bundles. The special value `[name]` in `filename` tell Webpack to use the name we defined above.
+    // We target a UMD and name it MyLib. When including the bundle in the browser it will be accessible at `window.MyLib`
+    output: {
+        path: path.resolve(__dirname, 'dist-umd'),
+        filename: '[name].js',
+        libraryTarget: 'umd',
+        library: 'MyLib',
+        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']
+    },
+    // 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({
+            compress:true,
+            sourceMap: true,
+            include: /\.min\.js$/
+        })
+    ],
+
     // 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
-    loaders: [{
-      test: /\.tsx?$/,
-      loader: 'awesome-typescript-loader',
-      exclude: /node_modules/,
-      query: {
-        // 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
-        declaration: false,
-      }
-    }]
-  }
-}
+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                use: [
+                    {loader: 'awesome-typescript-loader'}
+                ]
+            }
+        ]
+    },
+
+    // this library should not include external dependencies, so our library users
+    // can choose their own version (or omit it completely if it is optional)
+    externals: {
+        // tell Webpack to be compatible with the following format for requiring moment
+        'moment': {root: 'moment', commonjs: 'moment', commonjs2: 'moment', amd: 'moment'}
+    }
+};
 
 module.exports = config;