Webpack+React+Typescript开发环境

Webpack+React+Typescript开发环境

Webpack

FaceBook的Instagram团队开发的一个前端打包工具，比起之前的一些前端自动化构建工具，比如Gulp和Grunt来说，Webpack是基于依赖来进行代码整合的。也就是必须要有一个入口文件，这个入口文件中会引入其他的脚本文件，之后webpack通过这些依赖关系将所有的文件打包，并且可以自动生成sourcemap来方便调试。

dependence

目录结构

基本的开发环境首先需要安装node、npm这些就不多说了，然后需要使用npm安装webpack以及typescript。具体的使用方法可以参考两个的官方文档：

首先建立项目的目录结构：

mkdir WebpackProject
cd WebpackProject
mkdir src
mkdir dist
cd src
mkdir components

得到如下的目录结构：

依赖安装

首先初始化npm

npm init

一路上看着填写就可以了，如果只是试验环境的话可以一路Enter下去。

安装webpack以及typescript：

npm install -g webpack typescript

现在国内的npm速度比较慢，可以使用阿里自己搭建的国内的npm镜像站：cnpm来进行依赖安装。

安装react相关的依赖：

npm install --save-dev react react-dom @types/react @types/react-dom

在构建开发环境的时候，需要一些webpack插件来协助完成代码打包，由于我们使用了typescript这种JavaScript的super set来进行开发，所以要安装webpack的typescript解析工具，并且在现在这种自动化构建工具构建的代码中，代码都是经过压缩或者打包的，也就是在错误提示的时候，根本不知道错误究竟出现在哪里，所以现在chrome支持了sourceMap来对代码进行定位，这里sourceMap就不具体解释了，有兴趣的同学可以自己上网搜索一下。

安装webpack的依赖工具：

npm install --save-dev ts-loader source-map-loader
npm link typescript
npm install --save-dev webpack-dev-server

这时所有的依赖都安装完了，现在可以根据自己的需求初始化一下git或者bower。

环境配置

在使用typescript的时候可以自己指定其一些配置：