Skip to content

Commit

Permalink
feat: add webpack and vite plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
KeJunMao committed Sep 14, 2023
1 parent 9f83b45 commit 10ccc56
Show file tree
Hide file tree
Showing 10 changed files with 139 additions and 87 deletions.
7 changes: 7 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"cSpell.words": [
"formdata",
"miniprogram",
"treeshake"
]
}
69 changes: 14 additions & 55 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,65 +70,24 @@ instance.request({

### 小程序

小程序没有 FormData 和 Blob 对象, 需要自定义一个 vite 插件来兼容:
axios 依赖了 `FormData``Blob` 对象, 而小程序没有,使用提供的插件来解决这一问题

```ts
{
name: "vite-plugin-uni-axios",
transform(code, id) {
if (process.env.UNI_PLATFORM?.includes("mp")) {
if (id.includes("/form-data/lib/browser.js")) {
return {
code: code.replace("window", "globalThis"),
};
}
if (id.includes("/axios/lib/platform/browser/classes/FormData.js")) {
return {
code: `class FormData {};\nexport default FormData;`,
};
}
if (id.includes("/axios/lib/platform/browser/classes/Blob.js")) {
return {
code: `class Blob {};\nexport default Blob;`,
};
}
}
},
},
// vite.config.js
import uniAxiosAdapter from "@uni-helper/axios-adapter/vite";

export default {
plugins: [
...
uniAxiosAdapter()
...
],
}
```
> [!WARNING]
> 这个插件通过将 `FormData``Blob` 导出为空 `class`来解决兼容性问题,如果你确实需要的话,使用 `pnpm add miniprogram-formdata miniprogram-blob` 来安装对应的 polyfill 即可,插件会自动使用。
如果你需要 FormData 和 Blob 的话:

```bash
pnpm add miniprogram-formdata miniprogram-blob
```

```ts
{
name: "vite-plugin-uni-axios",
transform(code, id) {
if (process.env.UNI_PLATFORM?.includes("mp")) {
if (id.includes("/form-data/lib/browser.js")) {
return {
code: code.replace("window", "globalThis"),
};
}
if (id.includes("/axios/lib/platform/browser/classes/FormData.js")) {
return {
code: `import FormData from 'miniprogram-formdata';\nexport default FormData;`,
};
}
if (id.includes("/axios/lib/platform/browser/classes/Blob.js")) {
return {
code: `import Blob from 'miniprogram-blob';\nexport default Blob;`,
};
}
}
},
},
```

如果你使用的是 vue cli,那么你需要编写一个类似的 webpack 插件
如果你使用的是 Vue CLI,改用 `@uni-helper/axios-adapter/webpack` 即可

## 客户端类型

Expand Down
39 changes: 36 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@
"type": "module",
"version": "1.4.0",
"license": "MIT",
"author": {
"name": "kejunmao",
"email": "[email protected]"
},
"packageManager": "[email protected]",
"description": "The Axios adapter for uniapp",
"homepage": "https://github.com/uni-helper/axios-adapter",
Expand All @@ -19,9 +23,34 @@
"sideEffects": false,
"exports": {
".": {
"types": "./dist/index.d.ts",
"require": "./dist/index.cjs",
"import": "./dist/index.js"
"import": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
},
"require": {
"types": "./dist/index.d.cts",
"default": "./dist/index.cjs"
}
},
"./vite": {
"import": {
"types": "./dist/vite.d.ts",
"default": "./dist/vite.js"
},
"require": {
"types": "./dist/vite.d.cts",
"default": "./dist/vite.cjs"
}
},
"./webpack": {
"import": {
"types": "./dist/webpack.d.ts",
"default": "./dist/webpack.js"
},
"require": {
"types": "./dist/webpack.d.cts",
"default": "./dist/webpack.cjs"
}
},
"./client": {
"types": "./client.d.ts"
Expand Down Expand Up @@ -57,5 +86,9 @@
},
"peerDependencies": {
"axios": "^1.5.0"
},
"dependencies": {
"local-pkg": "^0.4.3",
"unplugin": "^1.4.0"
}
}
27 changes: 2 additions & 25 deletions playground/vite.config.ts
Original file line number Diff line number Diff line change
@@ -1,31 +1,8 @@
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import uniHelperAxiosAdapter from "@uni-helper/axios-adapter/vite";

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
uni(),
{
name: "vite-plugin-uni-axios",
transform(code, id) {
if (process.env.UNI_PLATFORM?.includes("mp")) {
if (id.includes("/form-data/lib/browser.js")) {
return {
code: code.replace("window", "globalThis"),
};
}
if (id.includes("/axios/lib/platform/browser/classes/FormData.js")) {
return {
code: `class FormData {};\nexport default FormData;`,
};
}
if (id.includes("/axios/lib/platform/browser/classes/Blob.js")) {
return {
code: `class Blob {};\nexport default Blob;`,
};
}
}
},
},
],
plugins: [uni(), uniHelperAxiosAdapter()],
});
26 changes: 25 additions & 1 deletion pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,12 @@ export interface UserOptions extends Partial<Options> {}

export interface ResolvedOptions extends Options {}

export interface UnpluginOptions {}

export interface UserUnpluginOptions extends Partial<UnpluginOptions> {}

export interface ResolvedUnpluginOptions extends UnpluginOptions {}

export type MethodType = "request" | "download" | "upload";

export type Method = (
Expand Down
39 changes: 39 additions & 0 deletions src/unplugin.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { createUnplugin } from "unplugin";
import { UserUnpluginOptions } from "./types";
import { isPackageExists } from "local-pkg";

export const unplugin = createUnplugin((options: UserUnpluginOptions = {}) => {
const hasFormDataPolyfill = isPackageExists("miniprogram-formdata");
const hasBlobPolyfill = isPackageExists("miniprogram-blob");
return {
name: "unplugin-uni-axios-adapter",
enforce: "pre",
transform(code, id) {
if (process.env.UNI_PLATFORM?.includes("mp")) {
if (id.includes("/form-data/lib/browser.js")) {
return {
code: code.replace("window", "globalThis"),
};
}
if (id.includes("/axios/lib/platform/browser/classes/FormData.js")) {
return {
code: `${
hasFormDataPolyfill
? "import FormData from 'miniprogram-formdata';"
: "class FormData {};"
}\nexport default FormData;`,
};
}
if (id.includes("/axios/lib/platform/browser/classes/Blob.js")) {
return {
code: `${
hasBlobPolyfill
? "import Blob from 'miniprogram-blob';"
: "class Blob {};"
}\nexport default Blob;`,
};
}
}
},
};
});
4 changes: 4 additions & 0 deletions src/vite.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@

import { unplugin } from './unplugin'

export default unplugin.vite
4 changes: 4 additions & 0 deletions src/webpack.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@

import { unplugin } from './unplugin'

export default unplugin.webpack
5 changes: 2 additions & 3 deletions tsup.config.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import { defineConfig } from "tsup";

export default defineConfig({
entry: ["src/index.ts"],
entry: ["src/index.ts", "src/vite.ts", "src/webpack.ts"],
format: ["cjs", "esm"],
splitting: true,
sourcemap: true,
clean: true,
treeshake: true,
minify: process.env.NODE_ENV === "production",
minify: true,
external: ["axios"],
dts: true,
});

0 comments on commit 10ccc56

Please sign in to comment.