# webpack5-react-ts

**Repository Path**: summ3rleft/webpack5-react-ts

## Basic Information

- **Project Name**: webpack5-react-ts
- **Description**: webpack 搭建的 react+ts 框架
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-30
- **Last Updated**: 2022-12-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

> 参考 https://juejin.cn/post/7111922283681153038 初始化

# 初始化项目

`npm init -y`：`-y` 是 `--yes` 的缩写，表示所有的配置均使用默认值

### 安装 webpack

`npm i webpack webpack-cli -D`

### 安装 react

`npm i react react-dom -S`

### 安装 react 类型

`npm i @types/react @types/react-dom -D`

### tsconfig.json 内容

```json
{
    "compilerOptions": {
        "target": "ESNext", // 当前 TS 版本支持的最高 ES 版本
        "lib": ["DOM", "DOM.Iterable", "ESNext"],  // type definitions library
        "allowJs": false, // allow JavaScript files to be imported in your project
        "skipLibCheck": false, // skip tpye checking of declaration files
        "esModuleInterop": false, // TypeScript treats CommonJS/AMD/UMD modules similar to ES6 modules
        "allowSyntheticDefaultImports": true, // Allow Synthetic Default Imports
        "strict": true, //  enabling all of the strict mode family options
        "forceConsistentCasingInFileNames": true, //  TypeScript will issue an error if a program tries to include a file by a casing different from the casing on disk
        "module": "ESNext",
        "moduleResolution": "Node", // Specify the module resolution strategy
        "resolveJsonModule": true, // Allows importing modules with a ‘.json’ extension
        "isolatedModules": true,
        "noEmit": true, // Do not emit compiler output files like JavaScript source code, source-maps or declarations
        "jsx": "react", // react18这里也可以改成react-jsx Controls how JSX constructs are emitted in JavaScript files
    },
    "include": ["./src"]
}
```