GithubHelp home page GithubHelp logo

bhanditz / typescript-webpack-starter Goto Github PK

View Code? Open in Web Editor NEW

This project forked from nobrainr/typescript-webpack-starter

0.0 2.0 0.0 322 KB

⚑ create-ts-lib: A Starter Kit and a CLI to create your TypeScript / ES6 module bundled by Webpack without thinking about build or unit tests configurations. 🏠

Home Page: https://nobrainr.github.io/typescript-webpack-starter/

License: MIT License

JavaScript 85.00% TypeScript 7.84% HTML 5.80% Shell 1.35%

typescript-webpack-starter's Introduction

create-ts-lib CircleCI Npm Package

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 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.

Create a Typescript project

# Use NPX or npm install -g create-ts-lib to install it as a global package
npx create-ts-lib 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
β”œβ”€β”€ typings.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.

typescript-webpack-starter's People

Contributors

emyann avatar samimadini avatar cslecours avatar monkeywithacupcake avatar magichim avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.