Starter/typescript-starter
1
0
Fork 0
mirror of synced 2025-11-08 12:57:47 +00:00
Code Issues Releases Wiki Activity

feat(examples): improve browser usage example

Browse Source
This commit is contained in:
Jason Dreyzehner
2017-02-12 16:15:08 -05:00
parent 5f18048ab7
commit c8199e72ce
6 changed files with 70 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -16,7 +16,7 @@ So we can have nice things:
## Get started
Before you start, consider configuring or switching to an [editor with good typescript support](https://github.com/Microsoft/TypeScript/wiki/TypeScript-Editor-Support).
Before you start, consider configuring or switching to an [editor with good typescript support](https://github.com/Microsoft/TypeScript/wiki/TypeScript-Editor-Support)like [vscode](https://code.visualstudio.com/).
To see how this starter can be used, check out the [`examples`](./examples) folder.

2
examples/browser/package.json
View File

@@ -3,7 +3,7 @@
"version": "1.0.0",
"license": "MIT",
"scripts": {
"start": "http-server ./build/ -o",
"start": "http-server -c-1 ./build/ -o",
"build": "rollup -c && cpy src/index.html build/"
},
"devDependencies": {

13
examples/browser/src/index.html
View File

@@ -1,3 +1,10 @@
<html><body>
<script src="test.js" />
</body></html>
<html>
<head>
<script src="test.js"></script>
</head>
<body>
</body>
</html>

24
examples/browser/src/test.ts
View File

@@ -1,10 +1,24 @@
// Note: we're not using the double method, so it should be excluded from the bundle
import { power, asyncABC } from '../../../'
if (power(3,4) === 81) {
console.log('✔ power(3,4) === 81')
} else {
console.error('The "power" method seems to be broken.')
let output = ''
function log(str: string) {
console.log(str)
output += str + '\n'
}
asyncABC().then( abc => console.log('✔ asyncABC returned:', abc) )
function logAndAlert(data: string[]) {
log('✔ asyncABC returned: ' + data)
window.alert(output)
}
log('Output:')
if (power(3,4) === 81) {
log('✔ power(3,4) === 81')
} else {
log('The "power" method seems to be broken.')
}
asyncABC().then( abc => logAndAlert(abc) )

7
examples/browser/tsconfig.json
View File

@@ -2,9 +2,12 @@
"extends": "../../tsconfig",
"compilerOptions": {
"outDir": "build",
"module": "ES6",
"module": "es6",
"declaration": false,
"removeComments": true
"removeComments": true,
"lib": [
"dom"
]
},
"include": [
"src/*.ts"

40
examples/readme.md
View File

@@ -1,27 +1,55 @@
# `es7-typescript-starter` Usage Examples
# Usage Examples
This directory (`/examples`) can be deleted when forking this project. It contains some simple examples of how forks of this starter can be used by other projects. (Usually you'll want to provide these instructions in your root `readme.md`.)
This directory (`/examples`) can be deleted when forking this project. It contains some simple examples of how forks of `es7-typescript-starter` can be used by other projects. (Usually you'll want to provide these instructions in your root `readme.md`.)
## Node (Vanilla)
This shows the simplest use case – a quick, hacked-together Node.js project with no type safety, and no pre-processing. This is the way most of the Node.js ecosystem currently expects to import a node modules.
```bash
# build es7-typescript-starter first
yarn build
cd examples/node-vanilla
node test.js
# run the example
node test.js
```
## Node (Typescript)
This is for larger and more established Node.js projects which use Typescript for type safety. You'll notice that the type declarations and inline documentation from `es7-typescript-starter` are accessible to [Typescript-compatible editors](https://github.com/Microsoft/TypeScript/wiki/TypeScript-Editor-Support) like [vscode](https://code.visualstudio.com/).
```bash
# build es7-typescript-starter first
yarn build
cd examples/node-typescript
yarn && yarn build && yarn start
# install the dependencies
yarn
# type-check and build the example
yarn build
# run the example
yarn start
```
## Browser (Rollup, Tree-shaking)
## Browser (tree-shaking with Rollup)
This project imports the `power` and `asyncABC` functions from the ES6 output of `es7-typescript-starter`, without importing the `double` function. This allows for the `double` method to be completely excluded from output via [Rollup's tree-shaking](http://rollupjs.org/), making the final javascript bundle potentially much smaller, even before using a minifier like [Uglify](https://github.com/mishoo/UglifyJS2).
To demonstrate, this example doesn't minify or remove comments. You can see where some javascript has been excluded from the bundle.
```bash
# build es7-typescript-starter first
yarn build
cd examples/browser
yarn && yarn build && yarn start
# install the dependencies
yarn
# build the javascript bundle
yarn build
# start a server and open the test in a browser
yarn start
```