typescript-webpack-starter

create-ts-lib

Quick Start

You can execute the create-ts-lib CLI using npx or by installing it globally with npm i -g create-ts-lib.

# Use NPX or npm install -g create-ts-lib to install it as a global package
npx create-ts-lib@latest my-typescript-lib
cd my-typescript-lib && npm start

Build and Serve it

• Browse http://localhost:3000/ to see your bootstrapped module.
• A bundle is created under /dist folder.
• Create a minified bundle with npm run build.

Features

You don’t need to install or configure tools like Webpack, Typescript, Karma or Jasmine.
They are preconfigured so that you can focus on the code, but as a starter kit you still can modify all the configuration files.

• (Application Type) Typescript 3
• (Bundler) Webpack 4
• Karma, Jasmine

Create a Typescript project

# Use NPX or npm install -g create-ts-lib to install it as a global package
npx create-ts-lib@latest my-typescript-lib
cd my-typescript-lib && npm start

Calling create-ts-lib with my-typescript-lib as an argument creates a directory my-typescript-lib inside the current directory.
Inside that directory, the initial file structure of the project is generated with all the devDependencies installed.

my-typescript-lib
├── node_modules
├── src
│   └── index.html
│   └── index.ts
│   └── MyLibrary.ts
│   └── MyLibrary.spec.ts
├── tests
│    └── unit
│        └── spec-bundle.js
├── README.md
├── package.json
├── .gitignore
├── karma.conf.js
├── tsconfig.json
├── tslint.json
└── webpack.config.js

No configuration or complicated folder structures, just the files you need to start your app / package / module.

npm start or npm run server:prod

Runs the app in development / production mode using Webpack dev server. Open http://localhost:3000 🎉 to view it in the browser.

npm test

Runs the unit tests using Karma as test runner and Jasmine as testing framework.

npm run build or npm run build:prod

Creates a bundle into the dist folder:

dist
├── MyLibrary.d.ts # - Example of a 'd.ts' declaration file
├── app.bundle.js # - Main bundle of the application. name from webpack.config
├── app.bundle.js.map # - Sourcemap
├── index.d.ts
└── index.html # - html page referencing app.bundle.js

Development

We’d love to have your helping hand on create-ts-lib! See CONTRIBUTING.md for more information on what we’re looking for and how to get started.

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]