Vite 依赖关系与捆绑 - 有些依赖项不能无法安装到 devDependencies

参考

• Vite 预优化依赖包 - 尤大
• Issue - can’t add less as dependency
• Dependency Pre-Bundling

问题描述

当使用 vite 生成项目的时候，如果 less 或 sass 安装到了 dependencies，在运行时会报错并失败。

而将它们安装到开发依赖 devDependencies 中就可以正常运行。

依赖关系只会预捆绑安装到 dependencies 中的依赖项。

这也意味着你应该避免将不需要导入源代码的依赖项放在dependencies下(而是将它们移到devDependencies中)。

原因

这是因为 Vite 在运行时会优化来自 dependencies 的包，例如删除没有用到的包。

但是开发依赖中的包不会被处理。

解决办法

方案一：将依赖安装到开发依赖。

方案二：如果依赖是构建所需的包，要安装到 dependencies 又不想被 vite 优化，可以通过配置文件的 vite.config.js 排除

module.exports = {
  optimizeDeps: {
    // 在 dependencies 中强制排除的依赖项
    exclude: ['less']
  }
}

开发习惯

需要明确的是：

• 开发过程中使用到的编译等工具类模块，一般会安装到 devDependencies
  • 如 webpack rollup
• 非工具类的，最终要在胜场环境运行的包，一般安装到 dependencies
  • 如 Vue React VueRouter loadsh