Spectacle.js：爱上用JSX React制作绚丽演示文稿！（sans三重审判模拟器）

大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

今天给大家带来的主题是Spectacle.js，即一个使用 JSX 语法在 React 中编写演示文稿的库。话不多说，直接进入正题！

1. Spectacle.js 用于制作演示文稿1.1 什么是 Spectacle.js

Spectacle.js 是一个使用 JSX 语法在 React 中编写演示文稿的库。整个应用程序是一个 React 组件，因此开发者可以在演示文稿中嵌入 React 组件，并且无需离开演示文稿即可进行演示。

同时，Spectacle.js 官方提供了一系列开箱即用的组件，例如： <Slide> 和 <BlockQuote>，它们使得将演示文稿构建为可组合 UI 非常友好。同时，为了使幻灯片编写得更好，如果开发者已经习惯使用 React，逐渐会发现 Spectacle 具有已经习惯的源代码的所有功能，例如：通过 Babel 的 ES-next 语法。

Spectacle.js 的某些部分是课程的标准内容，例如：主题和过渡，但也有一些较小的细节使创作变得非常出色。

整个项目是使用 babel-plugin-react-transform 设置的，这意味着当启动时，将在创作幻灯片时在浏览器中进行热加载
其他的细节主要是那些真正组合得很好的组件，可以让你快速上手。例如，<Layout> 组件使用 Flexbox，因此开发者可以 <Fit> 和 <Fill> 幻灯片上某个部分中的文本。

同时，值得一提的是，有些开发者可能觉得用 React 编写 UI 比较繁琐，为此，Spectacle 提供了 <Markdown>，允许开发者直接编写 Markdown 语法。

1.2 Spectacle.js 的典型特点

可以将 Spectacle.js 的特点归结为以下几个点：

互动演示：可以添加可点击的元素和其他交互性，使演示文稿动起来
实时预览代码：展示的不仅仅是代码块，无需离开演示文稿即可实时演示最终项目。
其他丰富特性：通过自动格式、简单的主题、图像调暗和其他开箱即用的有趣功能来完善演示文稿。
开箱即用支持 TypeScript：Spectacle 类型随包一起提供，因此开发者可以在任何 .ts 或 .js 演示文稿中安全地使用 Spectacle，而无需单独的类型定义导入。
丰富的格式导出：可以将幻灯片导出为 PDF 格式，使用 ?exportMode=true 附加演示文稿 URL 将允许开发者通过展平演示文稿来导出演示文稿，以便可以直接从浏览器打印为 PDF。同时支持 URL 后附加 ?exportMode=true&printMode=true，以便从幻灯片中获得适合打印机打印的扁平黑白打印版本。

下面动图是 Spectacle.js 官网给出的示例，非常酷炫：

目前 Spectacle.js 在 Github 上通过 MIT 协议开源，有超过 9.5k 的 star、0.74k 的 fork、代码贡献者 160 ，妥妥的前端优质开源项目。

2.如何使用 Spectacle.js 的几种方式2.1 使用 Vite 引导基于 React 的 Spectacle 应用程序

首先需要使用 vite 启动一个新的 React 项目：

npm create vite@latest my-spectacle-deck -- --template react-ts

通过运行 npm add spectacle 安装 Spectacle，然后在 App.tsx 中，将样板内容替换为 Spectacle starter：

import { Deck, Slide, Heading, DefaultTemplate } from "spectacle"; function App() { return ( <Deck template={<DefaultTemplate />}> <Slide> <Heading>Welcome to Spectacle</Heading> </Slide> </Deck> ); } export default App;2.2 使用 Next.js App Router 引导基于 React 的 Spectacle 应用程序

使用 create-next-app 启动一个新的 React 项目：

npx create-next-app@latest

通过运行 npm add spectacle 安装 Spectacle，接着在应用程序 app 目录中创建一个 Deck.tsx 文件并添加以下 Spectacle starter：

"use client"; import { Deck, Slide, Heading, DefaultTemplate } from "spectacle"; export const SpectacleDeck = () => { return ( <Deck template={<DefaultTemplate />}> <Slide> <Heading>Welcome to Spectacle</Heading> </Slide> </Deck> ); };

在 app/page.tsx 中，导入 <SpectacleDeck /> 组件即可：

import { SpectacleDeck } from "./deck"; export default function Home() { return <SpectacleDeck />; }2.3 使用 Markdown 和 Spectacle CLI

创建一个新的 Markdown 文件，可以使用 .md 或 .mdx（MDX 允许您在 markdown 中混合 JSX 组件），开发者可以使用下面的示例作为入门：

# Welcome to Spectacle - This is a list item - This is another list item --- # Second Slide Text can be **bold** or _italic_! Notes: These are presenter notes, only visible in presenter mode to the speaker.

需要注意的是，三重破折号 (---) 被用作幻灯片分隔符，Notes: 关键字用于嵌入仅对演示者模式下的演讲者可见的演示者注释。

要查看幻灯片，需要将 markdown 提供给 Spectacle CLI 以启动本地 Web 服务器。

$ npm install --global spectacle-cli $ spectacle -s my-slides.mdx

启动的 Web 服务器支持实时刷新，并且会在对 Markdown 文件进行更改时自动更新卡片组。

2.4 使用一页

One Page 是一个独立的 HTML 文件，让开发者无需构建步骤即可构建，通过使用 htm over JSX 来减少依赖性和加载时间。

作为一个独立的实体，它已经引用了在 Web 浏览器中创作和启动套牌所需的依赖项。由于不需要任何工具，One Page 在平板电脑上也是最佳选择，可以从此存储库中的示例目录下载一页 HTML 文件。

将一致的样式应用到 Spectacle 的最简单方法是使用主题。

创建包含单个对象导出的主题 JS 文件，提供的属性将与默认基本主题合并（在 Spectacle 中的 src/theme/default-theme.js 中找到）。

export default { colors: { primary: "red", secondary: "green", }, fonts: { header: '"Helvetica Neue", Helvetica, Arial, sans-serif', }, fontSizes: { h1: "72px", h2: "64px", }, };