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