react-typescript-template

readme

A mouth ago. I have write two cli/templte 两个template.
But react-typescript-webpack-cli has a big problem, too slow to compile, so I have refactor the code.

The reason of “Why do you write this article in english?” is that I want to improve my english.
I’ll insist on writing though there will be a lot of grammatical mistakes.

reason of slow

Because I had use ts-loader to compile .tsx files, It will waste too much time when first time to
start webpack-dev-server or build by webpack.

how to slove

Use tsc watch .ts files change and compile immediately. So webpack can receive js files as entry, and
ts-loader is nolonger needed.
When build application, run tsc commander then use webpack to package js files. If environment is
production, use babel compile .es6 to .es5 and compress it with uglifyJsPlugin.

nokit

I have use nokit as my command line tools, Use it can be very convenient
to spawn or exec command. It was develop by my mentor.

source code

react-webpack-typescript-cli

usege

dev

1

yarn run dev

production

will convert to es5 and minify

1

yarn run production

tree caglog

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

├── dist
│   ├── bundle.js
│   ├── index.html
│   └── src
│       ├── index.js
│       └── moduleA.js
├── nofile.js
├── package.json
├── readme.md
├── src
│   ├── moduleA.js
│   └── moduleA.tsx
├── tsconfig.json
├── tslint.json
├── webpack.config.js
└── yarn.lock