简化 Chrome 扩展程序开发：无需 CRA 即可添加 React

主要观点总结

本文介绍了如何简化Chrome扩展开发并添加React，而不使用Create React App。首先，文章解释了为何不使用CRA在构建Chrome扩展时适用，然后介绍了项目设置、TypeScript安装、基本文件创建、清单文件、弹出窗口文件、Webpack配置和Tailwind CSS样式设计的过程。接着，文章详细说明了如何为弹出窗口添加React的步骤，包括安装React和ReactDOM、更新Webpack以支持React、将TypeScript组件转换为React组件、更新popup.html、更新tsconfig.json文件以及重新构建扩展。最后，文章解释了不使用Create React App的优点，并感谢读者的阅读。

关键观点总结

关键观点1: 项目设置和准备工作

创建新的Chrome扩展项目目录并初始化npm，安装TypeScript和必要的加载器。

关键观点2: TypeScript和Webpack配置

配置TypeScript和Webpack以处理.ts和.tsx文件的编译，以及处理CSS和JS文件的打包。

关键观点3: Tailwind CSS样式设计

安装Tailwind CSS并配置PostCSS，创建Tailwind CSS入口文件以应用样式。

关键观点4: 添加React到弹出窗口

安装React和ReactDOM，更新Webpack和TypeScript配置以支持React，将TypeScript组件转换为React组件。

关键观点5: 不使用Create React App的优点

控制和学习，更好地了解技术细节，适合Chrome扩展的开发需求。

文章预览

本文译者为 360 奇舞团前端开发工程师 原文标题：Simplify Chrome Extension Development: Add React without CRA   原文作者：Kristian Ivanov   原文地址： https://dev.to/k_ivanow/simplify-chrome-extension-development-add-react-without-cra-5h4c 简介 我们都喜欢 React，对吧（除了 Primeagen）。它通过提供一种简单的方法来处理状态，以及访问一个巨大的 npm 模块和组件库，极大地简化了复杂 UI 的构建。它甚至提供了 Create React App (CRA)，只需一个命令就可以快速引导并完成初始设置。 我是 Create React App 的粉丝。它非常适合大多数 web 应用程序，在看到许多从 CRA 弹出的应用程序或使用 gulp 构建/打包的应用后（有时我会觉得自己老了），即使不使用 TypeScript，我也逐渐欣赏它的简单性，以及它在我启动任何新项目时所带来的便利。 然而，在构建像 Chrome 扩展这样的项目时，CRA并不适用，生成的 ………………………………