JS在浏览器中实时编码----＞Sandpack

LuckyXuSky

已于 2024-05-27 18:44:32 修改

阅读量337

点赞数 1

文章标签： javascript 前端

于 2024-05-27 16:59:54 首次发布

本文链接：https://blog.csdn.net/qq_48038530/article/details/139239874

版权

今天冲浪的时候发现一款非常好用的npm工具包（Sandpack）惊艳到我了，多的废话不说，少的废话不讲。我们马上开始。相信你学完后都会发现Sandpack是一个有价值且有趣的工具。

看一下AI对它的介绍
在这里插入图片描述

环境初始化

我这里使用的react 工程。构建工具使用Vite
我这里默认你已经正确的安装Vite
初始化项目 pnpm create vite 如果你使用的是npm 就把pnpm改成npm
选择React+TypeScript
按照图片进行选择然后就可以初始化一个React工程
按照提示输入命令安装依赖包然后使用编辑器打开我这里使用的是VSCode
初始化App.tsx文件和main.tsx
App.tsx初始化后
main.tsx初始化后
启动 pnpm run dev
启动访问浏览器显示

安装 Sandpack

安装依赖 pnpm add @codesandbox/sandpack-react
在App.tsx文件顶部导入 import { Sandpack } from "@codesandbox/sandpack-react";
在返回的标签中改成 <Sandpack/>
代码如下

import { Sandpack } from "@codesandbox/sandpack-react";

function App() {

  return (
    <Sandpack />
  )
}

export default App

返回浏览器查看神奇的事情发生了当前渲染了左边是代码右边是代码的编译效果。试试改变左边的代码在查看右边的编译效果
<Sandpack/> 标签支持多个属性具体属性请前往官网查看

属性	属性值	属性值说明
template	vue \| react \| node \| vite-react 具体可查看官网	每个模板都包含启动项目所需的所有文件和依赖项。说人话就是它有内置模板
files	自定义	一旦你选择了你的启动模板，你很可能想要将自定义代码传递到你的Sandpack实例中。最简单的方法是通过文件属性添加和覆盖文件。说人话就是覆盖你使用 template 指定的模板内容

使用template 指定 react
使用template 指定 vue
使用 files 属性更改App.tsx文件里面的内容使用files文件里面的内容替换模板的自定义内容 注意你template选择了react就使用react的语法，选择了Vue就使用Vue的语法

浏览器显示已经是我们自定义的内容

有files有两种写法贴一张官网的图片

实践用法

不知道大家有没有用过 Antd 官网地址。
该组件库改变下面的代码上面的组件就会自动重新渲染我们来实现一下这个效果
在这里插入图片描述

安装 antd pnpm install antd --save
复制下面的代码到项目中这个代码是从antd官网复制下来的

import React from 'react';
import { Button, Flex } from 'antd';

const App: React.FC = () => (
  <Flex gap="small" wrap>
    <Button type="primary">Primary Button</Button>
    <Button>Default Button</Button>
    <Button type="dashed">Dashed Button</Button>
    <Button type="text">Text Button</Button>
    <Button type="link">Link Button</Button>
  </Flex>
);

export default App;

更改App.tsx里面的内容

dependencies 的值和package.json里面的值要一模一样

查看页面内容已经变成和antd一样的效果
在这里插入图片描述
我们试着给第一个按钮添加 danger属性（因为这个是antd的按钮组件你在这里可以添加 antd 按钮组件里面的所有属性）
注意这个 danger属性是在页面上直接添加的不是在编辑器里面的代码添加的

添加下面的属性到按钮上试试
在这里插入图片描述