Nav Extension 开发

浏览器插件开发

插件包含下面几部分组成：

• manifest.json 插件配置清单
• background.js 后台脚本
• popup.html 弹窗页面
• options.html 配置页面

项目技术选型

• TypeScript
• React
• TailwindCSS
• Webpack
• Babel

为了方便代码提示（21 世纪），此项目使用了 Typescript 进行代码提示和编译。 另使用 React 构建插件页面，使用 TailwindCSS 进行样式管理。 通过 webpack 打包生成插件不同的页面。 使用 babel 支持现代 es 语法。

开发环境准备

Typescript

yarn add -D typescript

• 安装 typescript
• 使用 tsc 命令行，初始化 typescript 配置
  • tsc --init初始化配置文件tsconfig.json
• 禁止 typescript 编译输出文件
  • 开启noEmit配置或者使用--noEmit命令行参数
• 运行 tsc 命令行执行 typescript 检查

React

yarn add react react-dom @types/react @types/react-dom

• 安装 react,react-dom 以及相关的 typescript 类型包@types/react,@types/react-dom
• 将 React 挂载至 html 节点

Webpack

yarn add -D webpack webpack-cli webpack-dev-server
html-webpack-plugin clean-webpack-plugin copy-webpack-plugin
sass sass-loader postcss postcss-loader css-loader style-loader babel-loader

• [babel-loader](Babel webpack 插件)
  • js 语法转换工具，可以支持最新的 js 规范，将其编译为兼容的代码
• ts-loader
  • 用于 webpack 编译 TypeScript，使用 tsc 命令和 tsconfig.json 配置文件
• html-webpack-plugin
  • 自动在 html 页面引入编译后的文件，如：js bundle/css 等
  • 如果需要使用指定的 html 生成，需要指定配置template使用特定的 index.html 文件
  • 使用chunks配置，指定不同 html 引入的 chunks 文件
• clean-webpack-plugin
  • 清理 webpack 打包目录 dist 下的文件
  • 设置dry显示清理动作，默认为 false
• copy-webpack-plugin
  • 打包时复制文件到指定目录
  • Flat 复制和 Context 复制控制复制的表现，默认是保持复制目录结构
• mini-css-extract-plugin
  • 提取 style 至独立文件

Webpack Server

官方文档 | webpack server 脚手架参数

运行开发服务，提供实时预览。

简化编译输出

Babel 设置

yarn add -D @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript

• babel 依赖

  • @babel/core @babel/cli
  • @babel/preset-env 预设环境
  • @babel/preset-typescript typescript 预设
  • @babel/preset-react react 预设
    • 修改 tsconfig.json jsx => react
  • babel-loader webpack 打包

• 添加 babel 设置文件

  {
    "presets": ["@babel/preset-env", "@babel/preset-typescript", "@babel/react"]
  }

• 通过安装并使用`preset-*预设配置包定义 babel 规则

• webpack module 添加规则使用babel-loader处理 ts 和 js 的处理（babel 可以编译 ts，但不能进行 ts 静态检查，所以只使用 babel 进行 ts 编译，另 babel 暂不支持三类特殊情况，详情见typescript 官方文档）

TailwindCSS 初始化

yarn add -D tailwindcss autoprefixer postcss

文档

style loader | css loader | postcss loader | sass loader

• 初始化 tailwindcss 配置文件

• 指定代码内容规则

• 设置 postcss 使用 tailwindcss 处理

• 各个 loader 配置使用独立配置文件，如：postcss 配置文件为：postcss.config.js

  module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  }

• webpack modules 添加 css 处理规则

初始化文档

graph TD
  F[Sass/Scss/css样式文件]
  LA[sass loader]
  LC[css loader]
  LS[style loader]
  LP[postcss loader]

  F --> LA --编译sass/scss为css文件--> LP --裁剪css--> LC --解决css导入问题--> LS --将css插入DOM,可设置插入的方式--> DOM

Loading

要使 css 处理流程生效，需要在 index.[tj]s 代码 import index.css 文件才能生效

说明

• typescript 使用 babel

  • 官方说明 - tsconfig.json特定设置的开启

    "compilerOptions": {
    // Ensure that .d.ts files are created by tsc, but not .js files
    "declaration": true,
    "emitDeclarationOnly": true,
    // Ensure that Babel can safely transpile files in the TypeScript project
    "isolatedModules": true
    }

• 官方新手教程

  • 设置开发环境

• 完整流程教程