Playground 项目教程

1. 项目介绍

Playground 是一个简单的 HTML、CSS 和 JavaScript 演示组件，它完全在浏览器中运行，不需要加载任何第三方站点。该项目支持模块导入，非常适合用于静态博客中展示 HTML、CSS 或 JavaScript 代码，并允许用户实时更改代码并查看输出。

主要特性

• 加载预定义代码的预览
• 自动重新加载预览
• 允许使用裸 ES 包导入
• 在组件本身中查看控制台输出
• 控制默认加载的编辑器选项卡

2. 项目快速启动

安装

首先，通过 npm 或 yarn 安装 Playground：

npm install @agney/playground
# 或者
yarn add @agney/playground

使用示例

以下是一个简单的使用示例：

import Playground from "@agney/playground";
import "@reach/tabs/styles.css";

const App = () => {
  const snippet = {
    markup: `<div id="app"></div>`,
    css: ``,
    javascript: `import { h, Component, render } from 'preact';
import htm from 'htm';
const html = htm.bind(h);
const app = html\`<div>Hello World from Playground</div>\`;
render(app, document.getElementById('app'));`
  };

  return (
    <Playground
      id="example"
      initialSnippet={snippet}
      defaultEditorTab="javascript"
      transformJs
    />
  );
};

3. 应用案例和最佳实践

静态博客中的应用

Playground 可以添加到静态博客中，用于展示 HTML、CSS 或 JavaScript 代码。用户可以实时更改代码并查看输出，非常适合用于教程和代码演示。

实时代码编辑

在开发过程中，Playground 可以作为一个实时代码编辑器，帮助开发者快速测试和调试代码。通过支持模块导入，开发者可以直接在 Playground 中使用第三方库。

4. 典型生态项目

React

Playground 支持 React 代码的演示，开发者可以通过以下方式在 Playground 中演示 React 代码：

import Playground from "@agney/playground";

const App = () => {
  const snippet = {
    markup: `<div id="app"></div>`,
    css: ``,
    javascript: `import React, { createElement } from "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/react-dom";
ReactDOM.render(
  <h1>Hello World</h1>,
  document.getElementById("app")
);`
  };

  return (
    <Playground
      initialSnippet={snippet}
      defaultEditorTab="javascript"
      transformJs
      presets={[["react"]]}
    />
  );
};

Babel

Playground 使用 Babel 进行 JavaScript 代码的转换，支持 ES 模块导入。开发者可以通过设置 transformJs 和 presets 属性来配置 Babel 转换。

<Playground
  transformJs
  presets={["react", "es2015"]}
/>

通过以上配置，Playground 可以支持更复杂的 JavaScript 代码，包括 React 和 ES6+ 语法。