[JavaScript知识库]vite基础应用配置

设置别名

在 vite.config.js 配置不同文件引入时别名

resolve: {
    alias: {
        /**
         * 例如@images代码的是项目中assets下面image的路径的别名，
         * 可以直接 require('@images/logo.png')
         *  其他文件参考这个配置别名
         *
        */
      '@images': '/assets/images'
    }
}

ts 校验

vite 只编译，并不会校验 ts，需要使用 tsc --noEmit 来校验,但是 vue 文件中的 ts 并不会校验，这是需要安装 vue-tsc

npm install vue-tsc -D

修改 package.json 中的 scripts

scripts: {
    "build": "vue-tsc --noEmit && tsc --noEmit && vite build"
}

在项目根目录下面新建 tsconfig.json 文件

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "types": ["vite/client"],
    "isolatedModules": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

检查代码规范

在 package.json 中添加下面命令，用于检查代码是否规范

    scripts: {
        "lint": "eslint --ext js src/"
    }

当运行 npm run lint 时发现报 eslint 不是内部命令，这时候需要全局安装 eslint-cli

    npm install eslint-cli -g

然后在项目中安装 eslint

    npm install eslint --D

安装完之后在项目中运行 npm run lint 就能正常启动了

提交前校验代码规范

安装 husky

    npm install husky -D

运行下面代码生成 husky 文件

    npx husky install

创建 pre-commit 文件，wind10 的用户需要将 npm run lint 改为 npm-run-lint 进行安装，安装完成后在去 pre-commit 文件里面修改回 npm run lint，接下来操作 git 正常提交代码就会自动校验代码规范。

    npx husky add .husky/pre-commit "npm run lint"