新建项目 新建工程文件夹 1 $ mkdir TypeScriptDemo cd TypeScriptDemo 初始化工程 除了package name 其他都默认敲回车即可 1 2 3 4 $ npm init package name: (TypeScriptDemo) TypeScriptDemo ... Is this ok? (yes) yes 组织目
新建项目
新建工程文件夹
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最新的规范。
- case-sensitive-paths-webpack-plugin
- chalk
- cli-highlight
- css-loader
- dotenv
- extract-text-webpack-plugin
- file-loader
- fs-extra
- fsevents
- html-webpack-plugin
- jest
- object-assign
- postcss-flexbugs-fixes
- postcss-loader
- promise
- react-dev-utils
- react-error-overlay
- source-map-loader
- style-loader
- sw-precache-webpack-plugin
- ts-loader
- tslint
- tslint-loader
- tslint-react
- typescript
- url-loader
- webpack
- webpack-dev-server
- webpack-manifest-plugin
- whatwg-fetch
原文:大专栏 React+TypeScript