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 為什么快