使用snowpack+react+ts打造一个自己的脚手架-一一网

导读

学习内容：本文主要学习snowpack、react、ts、react-router等库和插件的应用

学习成果：

你将会对snowpack有一个初步的了解
学会如何在snowpack中配置sass
如何使用RAP2调试模拟接口
如何封装fetch请求
如何访问环境变量，封装配置文件
以及如何在git commit之前进行代码检查

面向读者：对JavaScript有一定掌握程度，了解过react，了解过打包工具的同学

难度系数： ⭐⭐⭐

Snowpack

你的下一次打包，何必要打包

snowpack是什么？引用官网的原话

Snowpack is a lightning-fast frontend build tool, designed for the modern web. It is an alternative to heavier, more complex bundlers like webpack or Parcel in your development workflow. Snowpack leverages JavaScript’s native module system (known as ESM) to avoid unnecessary work and stay fast no matter how big your project grows.

Once you try it, it’s impossible to go back to anything else.

Snowpack是一个快如闪电的前端构建工具，为现代网络而设计。在你的开发工作流程中，它可以替代webpack或Parcel等更重、更复杂的捆绑器。Snowpack利用JavaScript的本地模块系统（称为ESM），以避免不必要的工作，并保持快速，无论你的项目发展到多大。

一旦你尝试了它，就不可能再回到其他东西上了。

简单来说，snowpack ??！

现在你要了解的仅仅是如何安装，创建一个文件夹，然后在这个目录里面执行以下代码

npm install --save-dev snowpack
复制代码

OK，完事

React

唯一的对手，是上一个自己

React大家应该都不陌生，用于构建用户界面的 JavaScript 魔法库，没错，我又要夸一下React了，它就像魔法一样非常酷炫

TypeScript

啪嗒，一贴即合

TypeScript大家更熟悉了，当你的代码在不断增长时，TypeScript的价值就会越加凸显

快速启动

运行以下代码快速创建一个支持React + TypeScript的snowpack基础模板工程

npx create-snowpack-app react-snowpack --template @snowpack/app-template-react-typescript
复制代码

更多的模板点击这里

安装完后执行以下代码，就可以发下仅仅不到50ms的时间服务就已经启动了

npm run start
复制代码

React Router

条条大路通罗马

进入react-snowpack文件后，执行以下代码来安装React Router

npm install react-router-dom
复制代码

为什么不是npm install react-router呢？其实react-router-dom是在react-router的基础上又进行了封装，更方便我们使用

安装完react-router-dom后，VS CODE会提示缺少对应的描述文件，这时候需要安装一下

npm install @types/react-router-dom -D
复制代码

Sass

样式，还能这样式儿

配置sass，首先安装snowpack的sass插件

npm install @snowpack/plugin-sass -D
复制代码

然后在snowpack.config.js文件中配置sass插件

plugins:[....,
	'@snowpack/plugin-sass',
]
复制代码

这时候你只需要新建一个.scss文件测试一下就可以了

注意：如果你使用的是windows系统，可能需要先配置好Python环境

RAP2

未来的接口，现在调试

RAP2可能给你提供方便的接口文档管理、Mock、导出等功能，当没有真实接口时，可以使用虚拟数据先调试，RAP2使用起来很方便

注册登录
创建一个接口
在浏览器中调试

以上操作过于简单，就不在本文描述，不想操作的话，你可以直接请求 rap2api.taobao.org/app/mock/28… 这个示例

fetch('http://rap2api.taobao.org/app/mock/284263/example/1622281098808');
let json = await fetch('http://rap2api.taobao.org/app/mock/284263/example/1622281098808');
console.log(await res.json());
复制代码

Fetch

轻轻地，再次倾心

关于fetch的详情讲解点这里

fetch是 XMLHttpRequest 的升级版，浏览器原生提供这个对象。直接使用fetch可以减少依赖性，让我们的代码体积更少，也减少了代码的维护成本

在这里我们把fetch简单的封装一下，以拦截request和response。这里有5个参数，url表示请求地址，method表示请求方式，data表示请求的数据，headers表示自定义的头信息，当你要使用blob下载文件时就会用到它，cancelToken表示是否去除用户认证信息，这是为了更好的兼容性考虑。根据你实际的开发设计，可以修改相应的逻辑

import config from "../config/index";
// 平台返回类型
class XYXResponse {
  code: number = 200;
  data: object = {};
}
const baseUrl = config.baseUrl;
const defaultHeaders = { "Content-Type": "text/plain;charset=UTF-8" };
const request = async (
  url: string,
  method: string,
  data?: object,
  headers?: object,
  cancelToken: boolean = false,
) => {
  let requestUrl = baseUrl + url;
  let option: RequestInit = {};
  option.method = method;
  option.headers = { ...defaultHeaders, ...headers };
  if (!cancelToken) {
    option.headers.token = localStorage.getItem("token") || "";
  }
  if (data) {
    if (method.toUpperCase() === "GET") {
      // 解构参数,将对象转换为URL参数
      let params = "";
      for (const [key, value] of Object.entries(data)) {
        if (value !== undefined && value !== null) {
          params += `${key}=${value}&`;
        }
      }
      requestUrl = `${requestUrl}?${params}`;
    } else {
      option.body = JSON.stringify(data);
    }
  }
  // 发送请求
  let response = await fetch(requestUrl, option);
  // 处理结果
  if (response.ok) {
    let result: XYXResponse = await response.json();
    if (result.code === 401) {
      // 未认证通过，清除token，重定向至登录页面
      console.log("未认证通过");
      localStorage.setItem("token", "");
    } else {
      return result;
    }
  } else {
    throw new Error(response.statusText);
  }
};
export default request;
复制代码

如何配置不同环境下的文件

你可以使用以下代码轻松的访问环境变量

import.meta.env.MODE;
复制代码

当npm run start时，默认的MODE值是development。当npm run build时，默认的MODE值是production。当然你可以参考snowpack的文件自定义更多的信息。

我们可以根据MODE值的不同，来使用不同的配置文件，可以参考以下操作

创建config文件夹
在config文件夹内分别创建index.ts、development.ts、production.ts
在index.ts里创建公用配置
在development.ts里创建开发环境配置
在production.ts里创建生产环境配置
在index.ts中根据MODE值的不同，引入对应的配置并和公共配置合并，最后别忘了导出

参考代码

index.ts

import devConfig from "./development";
import proConfig from "./production";

class EnvConfig {
  baseUrl?: string = "";
}
const mode = import.meta.env.MODE;
let commonConfig = {};
let config: EnvConfig = {};
if (mode === "development") {
  config = { ...commonConfig, ...devConfig };
} else if (mode === "production") {
  config = { ...commonConfig, ...proConfig };
}
export default config;
复制代码

development.ts

export default {
  baseUrl: "http://rap2api.taobao.org/app/mock/data",
};
复制代码

production.ts

export default {
  baseUrl: "proBaseUrl",
};
复制代码

思路其实是和webpack一样的

Husky

提交？小意思

husky是一个git hook工具，可以帮助你在代码提交前或代码提交后等某些时机执行某些操作，husky的使用非常简单，举个例子?

在package.json的scripts项添加 “prepare”: “husky install”
执行npm run prepare
添加一个hook ，在代码提交前执行检查代码格式，代码格式检查已经由模板默认配置好了
```
npx husky add .husky/pre-commit "npm run lint"
复制代码
```
这个时候你把代码改的乱糟糟的，然后暂存、提交，就会发现提交失败了
你需要执行npm run format将代码格式化之后，才可以正常提交