当前位置: 首页 > 工具软件 > preact-cli > 使用案例 >

vue-cli、create-vue、webpack、vite、rollup的区别

钱青青
2023-12-01
  • webpack 是一个全能选手,啥都能干,只是有点复杂,对新手不太友好。
  • Rollup 是后起之秀,打包更简洁。
  • viterollup 变成了“开袋即食”,便于新手入门。
  • create-vue 基本取代了 vue-cli,除非你想创建 vue2 的项目。
脚手架vue-clicreate-vue
构建项目vite
打包代码webpackrollup
  • 脚手架:创建项目,选择性安装需要的插件,指定统一的风格,生成demo。
  • 构建项目:建立项目的运行环境,需要手动安装插件。
  • 打包代码:代码写好之后,为了更好的使用,需要打包处理一下。

是不是有了一个整体的感觉?我们再来详细的看一下。

vue-cli

官网:https://cli.vuejs.org/zh/index.html

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli

vue-cli 是 Vue 早期推出的一款脚手架,使用 webpack 创建 Vue 项目,可以选择安装需要的各种插件,比如 Vuex、VueRouter等。

  • vue-cli 用于创建 vue2 的项目;
  • @vue/cli 用于创建 vue3 的项目,当然也支持 vue2。

使用起来还是比较繁琐的,首先要安装脚手架,然后使用 vue create hello-world 创建项目,具体的就不介绍了。

create-vue

官网:https://staging-cn.vuejs.org/guide/quick-start.html#with-build-tools

create-vue 是 Vue3 的专用脚手架,使用 vite 创建 Vue3 的项目,也可以选择安装需要的各种插件,使用更简单。

使用方式
npm init vue@latest
or
yarn create vue
可选插件

然后我们可以选择需要的各种插件:

  • TypeScript
  • JSX Support
  • Vue Router for Single Page Application development
  • Pinia for state management
  • Vitest for Unit testing
  • Cypress for both Unit and End-to-End testing
  • ESLint for code quality
  • Prettier for code formating

官方最新文档已经看不到 vue-cli 的身影了,只有 create-vue 的使用方式,非常方便快捷,建立的项目也可以统一风格。

vite

官网:https://cn.vitejs.dev/

Vite(法语意为 “快速的”,发音 /vit/ ,发音同 “veet”)是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:

  • 一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。
  • 一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。

使用 vite 不仅可以创建 vue 的项目,而且可以创建 react 等项目,只是需要手动安装第三方插件,有点麻烦。

目前支持的模板预设如下:

JavaScriptTypeScript
vanillavanilla-ts
vuevue-ts
reactreact-ts
preactpreact-ts
litlit-ts
sveltesvelte-ts

rollup

官网:rollupjs.org/guide/en/

rollup 是一种打包工具,特点就是,打的包非常精简,体积小。
官网是英文的,中文资料也比较少,不过好在常规用法可以参考 vite的官网。

webpack

官网:https://www.webpackjs.com/

webpack core 是一个纯打包工具(对标 Rollup),而 Vite 其实是一个更上层的工具链方案,对标的是 (webpack +
针对 web 的常用配置 + webpack-dev-server)。

webpack core 因为只针对打包不预设场景,所以设计得极其灵活,不局限于针对 web
打包,几乎所有可配置的环节都做成了可配置的。这种极度的灵活性对于一些特定场景依然不可替代。

但反过来导致的缺点就是配置项极度复杂,插件机制和内部逻辑晦涩难懂,针对常见的 web 也需要大量的配置。

另外大量 loader 插件虽然单独发布却存在各种隐式耦合,很容易配置不当互相影响。对于新手来说,把 webpack 从零开始配到跟
Vite 开箱即用功能对等的程度根本是不可能的任务,所以大部分团队/公司要么用的是基于 webpack 包一层的脚手架(umi,
vue-cli),或是专门养一个人称 webpack 配置工程师的角色。

 类似资料: