Dapp TokenFarm开发(1)--迁移到 vite&ts

1.0 下载原始代码

git clone -b starter-code https://github.com/dappuniversity/defi_tutorial NewTokenFarm

1.1 将项目改为Vite

1.1.0 安装依赖

如果安装速度较慢，可以使用cnpm安装。

npm i vite --save -dev

npm i vite-plugin-html --save -dev
一个用于处理html的vite插件,类似于webpack-html-plugin

npm i vite-plugin -compression
用于代码压缩

npm i vite-plugin-imagemin --save -dev
用于图片压缩

npm i @vitejs/plugin-react --save -dev
类似于react-loader

1.1.1 配置文件

按照 vite 官方 react-ts 模板配置如下

添加 vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
esbuild: {
jsxFactory: 'h',
jsxFragment: 'Fragment',
jsxInject: `import React from 'react'`,
},
plugins: [react()]
})

1.1.2 添加 tsconfig.node.json

{
"compilerOptions": {
"composite": true,
"module": "es2015",
"moduleResolution": "node"
},
"include": ["vite.config.ts"],
"exclude": []
}

1.1.3 添加 tsconfig.json

{
"compilerOptions": {
"target": "ES2015",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ES2015",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"]
}

1.1.4 配置package.json

添加 devDependencies 与 scripts 如下

"devDependencies": {
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@vitejs/plugin-react": "^1.3.0",
"react": "^16.14.0",
"typescript": "^4.6.3",
"vite": "^2.9.9"
},
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"lint": "vite lint"
},