# @rainetian/esbuild-wasm-compiler

> File Resolution for Esbuild running in the Browser

Latest version **0.0.19** (published 2024-03-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @rainetian/esbuild-wasm-compiler
pnpm add @rainetian/esbuild-wasm-compiler
yarn add @rainetian/esbuild-wasm-compiler
bun add @rainetian/esbuild-wasm-compiler
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.19 |
| Published | 2024-03-12 |
| First published | 2024-02-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 1000.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Maintainers | fewismuch |
| Keywords | esbuild, wasm, resolve, file-system |

## Links

- npm: https://www.npmjs.com/package/@rainetian/esbuild-wasm-compiler
- Repository: https://github.com/fewismuch/esbuild-wasm-compiler
- Homepage: https://github.com/fewismuch/esbuild-wasm-compiler#readme
- Issues: https://github.com/fewismuch/esbuild-wasm-compiler/issues
- npm.io page: https://npm.io/package/@rainetian/esbuild-wasm-compiler

## Dependencies (2)

- [esbuild-wasm](https://npm.io/package/esbuild-wasm.md) 0.20.0
- [@vue/compiler-sfc](https://npm.io/package/@vue/compiler-sfc.md) 3.4.21

## Alternatives

- [base64url](https://npm.io/package/base64url.md) — 6.1M weekly downloads
- [get-installed-path](https://npm.io/package/get-installed-path.md) — 502.9K weekly downloads
- [@uppy/url](https://npm.io/package/@uppy/url.md) — 185.8K weekly downloads
- [@d3fc/d3fc-shape](https://npm.io/package/@d3fc/d3fc-shape.md) — 16.2K weekly downloads
- [localizer](https://npm.io/package/localizer.md) — 226 weekly downloads

## Recent versions

- 0.0.19 (latest) — 2024-03-12
- 0.0.18 — 2024-03-11
- 0.0.17 — 2024-03-11
- 0.0.16 — 2024-03-11
- 0.0.15 — 2024-03-11
- 0.0.14 — 2024-03-11
- 0.0.13 — 2024-03-05
- 0.0.12 — 2024-03-03
- 0.0.11 — 2024-03-03
- 0.0.10 — 2024-03-03
- 0.0.9 — 2024-03-03
- 0.0.8 — 2024-02-26
- 0.0.7 — 2024-02-24
- 0.0.6 — 2024-02-17

## README

# esbuild-wasm-compiler

![NPM version](https://img.shields.io/npm/v/@rainetian/esbuild-wasm-compiler.svg?style=flat)

一个运行在浏览器中打包编译器，基于`esbuild-wasm`

## 介绍

`esbuild-wasm-compiler`是`esbuild-wasm`的文件解析器。由于Web浏览器不能直接访问文件系统，`esbuild-wasm-compiler`在编译过程中，允许应用程序从外部解析文件。

使`esbuild-wasm`可以解析来自IndexedDB、LocalStorage、Http或任何其他浏览器可访问的可读设备的文件。

`esbuild-wasm-compiler`主要提供给编辑器使用，或者示例演示，或者在浏览器中编译执行项目代码。

## 安装

```bash
npm install @rainetian/esbuild-wasm-compiler
```
or
```html
<script src="https://cdn.jsdelivr.net/npm/@rainetian/esbuild-wasm-compiler/dist/esbuild-wasm-compiler.min.js"></script>
```

## 示例

[//]: # (在浏览器中执行react项目)

#### 从js对象中读取文件

[example](https://github.com/fewismuch/esbuild-wasm-compiler/blob/main/example/demo1/index.html)

```javascript
import {Compiler} from '@rainetian/esbuild-wasm-compiler'
import {files} from './files'

const compiler = new Compiler({
  getFileContent: path => {
    const filePath = Object.keys(files).find(item=>item.startsWith(path))
    const content = filePath ? files[filePath] : null
    if (!content) {
      throw new Error("File not found");
    }
    return content;
  }
},{
  packageJson: JSON.parse(files["package.json"]),
})

const code = await compiler.compile('/App.tsx')
console.log(code);


```

#### 从文件系统中读取文件

[example2](https://github.com/fewismuch/esbuild-wasm-compiler/blob/main/example/demo2/index.html)


```javascript
import {Compiler} from '@rainetian/esbuild-wasm-compiler'

Compiler.createApp('./main.tsx').mount('#root')
```

🔥现已支持vue

[example3](https://github.com/fewismuch/esbuild-wasm-compiler/blob/main/example/demo3/index.html)


## 配置项

```typescript
export interface FilesResolver {
  getFileContent(path: string): Promise<string> | string;
}

export interface CompilerOptions extends esbuild.InitializeOptions {
  // package.json文件内容
  packageJson?: Record<string, any>;
  // esm服务地址
  esmServiceUrl?: string
}
export declare class Compiler {
  constructor(resolver: FilesResolver, options?: CompilerOptions | undefined);
  compile(entryPoint: string, options?: esbuild.BuildOptions): Promise<string | {
    error: boolean;
    message: string;
  }>;
  static createApp(path: string, packageJsonPath?: string): Compiler;
}
```

## 参考

[sinclairzx81/esbuild-wasm-resolve](https://github.com/sinclairzx81/esbuild-wasm-resolve)

---
_Source: https://npm.io/package/@rainetian/esbuild-wasm-compiler · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._