vite 尝鲜

vite

vite是小尤开发的下一代前端开发构建工具，快速的热更新模式，使得开发阶段的更新时间不随包的大小而增加，极大的改善了前端开发体验。闲话少叙，赶紧来体验一波。

相信跟着vite开发指南，你已经轻松的启动了项目。但根据实际项目开发经验，我们还需要添加一些内容。

scss 配置

我们项目默认使用 scss 做为与编译器，vite 也提供了.scss 文件的内置支持，但需安装对应的预处理器。如果仍考虑向后兼容，我们还需要增加autoprefixer。

首先安装 sass 和 autoprefixer

npm install -D sass autoprefixer

然后在根文件新建postcss.config.js:

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};

最后在package.json中增加：

  "browserslist": [
    "> 0.5%",
    "last 2 versions",
    "ie >= 10",
    "iOS >= 8",
    "Android >= 4"
  ]

这样，我们就能正确编译 scss 文件了。

typescript 配置

虽然 vite 默认支持 typescript 编译，它使用的配置项目可能不满足各项目的实际需要。在项目根目录新增tsconfit.json：

{
  "compilerOptions": {
    "target": "ES2018",
    "moduleResolution": "node",
    // 这样就可以对 `this` 上的数据属性进行更严格的推断`
    "strict": true,
    "declaration": true,
    "noUnusedLocals": true,
    "esModuleInterop": true,
    "isolatedModules": true
  }
}

总结

总的来说，vite 受 Snowpack、WMR、@web/dev-server的启发，提供对 Vue 的头等支持和一流的开发体验，只需很少的配置就能符合实际项目需要，不得不再吹一波。

当然，本次只是粗浅的尝试，更多功能需要通过文档甚至源码才能了解。

如果想要更深入的了解 vite，可以访问vite 为什么快