Chrome插件开发 - Switch to vite

在上一篇文章【Spicing with react】学习了使用 react 创建新标签插件。

这篇文章替换掉 parcel，切换到 vite

删除.parcel

删除package.json内的"parcel": "^2.7.0","parcel-reporter-static-files-copy": "^1.3.4",

添加vite

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vite": "^3.0.4"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^2.0.0"
  }
}

重命名文件

• App.js=>App.jsx
• Counter.js=>Counter.jsx
• index.js=>index.jsx

将index.jsx移动到src

重命名static为public

由于没有使用index.html，所以要在vite.config.js特殊声明一下

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: {
        app: './new-tab.html'
      }
    }
  }
})

跑起来

npm run build

【Source Code】