Chrome 扩展开发：设置开发环境（二）-构建设置

设置开发环境的内容原本在一个章节，特意分开了，因为需要对“构建”相关的概念做一个说明，篇幅会比较长。

这一篇也适合所有对构建的逻辑理解不是很深刻的读者，会讲的很详细，以下正文。

什么是构建

在讲解接下来的配置内容前，先说明一下“构建”的概念。

在现代前端开发中，"构建"是一个至关重要的概念，它涉及将开发中的源代码转换（或编译）成可以在浏览器中运行的代码的过程。这个过程可能包括多个步骤，如代码转换、文件合并、压缩等，旨在优化应用的加载速度和运行效率。

为什么需要构建

• 代码转换：TypeScript 提供了类型检查和最新的 ECMAScript 特性，但浏览器不能直接执行 TypeScript 代码。因此，需要将 TypeScript 转换（编译）为 JavaScript，以确保代码可以在浏览器中运行。
• CSS 预处理：Tailwind CSS 是一个实用工具优先的 CSS 框架，它允许通过配置文件自定义样式，并使用指令在 CSS 中引入这些样式。构建过程会处理这些指令，生成最终的 CSS 文件。（不用硬去理解定义）
• 性能优化：构建过程可以通过压缩 JavaScript 和 CSS 文件来减少文件大小，从而加快扩展的加载速度。虽然对于小型项目来说，这可能不是首要考虑的问题，但对于大型或复杂的扩展来说，这是一个很重要的步骤。

代码转换部分不特殊说明了，还是比较好理解的。Tailwind CSS 直接理解就是开发过程中不需要单独编写 css 样式文件，所有的样式都在 html 中实现，如：<div class="h-32 w-32"></div>。

这里设置了 div 的宽高为 32px，在构建的时候 Tailwind CSS 会解析这个定义，自动生成对应的 css 文件。

这样应该能大致了解构建的逻辑了吧。

构建工具

在前端开发中，有许多工具可以帮助我们自动化构建过程，例如 Webpack、Vite、Rollup 等。对于本教程中的 Chrome 扩展开发，我们使用的构建工具包括：

• TypeScript 编译器 (tsc)：用于将 TypeScript 代码编译成 JavaScript 代码。
• Tailwind CLI：用于处理 Tailwind CSS 文件，生成最终的 CSS 文件。

执行构建操作

我们实际执行一下构建操作，我们在前面创建了一个 src 目录，src 目录通常用于存放未被编译的源代码文件，比如前面的 tailwind.css，跟着我们创建一个 popup.ts 文件。

创建后的目录结构如下：

.
├── package.json
├── src
│   ├── popup.ts
│   └── tailwind.css
├── tailwind.config.js
├── tsconfig.json
└── yarn.lock

接下来对 src 中的文件进行构建，对于 ts 文件使用的是 tsc 命令，前文中我们讲过，因为 TypeScript 包不是全局安装，因此需要使用 npx 来执行 tsc 命令。

D:\WorkSpace\SimpleBookmark>npx tsc

执行完成后，没有任何输出，我们可以直接查看 src 目录，最新目录结构如下：

.
├── package.json
├── src
│   ├── popup.js
│   ├── popup.ts
│   └── tailwind.css
├── tailwind.config.js
├── tsconfig.json
└── yarn.lock

可以看到 src 目录下多了一个编译后的 popup.js 文件，这是能直接在浏览器中运行的文件。

正常来说编译后的文件应该放在 dist 目录下（就是大家的一个约定），我们删除 src 下的 popup.js，然后执行命令让编译后的 js 文件存放在 dist 中（会自动创建 dist 目录）。

D:\WorkSpace\SimpleBookmark>npx tsc --outDir ./dist

命令携带 --outDir 参数，意思是指定编译后文件的输出目录为根目录下的 dist，执行后的目录结构如下：

.
├── dist
│   └── popup.js
├── package.json
├── src
│   ├── popup.ts
│   └── tailwind.css
├── tailwind.config.js
├── tsconfig.json
└── yarn.lock

到此，我们走完了整个编译流程。在实践过程中大部分人会产生疑惑，感觉这样的开发变得更复杂了，每次修改代码后都需要构建一次，还不如直接使用 js。

这个疑惑也是我的第一反应，看似复杂了，但是在现代前端开发中，这是必要技能，接着我们来简化这个过程。

打开 package.json 文件，因为安装了两个包，所以文件内容产生了变化，大致如下：

