javascript - 使用 Node 模块和 Rollup 构建 Web 客户端

Question

我正在尝试使用 rollup 而不是 browserify 和 babel 构建一个 React 应用程序。我意识到我需要使用 rollup-plugin-babel 来转译 jsx，但是当我告诉 rollup 格式为 iife 时，最终页面加载时出现错误:

Uncaught ReferenceError :React 未定义

我需要在 rollup.config.js 中添加什么才能将我在最终版本中安装在 package.json 中的 Node 模块包含在内？

Answer 1

两个选项:

1. 将 React 作为单独的 <script> 包含在内在应用程序包之前添加标签
2. 包括rollup-plugin-node-resolve在您的配置文件中，从 node_modules 中提取依赖项文件夹。

如果您选择第二条路线，您还需要rollup-plugin-commonjs (将 CommonJS 模块转换为 ES 模块)。我认为您还需要添加 import * as React from 'react'到每个包含 JSX 的模块，否则您将继续收到 ReferenceError。

注意:您也许可以使用 rollup-plugin-buble转译 JSX。它类似于 Babel 插件，但速度更快(尽管它不能转译所有 ES2015 功能)