https://github.com/seanny123/webpack-typescript-helloworld

Get something showing up with Webpack, TypeScript
https://github.com/seanny123/webpack-typescript-helloworld

devops hello-world tutorial

Last synced: about 1 year ago
JSON representation

Get something showing up with Webpack, TypeScript

• Host: GitHub
• URL: https://github.com/seanny123/webpack-typescript-helloworld
• Owner: Seanny123
• License: mit
• Created: 2017-04-16T03:34:49.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-04-16T06:11:32.000Z (almost 9 years ago)
• Last Synced: 2025-03-15T08:38:02.063Z (about 1 year ago)
• Topics: devops, hello-world, tutorial
• Language: JavaScript
• Size: 5.86 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

          
# Getting started with client-side TypeScript

If you know JavaScript, but you want to start with TypeScript in a sane development environment, there are quite a few challenges in your way. This repository/tutorial gives you the basics to start using:

- `yarn` to manage your packages

- `npm run` to do different tasks

- `webpack` to build and serve your development

- `ts-loader` to automatically reload the files you edit

- `typings` to get type information for JavaScript packages (in this case `D3.js`)

# Not covered in this tutorial/repository

- How to deploy an application

- How to run unit tests

# Installation proceedure

1. `yarn` 

# Running a development web-server

1. `npm run debug`

# What are all these files?

- `package.json` contains information for `npm`

- `tsconfig.json` configures the TypeScript compiler `tsc`

- `webpack.config.js` configures WebPack somehow? (Work In Progress)

- `webpack.debug.js` configures WebPack somehow? (Work In Progress)

- `typings.json` file that will contain information to JavaScript modules

Because you can't comment JSON files, I've reproduced the JSON files here with comments.

## `package.json`

    {

        // a bunch of personal information that you can omit

        "name": "hello",

        "version": "0.0.1",

        "description": "Hello TypeScript!",

        "author": "Your Name",

        "license": "Free for non-commercial use",

        "main": "dist/hello.js",

        "repository": {

            "type": "git",

            "url": "http://example.com"

        },

        "bugs": {

            "url": "http://example.com/issues"

        },

        "private": true,

        // these are the things that are triggered by `npm run`

        "scripts": {

            "build": "webpack --debug --devtool source-map --output-pathinfo",

            "debug": "webpack-dev-server --config webpack.debug.js --inline",

            "release": "webpack --optimize-minimize --optimize-occurence-order",

            "test": "webpack --config webpack.test.js",

            // install the type information for JavaScript module dependencies

            "postinstall": "typings install"

        },

        // dependencies of this app, including the pure JavaScript ones

        "dependencies": {

            "@types/d3": "^4.0.0",

            "d3": "^4.0.0",

            "html-webpack-plugin": "^2.28.0",

            "ts-loader": "^2.0.3",

            "tslint": "^4.5.1",

            "tslint-eslint-rules": "^3.4.0",

            "tslint-microsoft-contrib": "^4.0.0",

            "typescript": "^2.3",

            "typings": "^2.1.0",

            "webpack": "^2.2.1",

            "webpack-dev-server": "^2.4.2"

        }

    }

## `tsconfig.json`

    {

        // arguments to pass `tsc`

        "compilerOptions": {

            "target": "es6",

            "sourceMap": true,

            "watch": true

        },

        // don't bother trying to compile the libraries

        "exclude": [

            "node_modules"

        ]

    }

# Why did you choose these tools?

They seemed to be the easiest tools to get started with, while also giving you a foundation for further exploration, if desired.