typescript日渐成为主流技术，本文记录基于typescript的react脚手架的两种不同的搭建过程：
2022年1月博鳌海滩的夜.jpg
一、完全基于后端构建技术
缺点：最完成的bundle.js体积超过1M
1. 初始化工作区：
mkdir ts-react && cd ts-react && npm init -y && mkdir src && touch ./src/index.tsx
2. 安装依赖：
npm install -S react react-dom
npm install -D webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-typescript @babel/preset-react
3. webpack.config.js
const path=require('path')
module.exports = {
mode: "development",
devtool: "source-map",
entry: "./src/index.tsx",
output: {
filename: "bundle.js"
},
devServer: {
static: path.join(__dirname, "dist"),
compress: true,
port: 9000
},
resolve: {
// Add `.ts` and `.tsx` as a resolvable extension.
extensions: [".ts", ".tsx", ".js"]
},
module: {
rules: [
{
test: /\.[t|j]sx?$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env','@babel/preset-typescript','@babel/preset-react']
}
}
}
]
}
};
4. src/index.tsx
import ReactDOM from 'react-dom'
import React, { ReactElement ,useState} from 'react'
interface Props {}
function App({}: Props): ReactElement {
let [album,setAlubm]=useState({name:"john yu"});
return (
<div>
<h1>Hello {album.name}!!!</h1>
</div>
)
}
ReactDOM.render(<App/>,document.querySelector("#app"))
5. dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
6. 附：package.json
{
"name": "ts-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack serve",
"build": "webpack"
},
"devDependencies": {
"@babel/core": "^7.16.7",
"@babel/preset-env": "^7.16.8",
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
"babel-loader": "^8.2.3",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.7.2"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}
7. 附：工作区结构：
ts-react $ tree -I node_modules
.
├── dist
│ ├── bundle.js
│ ├── bundle.js.map
│ └── index.html
├── package-lock.json
├── package.json
├── src
│ └── index.tsx
└── webpack.config.js
二、后端构建结合CDN
1. 初始化工作区（完全一样）
mkdir ts-react2 && cd ts-react2 && npm init -y && mkdir src && touch ./src/index.tsx
2. 依赖：
npm install -D webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-typescript @babel/preset-react
此时不需要添加react，react-dom依赖，但需要填加两个d.ts声明文件（保证typescript编译时，使用React/ReactDOM这两个变量时不会报错）
npm install -D @types/react @types/react-dom
3. webpack.config.js
与之前完全一样
4. src/index.tsx(不需要import了，同时编译typescript时并不会报错)
interface Props {}
function App({}: Props): React.ReactElement {
let [album,setAlubm]=React.useState({name:"john yu"});
return (
<div>
<h1>Hello {album.name}!!!</h1>
</div>
)
}
ReactDOM.render(<App/>,document.querySelector("#app"))
5. dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
6. 附：package.json
{
"name": "ts-react2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack serve",
"build": "webpack"
},
"devDependencies": {
"@babel/core": "^7.16.7",
"@babel/preset-env": "^7.16.8",
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
"babel-loader": "^8.2.3",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.7.2"
}
}
7. 附：工作区结构：
ts-react2 $ tree -I node_modules
.
├── dist
│ ├── bundle.js
│ ├── bundle.js.map
│ └── index.html
├── package-lock.json
├── package.json
├── src
│ └── index.tsx
└── webpack.config.js
