Loading...
墨滴

落落

2021/08/20  阅读:45  主题:橙心

TypeScript重构axios(一)

TypeScript重写axios之项目诞生

项目初始化

我们通过TypeScript library starter来创建一个TS项目,它是一个开源的TypeScript开发基础库的脚手架工具,可以帮助我们快速初始化一个TypeScript项目,我们可以去它的 官网进行学习和使用它。

一、使用方式

git clone https://github.com/alexjoverm/typescript-library-starter.git 项目名称

我们在这里初始化项目

# 拉下项目基础模板
git clone https://github.com/alexjoverm/typescript-library-starter.git ts-axios-pro
# 切换到项目目录下
cd ts-axios-pro
# 进行项目install安装相关插件
npm install 

二、项目目录

在编写代码之前,我们先来了解下axios的工作流程,如下图所示:

我们大概知道了axios的工作流程,当然如果你把源码看了,并且理解那是更好的,接下来我们先来写测试的例子,我们在跟目录下建立一个examples目录,在examples目录下建立一个webpack.config.js配置文件,在编写webpack.config.js文件之前,我们先安装几个插件:

  • npm install express -D 安装express框架,编写服务端代码
  • npm install body-parser -D 解决post请求
  • npm install webpack@4.17 webpack-cli@3 webpack-dev-server -D 安装webpack
  • npm install ts-loader@5 tslint-loader -D一个是解析以.ts结尾的文件,一个ts的eslint
npm install express -D
npm install body-parser -D
npm install webpack@4.17 webpack-cli@3 webpack-dev-server -D 
npm install ts-loader@5 tslint-loader -D

安装成功后,对examples/webpack.config.js进行配置

# webpack.config.js

const fs = require('fs');
const path = require('path');
const webpack = require('webpack');

module.exports = {
    /**
     * 我们会在 examples 目录下建多个子目录
     * 我们会把不同章节的 demo 放到不同的子目录中
     * 每个子目录的下会创建一个 app.ts
     * app.ts 作为 webpack 构建的入口文件
     * entries 收集了多目录个入口文件,并且每个入口还引入了一个用于热更新的文件
     * entries 是一个对象,key 为目录名
     */

    entry: fs.readdirSync(__dirname).reduce((entries, dir) => {
        const fullDir = path.join(__dirname, dir);
        const entry = path.join(fullDir, "app.ts");
        if (fs.statSync(fullDir).isDirectory() && fs.existsSync(entry)) {
        entries[dir] = entry;
        }
        return entries;
    }, {}),
    /**
     * 根据不同的目录名称,打包生成目标 js,名称和目录名一致
    */

    output: {
        path: path.join(__dirname, "__build__"),
        filename"[name].js",
        publicPath"/__build__/"
    },
    resolve: {
        extensions: [".ts"".tsx"".js"]
    },
    module: {
        rules: [
          {
            test/\.ts$/,
            enforce"pre",
            use"tslint-loader",
            exclude/node_modules/
          },
          {
            test/\.tsx?$/,
            use"ts-loader",
            exclude/node_modules/
          }
        ]
    },
    devServer: {
        noInfotrue,
        overlaytrue,
        opentrue,
        proxy: {
          // 配置跨域
          "/api/": {
            target"http://localhost:3000",
            wstrue,
            changOrigintrue
          }
        }
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    ]
}

服务端代码

在根目录下建立server文件夹,在server文件下建立server.js

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const router = express.Router();

// 使用body-parser中间件
app.use(bodyParser.urlencoded({ extendedfalse }));
app.use(bodyParser.json());


router.get('/api/base/get', (req, res) => {
    res.json({
        msg'hello world'
    })
})

app.use(router)

const port = process.env.PORT || 3000;
module.exports = app.listen(port, () => {
    console.log(`Server listening on http://localhost:${port}, Ctrl+C to stop`)
})

examples下建立第一个例子:我们取名为base,它是一个文件夹,它里面包含index.htmlapp.ts

# app.ts
import axios from '../../src/axios'
axios({
    method"get",
    url"/api/base/get",
    params: {
      a1,
      b2
    }
})
# index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Base demo</title>
</head>
<body>
<script src="/__build__/base.js"></script>
</body>
</html>

此时我们在package.json设置相关命令:

// 在scripts里面加入两行命令
"scripts":{
  "server""node server/server.js",
  "dev""webpack-dev-server --config './examples/webpack.config.js' --hot"
}

我们执行npm run dev可以让demo跑起来,同时让服务端启动npm run server访问http://localhost:8080/,这样一个小的demo就成功了,下一篇文档我们开始编写axios的源码了。。

落落

2021/08/20  阅读:45  主题:橙心

作者介绍

落落