Published 2022-08-22 17:20:15

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"
  }
}

重命名文件

index.jsx移动到src

重命名staticpublic

由于没有使用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】