React+TypeScript

新建项目

新建工程文件夹

1

$ mkdir TypeScriptDemo && cd TypeScriptDemo

初始化工程

除了package name 其他都默认敲回车即可

1

2

3

4

$ npm init

package name: (TypeScriptDemo) TypeScriptDemo

...

Is this ok? (yes) yes

组织目录结构

src目录存放工程代码，dist最终由webpack生成

1

2

3

4

TypeScriptDemo/

├─ dist/

└─ src/

└─ components/

安装依赖

• 安装全局webpack

1

npm install -g webpack

• 安装TypeScript

1

$ npm install typescript --save-dev

配置WebStorm自动编译ts文件

打开配置页面WebStorm>Preferences快捷键?,，按照如下配置，步骤2为node环境目录

参考文献

• app-root-path
• autoprefixer

Autoprefixer是一个后处理程序，你可以同Sass，Stylus或LESS等预处理器共通使用。它适用于普通的CSS，而你无需关心要为哪些浏览器加前缀，只需全新关注于实现，并使用W3C最新的规范。

1. case-sensitive-paths-webpack-plugin
2. chalk
3. cli-highlight
4. css-loader
5. dotenv
6. extract-text-webpack-plugin
7. file-loader
8. fs-extra
9. fsevents
10. html-webpack-plugin
11. jest
12. object-assign
13. postcss-flexbugs-fixes
14. postcss-loader
15. promise
16. react-dev-utils
17. react-error-overlay
18. source-map-loader
19. style-loader
20. sw-precache-webpack-plugin
21. ts-loader
22. tslint
23. tslint-loader
24. tslint-react
25. typescript
26. url-loader
27. webpack
28. webpack-dev-server
29. webpack-manifest-plugin
30. whatwg-fetch

原文:大专栏  React+TypeScript

原文地址：https://www.cnblogs.com/dajunjun/p/11651562.html