Vite + TS 环境搭建

Vite! 下一代前端开发与构建工具

  1. 首先创建一个空目录 mkdir demo
  2. 进入创建好的文件夹中 cd demo并创建 src 文件夹（在该文件夹里写代码，自行创建index.ts）
  3. 初始化package.json pnpm init
  4. 在生成的package.json中写入如下依赖
    {
  "name": "ts-demo",
  "version": "1.0.0",
  "description": "study ts",
  "main": "index.js",
  "scripts": {
    "dev": "vite --mode development",
    "build": "vite build",
    "build:beta": "vite build --mode beta",
    "build:release": "vite build --mode release",
    "preview": "vite preview"
  },
  "keywords": [
    "ts",
    "study"
  ],
  "author": "Cikaros",
  "license": "MIT",
  "devDependencies": {
    "vite": "^2.9.6"
  }
}
  5. 运行pnpm install安装依赖
  6. 在目录中创建index.html并写入如下内容
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.svg"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/index.ts"></script>
</body>
</html>
  7. 在目录中创建vite.config.js并写入如下内容
    import {defineConfig} from 'vite'
module.exports = defineConfig({
    build: {
        outDir: 'dist'
    },
    server: {
        proxy: {
            "/api": {
                target: "https://www.baidu.com/",
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, ""),
            },
        },
    },
})
  8. 在目录中创建tsconfig.json并写入如下内容
    {
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "pretty": true,
    "resolveJsonModule": true,
    "allowJs": true,
    "checkJs": true,
    "suppressImplicitAnyIndexErrors": true,
    "strictPropertyInitialization": false,
    "downlevelIteration": true,
    "noUnusedLocals": false,
    "noImplicitAny": false,
    "noImplicitThis": true,
    "removeComments": false,
    "strictFunctionTypes": false,
    "baseUrl": ".",
    "types": [
      "vite/client",
      "node"
    ],
    "typeRoots": [
      "./node_modules/@types/",
      "./types"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "types/**/*.d.ts",
    "types/**/*.ts",
    "preview/**/*.ts",
    "preview/**/*.d.ts",
    "preview/**/*.tsx"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}
  9. 根据需要添加相应环境变量或其他所需依赖
  10. 运行pnpm run dev即可运行项目
NodeJS > Vite
#JS #TS #Vite
Vite + TS 环境搭建
https://blog.cikaros.top/doc/c4a056ea.html
作者
Cikaros
发布于
2022年5月1日
许可协议