最近开始准备开始React开发的工作，接触了许多新东西，俗话说好记性不如烂笔头，写篇文章来记录下从头搭建React开发环境的点点滴滴。

初始化工程

首先创建一个名叫my-app空的文件夹，并用vscode打开，创建如下所示的项目结构:

my-app/
├─ dist/
└─ src/
   └─ components/

在控制台运行

npm init -y

这样如下所示的package.json文件就创建好了。

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

git仓库管理

可以给本地工程添加一个仓库方便管理

git init

同时根目录下添加.gitignore文件，里面可以过滤掉不需要版本管理的目录或者文件。比如node_modules文件夹等。

添加Webpack

接着，配置webpack作为打包工具。执行如下安装命令，在项目中添加webpack及其命令行的支持。

yarn add -D webpack webpack-cli

完成后，webpack就添加到package.json的开发环境依赖中去了。我们还需要调整 package.json 文件，以便确保我们安装包是私有的(private)，并且移除 main 入口。这可以防止意外发布你的代码。

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.4"
  }
}

接下来，再webpack安装完成以后，我们需要添加webpack的配置文件来完成复杂控制，这样很多配置可以通过配置文件完成，而无需通过CLI命令来传入。

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

配置中的entry是整个程序的入口，output控制程序打包输出结果，包括入口文件名及文件位置等。
我们可以设置一个快捷方式。在 package.json 添加一个脚本：

{
  "scripts": {
    "build": "webpack"
  }
}

在终端敲入yarn build，完成首次程序打包，根目录生成了dist文件夹及bundle.js。

添加React

现在我们添加React和React-DOM以及它们的声明文件到package.json文件里做为依赖：

yarn add react react-dom

yarn add -D @types/react @types/react-dom

使用@types/前缀表示我们额外要获取React和React-DOM的声明文件。通常当你导入像 "react"这样的路径，它会查看react包；然而，并不是所有的包都包含了声明文件，所以TypeScript还会查看 @types/react包。同时需要注意类似@types/前缀的类型声明文件只提供给开发环境使用，发布环境不需要该依赖。

添加Typescript

再添加typescript开发相关的依赖。

yarn add -D typescript awesome-typescript-loader source-map-loader

这些依赖会让TypeScript和webpack在一起良好地工作。 awesome-typescript-loader可以让Webpack使用TypeScript的标准配置文件 tsconfig.json编译TypeScript代码。 source-map-loader使用TypeScript输出的sourcemap文件来告诉webpack何时生成自己的sourcemaps。这就允许你在调试最终生成的文件时就好像在调试TypeScript源码一样。

添加TypeScript配置文件

我们需要创建一个tsconfig.json文件，它包含了输入文件列表以及编译选项。在工程根目录下新建文件 tsconfig.json文件，添加以下内容：

{
    "compilerOptions": {
        // 重定向输出目录
        "outDir": "./dist/",
        // 生成相应的 .map文件
        "sourceMap": true,
        // 在表达式和声明上有隐含的 any类型时报错
        "noImplicitAny": true,
        // 指定生成哪个模块系统代码
        "module": "commonjs",
        // 指定ECMAScript目标版本
        "target": "es6", 
        // 在 .tsx文件里支持JSX
        "jsx": "react",
        // 解析非相对模块名的基准目录
        "baseUrl": "./",
        // 要包含的类型声明文件路径列表
        "typeRoots": [
            "node_modules/@types"
        ]
    },
    "include": [
        "./src/**/*"
    ],
    "exclude": [
        "./dist/",
        "node_modules",
    ]
}

写些代码

下面使用React写一段TypeScript代码。首先，在 src/components目录下创建一个名为Hello.tsx的文件，代码如下：

import * as React from "react";

export interface HelloProps {
    name: string
}

const Hello: React.SFC<HelloProps> = (props) => {
    return (<div>Hello {props.name}!!</div>);
}

export default Hello;

这个是一个简单的React的无状态函数控件，可以传入一个name属性。
再分别添加作为入口的index.tsx和index.html

import * as React from "react";
import * as ReactDOM from "react-dom";

import Hello from "./components/Hello";

ReactDOM.render(
    <Hello name="React" />,
    document.getElementById("app")
);

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
</head>
<body>
    <div id="app"></div>
</body>
</html>

设定 HtmlWebpackPlugin

执行命令安装Webpack的HtmlWebpackPlugin插件，通过该插件可以按照指定模板生成对应的html文件。

  yarn add -D html-webpack-plugin

修改webpack.config.js，追加HtmlWebpackPlugin插件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // 入口文件
    entry: './src/index.tsx',
    // 需要解析的文件后缀名
    resolve: {
        extensions: [ '.tsx', '.ts', '.js' ]
    },
    // 管理输出
    output: {
        // 定义输出文件名规则
        filename: '[name].bundle.js',
        // 定义输出文件名路径
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
    },
    // 管理插件，通过插件实现增强功能
    plugins: [
        new HtmlWebpackPlugin({
            title: 'My App',
            template: './src/index.html'
        })
    ],
    // 配置项目处理的不同文件及模块
    module: {
        rules: [
            {
                test: /\.(ts|tsx)?$/,
                loader: 'awesome-typescript-loader'
            },
        ]
    }
};

使用webpack-dev-server

webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。让我们设置以下：

yarn add -D webpack-dev-server

修改配置文件，告诉开发服务器(dev server)，在哪里查找文件：

    // 管理开发服务器
    devServer: {
        // 查找文件路径
        contentBase: 'dist',
        // 启用 HMR
        hot: true,
    },

并且增加2个webpack自带的插件已支持HMR

        // 当开启 HMR 的时候使用该插件会显示模块的相对路径，建议用于开发环境
        new webpack.NamedModulesPlugin(),
        // 启用 HMR 热更新，建议用于开发环境
        new webpack.HotModuleReplacementPlugin()

package.json中增加"dev": "webpack-dev-server"CLI指令已启动服务器调试。

完整的webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack')

module.exports = {
    // 入口文件
    entry: './src/index.tsx',
    // 需要解析的文件后缀名
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    // 管理输出
    output: {
        // 定义输出文件名规则
        filename: '[name].bundle.js',
        // 定义输出文件名路径
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
    },
    // 管理插件，通过插件实现增强功能
    plugins: [
        new HtmlWebpackPlugin({
            title: 'My App',
            template: './src/index.html'
        }),
        // 当开启 HMR 的时候使用该插件会显示模块的相对路径，建议用于开发环境
        new webpack.NamedModulesPlugin(),
        // 启用 HMR 热更新，建议用于开发环境
        new webpack.HotModuleReplacementPlugin()
    ],
    // 配置项目处理的不同文件及模块
    module: {
        rules: [
            {
                test: /\.(ts|tsx)?$/,
                loader: 'awesome-typescript-loader'
            },
        ]
    },
    // 管理开发服务器
    devServer: {
        // 查找文件路径
        contentBase: 'dist',
        // 启用 HMR
        hot: true,
    },
};

完整的package.json:

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/react": "^16.8.21",
    "@types/react-dom": "^16.8.4",
    "awesome-typescript-loader": "^5.2.1",
    "html-webpack-plugin": "^3.2.0",
    "source-map-loader": "^0.2.4",
    "typescript": "^3.5.2",
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.4",
    "webpack-dev-server": "^3.7.2"
  },
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }
}

此时，在终端中输入yarn dev命令后，打开浏览器输入http://localhost:8080/即可看到我们实现的还原首页。

如此，一个webpack4+react16+typescript3的简单脚手架工程就完成了。

01-从零开始搭建React工程