React + Typescript + Webpack 开发环境配置

钱安和

2023-12-01

对于复杂或多人开发的 React 项目来说，管理和使用每个组件的 props 、 state 或许会成为一件让人头痛的事情，而为每一个组件写文档，成本也会比较大，对项目的开发效率也不是最理想的。

Typescript 给 React 带来很多好处：

在组件头部定义 interface，让每个人在拿到组件的第一时间就可以很明确知道该组件需要使用的 props 和 state；
在编译中发现问题，减少运行时的报错；
可以在编辑器中实现实时类型校验、引用查询；
约束类型，在混合多语言环境中降低风险，等。

且配置也是非常简单，步骤如下。

文件目录

.
├── build # 前端配置文件
│   ├── index.html
│   ├── webpack.config.js
├── app # 前端目录
├── .gitignore
├── package.json
├── tsconfig.json
└── tslint.json

配置流程

创建项目

mkdir my-project && cd my-project
npm init

安装依赖

npm i -g webpack webpack-dev-server
npm i --save react react-dom @types/react @types/react-dom
npm i --save-dev ts-loader source-map-loader
npm link webpack webpack-dev-server typescript

配置 webpack

/* build/webpack.config.js */
const config = {
  entry: './app/index.tsx',
  output: {
    filename: 'app.bundle.js',
    path: './public',
    publicPath: '/assets'
  },
  devtool: 'source-map',
  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
  },
  module: {
    loaders: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader'
      }
    ],
    preLoaders: [
      {
        test: /\.js$/,
        loader: 'source-map-loader'
      }
    ]
  },
  devtool: 'eval'
}

module.exports = config

配置 tsconfig

/* tsconfig.json */
{
    "compilerOptions": {
        "outDir": "./public/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react"
    },
    "files": [
        "./app/index.tsx"
    ]
}

至此，基本配置已经完成，后面创建好一个入口页面和entry文件就可以跑起来了：

<!-- build/index.html -->
<!doctype html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>Hello world</title>
    <script src="http://localhost:8080/webpack-dev-server.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script src="assets/app.bundle.js"></script>
  </body>

/* app/index.tsx */
import * as React from 'react'
import { render } from 'react-dom'

interface IAppProps {}
interface IAppState {}

class App extends React.Component<IAppProps, IAppState> {
  public render(): JSX.Element {
    return (
      <div>
        Hello world
      </div>
    )
  }
}

render(<App />, document.getElementById('app'))

启动项目

webpack-dev-server --inline --config build/webpack.config.js --content-base build --open

:smirk: :smirk: :smirk: 出来吧神龙

简单的说明

Webpack 配置

Webpack配置其实是一件很简单的事情，这也是他具备强大竞争力的重要因素。
从配置文件中可以看出，里面无非就是entry、output和loader，如果需要编译CSS，在loader里面加一个即可：

npm i --save-dev style-loader css-loader

/* build/webpack.config.js */
const config = {
  // ...
  module: {
    loaders: [
      {
        test: /\.css/,
        loader: 'style-loader!css-loader'
      }
    ],
    // ...
  },
  // ...
}

项目启动

项目启动的命令过长，放进 package.json 的 scripts 就好了：

/* package.json */

{
  "scripts": {
    "dev": "webpack-dev-server --inline --config build/webpack.config.js --content-base build --open",
  },
}

再执行以下命令试试：

npm run dev

tslint

在开发中如果有个约束代码的工具能够让代码更加优雅，以前用的是 eslint，如果用 .tsx 就不能生效了，这里推荐使用 tslint ：

npm i -g tslint
cd my-project
tslint --init

这样会在项目文件中创建一个现成的 tslint 配置文件： tslint.json ，个性化方案可以自行设置。