在浏览器中使用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使用文档里也可以看到详细的使用方式