Suchjs Official Site

Use suchjs in browser

1. Install and use via npm

The first step: install the library

# Use yarn
yarn add suchjs
# Use npm
npm install --save suchjs
# Use pnpm
pnpm add suchjs

The second step: it is assumed here that packaging tools such as webpack are used, and use the es6 syntax.

// Note the export is in the file suchjs/lib/browser 
import globalSuch from "suchjs/lib/browser";
console.log(globalSuch.as(":string"));
// if you need a namespace
import { createNsSuch } from "suchjs/lib/browser";
const mySuch = createNsSuch("my");
console.log(mySuch.as(":string"));

Optional: if you need use the Such.mock method and intercept the XHR or fetch.

# Install extend method mock for suchjs
# Use yarn
yarn add such-mock-browser
# Use npm
npm install --save such-mock-browser
# Use pnpm
pnpm add such-mock-browser

// First, import suchjs
import "suchjs/lib/browser";
// Use the extended Such with mock method 
import globalSuch from "such-mock-browser";

See Github for an example of using mock in the npm way

2. directly import the script file in HTML

The first step: Download the source file.

Github->such.min.jsInstall the latest version
Official->such.3.0.2.min.js103KB(gzip-31KB)The version the official site used.

The second step: import

<!--import 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>

If the webpack packaging tool is used, it can be configured

// Add externals to webpack configuration
module.exports = {
  // ...
  // Add Suchjs to the configuration externals
  externals: {
    suchjs: "Such",
  },
};
// In the used page import <script src="such.min.js"></script>
// In code
import globalSuch, { createNsSuch } from "suchjs";
console.log(globalSuch.as(":string"));

·If you want to use such.mock to intercept requests and provide mock data, you can view Github in browser mode example using mock

·You can also see detailed usage in such.mock usage documentation