|
1 | 1 | # Typescript Webpack Starter
|
| 2 | + |
2 | 3 | [](https://travis-ci.org/emyann/typescript-webpack-starter)
|
3 |
| ->A damn simple ES6 and Typescript Starter kit using webpack for packaging. Perfect for bootstraping your javascript project regardless any framework. |
| 4 | +>π An ES6 and TypeScript Starter kit using webpack for bundling. Create your TypeScript module with neither build nor test configuration. |
| 5 | +
|
4 | 6 |
|
5 | 7 | ## Built upon
|
6 | 8 |
|
7 | 9 | - [x] [Webpack 3](https://webpack.js.org/)
|
8 | 10 | - [x] [Typescript 2](https://blogs.msdn.microsoft.com/typescript/2016/07/11/announcing-typescript-2-0-beta/)
|
9 | 11 | - [x] [Webpack Dashboard](https://github.com/FormidableLabs/webpack-dashboard)
|
10 |
| - |
| 12 | +- [x] [Karma](https://karma-runner.github.io/1.0/index.html), [Jasmine](https://jasmine.github.io/) |
11 | 13 |
|
12 |
| -# Getting started |
| 14 | + |
13 | 15 |
|
14 |
| -## Clone Typescript Webpack Starter |
15 | 16 |
|
16 |
| -```bash |
17 |
| -git clone https://github.com/emyann/typescript-webpack-starter.git |
18 |
| -cd typescript-webpack-starter |
19 |
| -# Install the dependencies |
20 |
| -npm install |
21 |
| -``` |
| 17 | +## Quick Overview |
22 | 18 |
|
23 |
| -## Run |
| 19 | +```sh |
| 20 | +npm install -g create-ts-lib |
24 | 21 |
|
25 |
| -Start a Webpack dev server |
26 |
| -```bash |
| 22 | +create-ts-lib my-typescript-lib |
| 23 | +cd my-typescript-lib/ |
27 | 24 | npm start
|
28 | 25 | ```
|
29 |
| -And go to this URL: `http://localhost:3000` - π |
30 | 26 |
|
31 |
| -Start a Webpack server with the production configuration |
32 |
| -```bash |
33 |
| -npm run server:prod |
| 27 | +Then open http://localhost:3000/ to see your bootstrapped module. |
| 28 | +When youβre ready to deploy to production, create a minified bundle with `npm run build`. |
| 29 | + |
| 30 | +### Get Started Immediately |
| 31 | + |
| 32 | +You **donβt** need to install or configure tools like Webpack or Babel.<br> |
| 33 | +They are preconfigured so that you can focus on the code, but as a starter kit you still can modify them. |
| 34 | + |
| 35 | +Just create a project, and youβre good to go. |
| 36 | + |
| 37 | +### Built upon |
| 38 | + |
| 39 | +- [x] [Webpack 3](https://webpack.js.org/) |
| 40 | +- [x] [Typescript 2](https://blogs.msdn.microsoft.com/typescript/2016/07/11/announcing-typescript-2-0-beta/) |
| 41 | +- [x] [Webpack Dashboard](https://github.com/FormidableLabs/webpack-dashboard) |
| 42 | + |
| 43 | + |
| 44 | +## Getting started |
| 45 | + |
| 46 | +### Installation |
| 47 | + |
| 48 | +Install it once globally: |
| 49 | + |
| 50 | +```sh |
| 51 | +npm install -g create-ts-lib |
34 | 52 | ```
|
35 | 53 |
|
| 54 | +### Creating a TypeScript module |
36 | 55 |
|
37 |
| -## Build Only |
38 |
| -Build a development release |
39 |
| -```bash |
40 |
| -npm run build |
| 56 | +To create a new module, run: |
| 57 | + |
| 58 | +```sh |
| 59 | +create-ts-lib my-ts-module |
| 60 | +cd my-ts-module |
41 | 61 | ```
|
42 | 62 |
|
| 63 | +It will create a directory called `my-ts-module` inside the current folder.<br> |
| 64 | +Inside that directory, it will generate the initial project structure and install the transitive dependencies: |
43 | 65 |
|
44 |
| -Build a production release |
45 |
| -```bash |
46 |
| -npm run build:prod |
47 | 66 | ```
|
| 67 | +my-ts-module |
| 68 | +βββ node_modules |
| 69 | +βββ src |
| 70 | +β βββ index.html |
| 71 | +β βββ index.spec.ts |
| 72 | +β βββ index.ts |
| 73 | +β βββ vendor.js |
| 74 | +βββ tests |
| 75 | +β βββ unit |
| 76 | +β βββ spec-bundle.js |
| 77 | +βββ README.md |
| 78 | +βββ package.json |
| 79 | +βββ .gitignore |
| 80 | +βββ karma.conf.js |
| 81 | +βββ tsconfig.json |
| 82 | +βββ tslint.json |
| 83 | +βββ typings.json |
| 84 | +βββ webpack.config.js |
| 85 | +``` |
| 86 | + |
| 87 | +No configuration or complicated folder structures, just the files you need to build your app.<br> |
| 88 | +Once the installation is done, you can run some commands inside the project folder: |
| 89 | + |
| 90 | +### `npm start` or `npm run server:prod` |
| 91 | + |
| 92 | +Runs the app in development / production mode using Webpack dev server. |
| 93 | +Open [http://localhost:3000](http://localhost:3000) π to view it in the browser. |
| 94 | + |
| 95 | +### `npm test` |
| 96 | + |
| 97 | +Runs the unit tests using Karma as test runner and Jasmine as testing framework. |
| 98 | + |
| 99 | +### `npm run build` or `npm run build:prod` |
| 100 | +Build a development release |
| 101 | + |
48 | 102 | After build phase, 3 files are generated into the `dist` folder:
|
49 | 103 | - `app.bundle.js` - contains the core of the application. From the entry point `src/index.ts`
|
50 |
| -- `vendor.bundle.js` - contains the vendor dependencies |
51 |
| -- `index.html` - html page with references to the 2 files above |
52 |
| - |
53 |
| -## TODO |
| 104 | +- `vendor.bundle.js` - contains the vendor dependencies. From the entry point `src/vendor.ts` (lodash is added as an example) |
| 105 | +- `index.html` - html page referencing these files |
54 | 106 |
|
55 |
| -- [ ] Setup a webpack common configuration and use webpack-merge |
56 |
| -- [ ] `create-ts-app` or `create-typescript-app` CLI instead of cloning the entire repository |
|
0 commit comments