diff --git a/.gitignore b/.gitignore index ebd315f..f495bb2 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,6 @@ .DS_Store node_modules -lib -lib-esm -_bundles \ No newline at end of file +dist-commonjs +dist-esmodule +dist-umd \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..80b667c --- /dev/null +++ b/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. \ No newline at end of file diff --git a/README.md b/README.md index e69de29..9df05b1 100644 --- a/README.md +++ b/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/). \ No newline at end of file diff --git a/package.json b/package.json index 138a4e3..9833852 100644 --- a/package.json +++ b/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": "b.bottema@projectnibble.org", + "url": "http://marcobotto.com" + }, + "contributors": [{ + "name": "Benny Bottema", + "email": "benny@bennybottema.com", + "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" } } diff --git a/src/Greeter.ts b/src/Greeter.ts index 716d3f8..7afa047 100644 --- a/src/Greeter.ts +++ b/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}!`; } } \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index a9f0dcc..f1c9796 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,5 +1 @@ -import {Greeter} from './Greeter'; - -const example = new Greeter('World'); - -console.log(example.greet()); \ No newline at end of file +export * from './Greeter'; \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index cbc11ff..3d24e29 100644 --- a/tsconfig.json +++ b/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" diff --git a/webpack.config.js b/webpack.config.js index d88dde5..09a2f71 100644 --- a/webpack.config.js +++ b/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; \ No newline at end of file