React + Typescript + Webpack 开发环境配置

╰半夏微凉° 2022-07-14 09:21 256阅读 0赞

对于复杂或多人开发的 `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`文件就可以跑起来了：

<!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", }, }

再执行以下命令试试：