Suchjs官网

在浏览器中使用Suchjs

1. 通过 npm 方式安装使用

第一步：安装库

# 使用yarn安装
yarn add suchjs
# 使用npm安装
npm install --save suchjs
# 使用pnpm安装
pnpm add suchjs

第二步：使用，这里都假设使用了webpack等打包工具，使用es6的写法

// 注意导出放在了 suchjs/lib/browser 文件中 
import globalSuch from "suchjs/lib/browser";
console.log(globalSuch.as(":string"));
// 如果需要使用命名空间
import { createNsSuch } from "suchjs/lib/browser";
const mySuch = createNsSuch("my");
console.log(mySuch.as(":string"));

可选：如果要使用mock拦截

# 安装mock扩展
# 使用yarn安装
yarn add such-mock-browser
# 使用npm安装
npm install --save such-mock-browser
# 使用pnpm安装
pnpm add such-mock-browser

// 首先引入Suchjs
import "suchjs/lib/browser";
// 使用扩展后的Such实例
import globalSuch from "such-mock-browser";

可以查看Github以npm方式使用mock的示例

2. 通过直接在HTML中引入的方式

第一步：下载文件

Github->such.min.js下载最新版本
官网->such.3.0.2.min.js103KB(gzip-31KB)当前官网使用版本

第二步：引入

<!--引入suchjs-->
<script src="such.min.js"></script>
<script>
var globalSuch = Such.default;
var createNsSuch = Such.createNsSuch;
console.log(globalSuch.as(":string"));
var mySuch = createNsSuch("my");
console.log(mySuch.as(":string"));
</script>

如果使用了webpack打包工具，则可以配置

// webpack配置中加入externals
module.exports = {
  // ...
  // 配置externals中增加Suchjs
  externals: {
    suchjs: "Such",
  },
};
// 在使用的页面中引入 <script src="such.min.js"></script>
// 在代码中
import globalSuch, { createNsSuch } from "suchjs";
console.log(globalSuch.as(":string"));

·如果想要使用such.mock来拦截请求，提供mock数据，可以查看Github以浏览器方式使用mock的示例

·在such.mock使用文档里也可以看到详细的使用方式