我有以下代码来使用 Node fs 读取项目中的文件。
const files: FileSystemTree = {
"Component.tsx": {
file: {
contents: fs.readFileSync(
`../../apps/components/${name.toLowerCase()}/${name.charAt(0).toUpperCase()}${name.slice(1)}.tsx`
)
}
}
};
这是整个类的一部分:
import {WebContainer, FileSystemTree} from "@webcontainer/api";
import fs from "fs";
export default class Container {
private mContainer!: WebContainer;
constructor() {
this.CreateContainer();
this.ScaffoldViteApp();
this.StartDevServer();
}
private CreateContainer = async () => {
try {
this.mContainer = await WebContainer.boot();
} catch (err) {
throw new Error(JSON.stringify(err));
}
return this.mContainer;
};
private ScaffoldViteApp = async () => {
try {
this.mContainer.spawn("npm", [
"create",
"vite",
"container-example -- --template react-swc-ts"
]);
} catch (err) {
throw new Error(JSON.stringify(err));
}
return this.mContainer;
};
private StartDevServer = async () => {
try {
this.mContainer.spawn("npm", ["run", "dev"]);
} catch (err) {
throw new Error(JSON.stringify(err));
}
return this.mContainer;
};
public SetComponent(name: string) {
const files: FileSystemTree = {
"Component.tsx": {
file: {
contents: fs.readFileSync(
`../../apps/components/${name.toLowerCase()}/${name.charAt(0).toUpperCase()}${name.slice(1)}.tsx`
)
}
}
};
console.log(fs.readFileSync(
`../../apps/components/${name.toLowerCase()}/${name.charAt(0).toUpperCase()}${name.slice(1)}`
))
try {
this.mContainer.fs.mkdir("components");
} catch (err) {
throw new Error(JSON.stringify(err));
}
try {
this.mContainer.mount(files, {mountPoint: "components"});
} catch (err) {
throw new Error(JSON.stringify(err));
}
return this.mContainer;
}
public GetIframe() {
return this.mContainer.on("server-ready", (port, url) => {
return url;
});
}
public WriteComponent(name: string, content: string) {
const files: FileSystemTree = {
"Component.tsx": {
file: {
contents: content
}
}
};
try {
this.mContainer.mount(files, {mountPoint: "components"});
} catch (err) {
throw new Error(JSON.stringify(err));
}
return this.mContainer;
}
}
当我使用 vitest 运行时:Container.SetComponent()
出现错误:
Error: ENOENT: no such file or directory, open '../../apps/components/example/Example'
然而,在命令单击该路径后,它实际上确实存在。我也尝试过同样的事情,但.tsx
最终没有结果。我还尝试使用 ts-node 和 tsx 运行该文件,得到了相同的结果。这是我的项目结构:
.
├── README.md
├── apps
│ ├── components
│ │ ├── example
│ │ │ ├── Example.tsx
│ │ │ ├── stories
│ │ │ │ └── Example.stories.tsx
│ │ │ └── tests
│ │ │ └── example.spec.tsx
│ │ └── project.json
│ ├── docs
│ │ ├── README.md
│ │ ├── astro.config.mjs
│ │ ├── node_modules
│ │ │ ├── @astrojs
│ │ │ │ ├── check -> ../../../../node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@astrojs/check
│ │ │ │ └── starlight -> ../../../../node_modules/.pnpm/@[email protected][email protected]_@[email protected][email protected][email protected]_/node_modules/@astrojs/starlight
│ │ │ ├── astro -> ../../../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/astro
│ │ │ ├── sharp -> ../../../node_modules/.pnpm/[email protected]/node_modules/sharp
│ │ │ └── typescript -> ../../../node_modules/.pnpm/[email protected]/node_modules/typescript
│ │ ├── package.json
│ │ ├── project.json
│ │ ├── public
│ │ │ └── favicon.svg
│ │ └── src
│ │ ├── assets
│ │ │ └── houston.webp
│ │ ├── content
│ │ │ ├── config.ts
│ │ │ └── docs
│ │ │ ├── components
│ │ │ │ └── example.mdx
│ │ │ ├── guides
│ │ │ │ └── example.md
│ │ │ └── index.mdx
│ │ └── env.d.ts
│ └── storybook
│ ├── node_modules
│ ├── package.json
│ ├── project.json
│ ├── tsconfig.json
│ └── tsconfig.storybook.json
├── docs
│ ├── assets
│ │ ├── highlight.css
│ │ ├── icons.js
│ │ ├── icons.svg
│ │ ├── main.js
│ │ ├── navigation.js
│ │ ├── search.js
│ │ └── style.css
│ ├── functions
│ │ └── default.html
│ ├── index.html
│ ├── modules.html
│ └── types
│ └── Props.html
├── eslint.config.js
├── index.css
├── nx.json
├── package.json
├── packages
│ ├── docs-sandbox
│ │ ├── createContainer.ts
│ │ ├── project.json
│ │ └── tests
│ │ └── createContainer.spec.ts
│ ├── etech-ui-dev
│ │ └── project.json
│ └── etech-ui-utils
│ └── project.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── postcss.config.cjs
├── reactDocgen.ts
├── tailwind.config.js
├── tests
│ └── setup.ts
├── tsconfig.astro.json
├── tsconfig.json
├── tsconfig.node.json
├── tsconfig.react.json
├── types
│ └── eslint-plugin-react.d.ts
└── vite.config.ts