{
  "name": "SimpleBookmark",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "typescript": "^5.3.3"
  },
  "dependencies": {
    "tailwindcss": "^3.4.1"
  }
}

内容包括项目名称、版本号、主入口文件（忽略就行，本教程涉及不到那去）、开源许可证（私有项目，不用在意，默认就行），以及两种不同依赖安装的包。

我们为 package.json 添加一段内容，添加后内容如下：

{
  "name": "SimpleBookmark",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "typescript": "^5.3.3"
  },
  "dependencies": {
    "tailwindcss": "^3.4.1"
  },
  "scripts": {
    "build": "tsc",
    "watch": "tsc -w"
  }
}

scripts 中定义的脚本命令可以直接通过 yarn 执行，当我们执行 yarn build 的时候，等于执行了之前的 npx tsc 命令，删除 dist 中的 popup.js，直接执行 yarn build 试试：

D:\WorkSpace\SimpleBookmark>yarn build

# Out
yarn run v1.22.21
$ tsc
Done in 0.41s.

实际情况是又在 src 中生成了 popup.js 文件，而不是在 dist 中，我故意的，毕竟不能让 tsconfig.json 成为摆设。

打开 tsconfig.json 文件，会看到很多被注释掉的配置，搜索找到 outDir，取消注释并修改为 "outDir": "./dist"，我们再次执行 yarn build 就会发现已经在 dist 目录生成了 popup.js 文件。

之所以折腾这一步，主要就是让初次接触“构建”的读者能明白完整的逻辑，避免很多不清楚的地方，学的迷迷糊糊的，遇到问题也不知道去哪处理。

回到刚才的问题，我们不能每次修改了 ts 都去构建一次，所以增加了一个 watch 命令，tsc -w 命令的目的就是实时监测 ts 文件的变动，自动构建，可以尝试执行 yarn watch 命令试试。

[17:33:21] Starting compilation in watch mode...

[17:33:21] Found 0 errors. Watching for file changes.

我们可以看到执行命令后，终端界面变了，这就是进入了监听状态，如果 ts 文件有改动，这里会同步显示构建内容。如果想要退出监听状态，可以按 Ctrl+C，或者保留监听状态新开一个终端执行其他命令。

到这里构建以及脚本命令的逻辑就说完了。

配置构建脚本

讲解完“构建”概念，在 package.json 文件中，可以配置一些自定义的脚本命令来自动化构建过程。上面内容已经很啰嗦了，所以命令内容这里一步到位。

{
  "name": "SimpleBookmark",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "typescript": "^5.3.3"
  },
  "dependencies": {
    "tailwindcss": "^3.4.1"
  },
  "scripts": {
    "build": "tsc && tailwindcss build -i src/tailwind.css -o dist/tailwind.css",
    "build-ts": "tsc",
    "build-css": "tailwindcss build -i src/tailwind.css -o dist/tailwind.css"
  }
}

这里我取消了监听脚本，因为 Chrome 扩展开发基础情况下是没有办法实时调试的（需要很多额外操作，不是本教程的主要内容），所以修改了之后执行统一构建就行了。

脚本命令是可以自定义名称的，build 是同时执行 ts 和 css 的构建，tailwindcss 命令就是指定构建 src 目录下的 css 文件到 dist 目录，也很容易理解了。

完成上述步骤后，你的开发环境就已经设置好了。现在可以开始开发 Chrome 扩展的具体功能了。这个环境将支持你使用 TypeScript 和 Tailwind CSS 来开发扩展，同时也使得构建和测试过程更加高效。

选学内容

为了避免实在太啰嗦，所以有一部分的内容放到最后，可以选学。

我们在构建 ts 文件的时候，直接执行构建命令，会自动将项目中的所有 ts 文件都构建到 dist 目录，如果我们要指定构建 src 中的 ts 文件要怎么做呢？

打开 tsconfig.json 文件，在文件下方增加一个 include 的键指定目录即可，增加完的配置如下：

{
  "compilerOptions": {
    ......
  },
  "include": [
    "src/**/*"
  ],
}

include 是一个数组，当前添加的内容就是只构建 src 目录下的所有 ts 文件。

最后，项目源码可以通过下方链接获取：

软件下载

文章内容里面会涉及很多软件，部分软件下载比较困难，所以这里放一个百度网盘链接，我会不定期更新里面的软件版本。 https://pan.baidu.com/s/1yBw2ydi1f0bK86L2eM-vmQ?pwd=2qsc 提取码：2qsc 链接自带提取码，只需要复制链接就可以。

Moran 的茶馆Moran 的茶馆