ts-lib-starter-lite-demo

TypeScript Library Starter Lite - Demo

Demo of stripped down version of TypeScript Library Starter: https://github.com/alexjoverm/typescript-library-starter

Differences

All the goodness of TypeScript Library Starter, but without:

• Automatic code formatting with Prettier
• Conventional commits with Commitizen
• Automatic releases with Semantic Release and Conventional Changelog

The following additions are included:

• Linting with Codelyzer with Angular Style Guide rules
• Debugging and task configurations for Visual Studio Code
• Key bindings for Mac and Windows versions of VS Code
  • To use go to Preference, Keyboard Shortcuts, then paste into keybindings.json file
• Placement of spec files next to source code
  • Models for tests can be placed in a models folder
  • Models named with .spec.ts suffix are excluded from the docs
• TypeScript configured to target ES2015 to support advanced features
  • You can change this to ES5 to support Internet Explorer 11

Usage

git clone https://github.com/tonysneed/typescript-library-starter-lite.git YOURFOLDERNAME
cd YOURFOLDERNAME
 
# Run npm install and write your library name when asked. That's all! 
npm install

Start coding! package.json and entry files are already set up for you, so don't worry about linking to your main file, typings, etc. Just keep those files with the same names.

• It's recommended you use an extension for VS Code such as JSDoc Comments, in order to add comments to your code that will be included in your generated docs.

Features

• Zero-setup. After running npm install things will be setup for you 😉
• RollupJS for multiple optimized bundles following the standard convention and Tree-shaking.
• Tests, coverage and interactive watch mode using Jest
• Docs automatic generation and deployment to gh-pages, using TypeDoc
• Automatic types (*.d.ts) file generation
• Travis integration and Coveralls report

Excluding peerDependencies

On library development, one might want to set some peer dependencies, and thus remove those from the final bundle. You can see in Rollup docs how to do that.

The good news is here is setup for you, you only must include the dependency name in external property within rollup.config.js. For example, if you wanna exclude lodash, just write there external: ['lodash'].

NPM scripts

• npm t: Run test suite
• npm start: Runs npm run build in watch mode
• npm run test:watch: Run test suite in interactive watch mode (Cmd + Shift + T)
• npm run test:prod: Run linting and generate coverage
• npm run build: Generate bundles and typings, create docs (Cmd + Shift + B)
• npm run lint: Lints code (Ctrl + Shift + L)

Automatic CI builds and Docs generation

Prerequisites: you need to create/login accounts and add your project to:

• Travis CI

Run the following command to prepare hooks and stuff:

npm run semantic-release-prepare

Follow the console instructions to install semantic release run it (answer NO to "Generate travis.yml").

npm install -g semantic-release-cli
semantic-release-cli setup
# IMPORTANT!! Answer NO to "Generate travis.yml" question. Is already prepared for you :P 

After pushing your first commit to master, Travis CI will run a CI build that runs your tests and generates documentation for your library.

• After the CI build completes, you can go to the Settings for your repo to note the URL where your docs are published to GitHub Pages.

Git Hooks

By default, there is a disabled git hook. It's set up when you run the npm run semantic-release-prepare script. They make sure:

• Your build is not going fail in Travis (or your CI server), since it's runned locally before git push

Manually Creating a Release and Publishing to NPM

When you're ready to publish a release on GitHub, just do it.

• You may want to follow a branching model such as GitFlow or GitHub Flow.

To publish to NPM manually, just follow their instructions.

FAQ

What is npm install doing the first time runned?

It runs the script tools/init which sets up everything for you. In short, it:

• Configures RollupJS for the build, which creates the bundles.
• Configures package.json (typings file, main file, etc)
• Renames main library file in src

Credit and Further Information

For more information about the complete TypeScript Library Starter by @alexjoverm, see the project GitHub repo and hist blog post explaining how to use it.