搭建自己的React+Typescript环境

最新推荐文章于 2022-11-02 14:50:58 发布

编码博客控

最新推荐文章于 2022-11-02 14:50:58 发布

阅读量508

点赞数

文章标签：前端 React Typescript

本文链接：https://blog.csdn.net/qq_21118431/article/details/101225398

版权

本文介绍了如何从头构建一个React+Typescript的项目，包括初始化项目、配置webpack、Babel、React、开发环境、添加Typescript支持、CSS配置、图片字体资源加载以及集成ESlint和React-router。通过一步步的指导，帮助读者掌握完整的项目构建过程。

摘要由CSDN通过智能技术生成

前言

前阵子在自己学习React，最开始上手使用的creat-react-app来创建自己的项目，2版本之后的create-react-app已经支持了很多功能，比如sass、数据mock、typescript支持等等，也升级了相关依赖babel、webpack到一个最新的版本，具体可以参照Create React App 中文文档，但是它将项目的webpack配置等内容给藏起来了，想要自己配置的话还要npm run eject才可见，不过对于我这种初学者已经足够了，但是本着折腾的精神，在掘金看了好多大佬的配置文章，终于折腾出一个自己的项目模板，如果有什么问题或者不对的地方，希望大佬们能及时指出，最后有项目地址~

项目简介

主要的依赖以及版本

webpack4+
babel7+
typescript3+
react16.8+
antd3+
react-router5+
eslint5+

初始化项目

1.创建一个目录，名字按自己喜好来

mkdir react-ts-template
cd react-ts-template

2.初始化项目,填写项目信息

yarn init -y 或者 npm init -y

安装webpack

yarn add webpack -D 或者 npm i webpack -D
yarn add webpack-cli -D 或者 npm i webpack-cli -D

webpack也可以全局安装，不过要注意配置PATH
webpack4将命令行相关的操作抽离到了webpack-cli中，比如init、migrate、serve等等，不过都没用过

安装完毕后在根目录新建build文件夹，并新建一个webpack.common.js文件，用来存放webpack的公共配置

mkdir build
cd build
touch webapck.common.js

然后在webpack.common.js中简单的配置入口(entry)跟输出(output)。

const path = require('path');
module.exports={
  entry: path.join(__dirname, '../src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, '../dist')
  }
}

接着在根目录下再新建src文件夹，用来存放主要代码，并新建index.js，随便写点东西。

console.log('Hello World');

在package.json中加入一个脚本，并在控制台中运行它npm run build

"scripts": {
    "build": "webpack --config build/webpack.common.js"
}

之后会发现生成了一个dist文件夹，并且还有一个bundle.js，同时控制台还会有报错

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

webpack4中提供了 mode 配置选项，告知 webpack 使用相应模式的内置优化，上面这个警告写着如果不提供mode，webpack将会使用production模式。我们把scripts修改一下。

"scripts": {
    "build": "webpack --config build/webpack.common.js --mode production"
}

这样的webpack简单的打包功能就有了。

Bable

Bable这里使用的是7版本，与之前版本不同的是安装依赖时的包名，像babel-core、babel-preset-env、babel-polyfill等，名字已经更换成了@babel/core、@babel/preset-env、@babel/polyfill，这里先安装主要的包。

yarn add @babel/core @babel/preset-env @babel/preset-react babel-loader -D

然后在根目录下新建一个babel.config.js，这个配置文件跟.babelrc.js是有区别的，根据官网来看babel.config.js是项目级别的一个配置，详细信息可以参照官网 Config Files，在其中添加如下内容：

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react'
  ],
  plugins: []
}

修改webpack.common.js，增加 js 文件的 loader 配置，之后还会改。

module: {
    rules: [{
        test: /\.js$/,
        use: ['babel-loader'],
        include: path.join(__dirname, '../src')
    }]
  }

React

接下来加入React，也是最重要的部分。

yarn add react react-dom

修改 src/index.js 中的内容

import React from 'react';
import ReactDom from 'react-dom';

ReactDom.render(<div>Hello React!</div>, document.getElementById('root'));

然后在根目录下新建一个public文件夹，并在里面新建一个index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>React-TS-Tempalte</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

想要 webpack 能以这个html为模板，还需要一个html-webpack-plugin插件，安装它yarn add html-webpack-plugin -