React开发chrome插件系列教程之插件开发环境搭建

紧接上一篇文章对chrome插件的基本介绍，这里我们就来开始真正实践一下插件的开发吧，第一部分就从开发环境搭建入手吧，这一部分也是插件开发和Web-SPA应用开发区别较大的一部分

预期目标

预期目标是搭建React+TS+Antd的插件开发环境，支持build生成插件所需要的所有文件

最终理想的build目录应该接近下述形态：

├─ favicon.ico         <--这个没有也行，用不到
├─ index.html          <--popup入口页面
├─ insert.js           <--插入到目标页面执行的js（非必须，视业务需求而定，后面笔记会说到）
├─ manifest.json       <--插件的配置文件
├─ /static
|  ├─ /css
|  |  ├─ content.css   <--content页面样式（会与目标页面互相污染）
|  |  └─ main.css      <--popup页面样式（不会与目标页面互相污染）
|  ├─ /js
|  |  ├─ background.js <--background script
|  |  ├─ content.js    <--content script
|  |  └─ main.js       <--popup script
|  └─ /media           <--项目的图片资源存放目录

上述包含了插件所需要的popup，content和background组成部分

开发环境搭建实践

create-react-app搭建标准react工程

这里我采用react开发都很熟悉的脚手架create-react-app来进行，如果希望使用TS的小伙伴记得添加TS模板的参数哈

快速新建标准react+ts工程：

npx create-react-app my-app --template typescript
cd my-app
npm start

之后大家可以直接执行npm run ejcet来暴露webpack的配置，后续需对webpack进行修改

工程开发目录配置

这里我参考了这篇博客进行了开发目录的配置，大家按照自己的风格修改：https://zhuanlan.zhihu.com/p/137793202

    ├─ /config              <--配置目录（由eject生成）