搭建typescript_React、TypeScript、Webpack项目搭建（二）

Love The Way You Lie 2023-10-05 16:52 3阅读 0赞

![64c374fa-452e-eb11-8da9-e4434bdf6706.png][]

源码地址：react-typescript

### **本节将做以下改动** ###

1.  删除 `index.html` 中的硬编码 `bundle.js` 【html-webpack-plugin】
2.  支持`source maps` 增强调试过程 【source-map-loader】
3.  添加组件 【interface】
4.  支持 `scss` 【mini-css-extract-plugin、css-loader、sass-loader、node-sass 】

### **一、删除bundle.js** ###

**1.1 删除 index.html 中的 bundle.js**

**1.2 安装** html-webpack-plugin **插件**

为项目生成一个或多个HTML文件（由插件实例数决定），并将webpack打包后的脚本文件自动添加到对应生成的HTML文件中

$ yarn add html-webpack-plugin -D

**引用**

const HtmlWebpackPlugin = require("html-webpack-plugin");

**配置**

plugins: [
      new HtmlWebpackPlugin({
        template: "./index.html"
      })
    ]

前面我们已经删除了 bundle.js 。此时将对 html 文件进行修改，所以将其添加为模板引用。运行`npm run start` ，然后访问`http://localhost:8080/`，能正常访问。

--------------------

### **二、Source Maps**  ###

用 Chrome 调试工具，可以看到 bundle.js 文件的源码，是编译之后的代码，不利于调试，所以我们需要添加 source-map-loader **，增强代码调试。**

![65c374fa-452e-eb11-8da9-e4434bdf6706.png][]

**2.1 安装 loader**

$ yarn add source-map-loader -D

**2.2 添加配置**

我们需要再次对 `webpack.config.js` 进行配置

module: {
        rules: [
          {
            test: /.tsx?$/,
            loader: "awesome-typescript-loader"
          },
          {
            enforce: "pre",
            test: /.js$/,
            loader: "source-map-loader"
          }
        ]
      },

*  enforce: "pre" --> 把该 Loader 的执行顺序放到最前面
 *  enforce: "post" --> 把该 Loader 的执行顺序放到最后

**2.3 开启 devtool**

devtool: "source-map"

![67c374fa-452e-eb11-8da9-e4434bdf6706.png][]

--------------------

### **三、添加组件** ###

到目前为止，我们只有一个简单的 index.tsx 文件，还没有引入组件的概念。接下来我们创建一个 `components` 目录和 `App.tsx` 组件。

import * as React from "react";
    
    export class App extends React.Component<any, any> {
         
      constructor(props: any) {
         
        super(props)
        this.state = {
         
          age: 27
        };
      }
    
      render() {
         
        return
         <div>
             <h1>name: {
         this.props.name}</h1>
             <h1>age: {
         this.state.age}</h1>
        </div>
      }
    }

但是我们并不建议使用 `any` 这种类型，因为它违背了typescript 的原则。

React.Component中的第一个类型用于props，第二个用于state。

***3.1 props 接口***

interface IProps { name: string; }

***3.2 state 接口***

interface IState {name: number}

**3.3 最终 App.tsx**

import * as React from "react";
    
    interface IProps {
          name: string; }
    interface IState {
          age: number }
    
    export class App extends React.Component<IProps, IState>  {
         
      constructor(props: IProps) {
         
        super(props)
        this.state = {
         
          age: 27
        };
      }
    
      render() {
         
        return <div>
          <h1>name: {
         this.props.name}</h1>
          <h1>age: {
         this.state.age}</h1>
        </div>
      }
    }

**3.4 引入组件** App.tsx

import * as React from "react";
    import * as ReactDOM from "react-dom";
    
    import {
          App } from "./components/App";
    
    const ROOT = document.querySelector(".container");
    
    ReactDOM.render(<App name="Jamala" />, ROOT);

此外，我们导入的是 "App" 而非 "App.tsx"。 此时需要告诉webpack我们已经省略了该文件扩展名。`webpack.config.js`

devtool: "source-map",
    resolve: {
        extensions: [".js", ".ts", ".tsx"]
    }

此时，webpack 将会依次寻找 `.js` `.tx` `.tsx`文件。

--------------------

### **四、添加css样式** ###

**4.1 安装依赖**

$ yarn add mini-css-extract-plugin css-loader sass-loader node-sass  -D

*  `mini-css-extract-plugin`：将把我们编译的所有`SCSS`编译成`CSS`并将它们放在一个新文件中，而不是内联它们。需要区别 extract-text-webpack-plugin
 *  `css-loader`：将通过解析我们拥有的任何导入和URL来加载我们的 CSS
 *  `sass-loader`：加载我们的`sass`或`SCSS`
 *  `node-sass`：将我们的`SCSS`编译为`CSS`

**4.2 新建SCSS文件**

> ./styles/style.scss

$background-grey: red;
    
    body {
         
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 14px;
      line-height: 1.3rem;
      background-color: $background-grey;
    }

**4.3 scss-loader相关配置**

> webpack.config.js

{
         
        test: /.scss$/,
        use: [
            MiniCssExtractPlugin.loader,
            "css-loader",
            "sass-loader"
        ]
    }

**4.4 引入scss**

> index.tsx

import "./styles/style.scss";

**4.5 MiniCssExtractPlugin 配置**

> webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    
    
    plugins: [
        new HtmlWebpackPlugin({
         
          template: "./index.html"
        }),
        new MiniCssExtractPlugin({
         
          filename: "style.css"
        })
    ],

**最终我们看到的效果：**

![68c374fa-452e-eb11-8da9-e4434bdf6706.png][]

**总结：需要特别注意 webpack 的loader 配置（webpack4 是一个较大的升级版本），以及 typescript 中接口的定义。**

--------------------

**参考：**

伯艺：【一】React16+ TypeScript3 + Webpack4+zhuanlan.zhihu.com

![69c374fa-452e-eb11-8da9-e4434bdf6706.png][]

https://levelup.gitconnected.com/react-typescript-with-webpack-part-2-aa02d150c59blevelup.gitconnected.com webpack 4 提取 CSS 等样式文件juejin.im \[webpack\] devtool里的7种SourceMap模式是什么鬼？juejin.im

[64c374fa-452e-eb11-8da9-e4434bdf6706.png]: http://p04.5ceimg.com/content/64c374fa-452e-eb11-8da9-e4434bdf6706.png
[65c374fa-452e-eb11-8da9-e4434bdf6706.png]: http://p01.5ceimg.com/content/65c374fa-452e-eb11-8da9-e4434bdf6706.png
[67c374fa-452e-eb11-8da9-e4434bdf6706.png]: http://p01.5ceimg.com/content/67c374fa-452e-eb11-8da9-e4434bdf6706.png
[68c374fa-452e-eb11-8da9-e4434bdf6706.png]: http://p01.5ceimg.com/content/68c374fa-452e-eb11-8da9-e4434bdf6706.png
[69c374fa-452e-eb11-8da9-e4434bdf6706.png]: http://p05.5ceimg.com/content/69c374fa-452e-eb11-8da9-e4434bdf6706.png