react项目_React、TypeScript、Webpack项目搭建（一）

使用 React + TypeScript + Webpack 搭建项目对于新手来说是一件比较困难的事情。当然你可以选择官方推荐 create-react-app-typescript 一步搭建方案，但如果你那么做，很可能会丢掉很多细节，遇到问题无从下手。今天我们就一起从0到1开始搭建，后续会逐步完善，达到实际项目配置要求。

建议node 版本 V8.0+

Github: react-typescript

Source：

https://levelup.gitconnected.com/react-typescript-with-webpack-2fceebb8faf​levelup.gitconnected.com

目录结构

## 创建项目 react-typescript

$ mkdir react-typescript

## 新建文件 webpack.config.js、index.html

$ touch webpack.config.js index.html
$ npm init -y

npm init -y 指令会生成最小粒度的 package.json 配置

在webpack.config.js 中添加最基本的配置项。

配置详情：概念 | webpack 中文网

module.exports = {
  entry: "",
  output: {},
  module: {},
  plugins: []
}

## 添加 entry 入口文件和 output 输出配置

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.tsx",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js"
  },
  module: {},
  plugins: []
};

./src/index.tsx

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

const ROOT = document.querySelector(".container");

ReactDOM.render(<h1>Hello world!</h1>, ROOT);

区别：

在非 TypeScript 项目中你可能会这么使用:

import React from "react";

但对于Typescript，你必须导入所有（*）作为React。

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

## 安装依赖

• React

$ yarn add react react-dom

• Webpack

$ yarn add webpack webpack-cli webpack-dev-server -D

• TypeScript

Webpack 识别 TypeScript 需要借助 ts-loader ，但我们通常使用性能更好的 awesome-typescript-loader。参考：s-panferov/awesome-typescript-loader

$ yarn add typescript awesome-typescript-loader -D

在 webpack.config.js 中添加

module: {
  rules: [
    {
      test: /.tsx?$/,
      loader: "awesome-typescript-loader"
    }
  ]
},

添加 tsconfig.json 文件，告诉 webpack 去哪儿寻找 typescript 文件以及编译选项配置。

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "jsx": "react",
    "module": "commonjs",
    "noImplicitAny": true,
    "outDir": "./build/",
    "preserveConstEnums": true,
    "removeComments": true,
    "sourceMap": true,
    "target": "es5"
  },
  "include": [
    "./src/**/*"
  ]
}

使用 @types/前缀表示我们额外要获取 React 和 React-DOM 的声明文件。

通常当你导入像"react"这样的路径，它会查看react包；然而，并不是所有的包都包含了声明文件，所以TypeScript还会查看@types/react包。

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

最后在 package.json 中添加以下脚本：

"start": "webpack-dev-server"

总结：以上只是完成了一个最简单的 typescript + react + webpack 的项目。但在真实项目中我们往往需要 调试源码，以及多页面入口等等。

---

React & Webpack · TypeScript中文网 · TypeScript--JavaScript的超集​www.tslang.cn https://levelup.gitconnected.com/react-typescript-with-webpack-2fceebb8faf​levelup.gitconnected.com 命名空间和模块 · TypeScript中文网 · TypeScript--JavaScript的超集​www.tslang.cn 模块 · TypeScript中文网 · TypeScript--JavaScript的超集​www.tslang.cn