本文目录一览：

• 1、如何使用Rollup打包JavaScript
• 2、如何使用Rollup打包样式文件并添加LiveReload
• 3、一篇文章说清 webpack、vite、vue-cli、create-vue 的区别

如何使用Rollup打包JavaScript

export default {

  entry: 'src/scripts/main.js',

  dest: 'build/js/main.min.js',

  format: 'iife',

  sourceMap: 'inline',

};

新建rollup.config.js，然后填入上面的内容

entry — 希望Rollup处理的文件路径。大多数应用中，它将是入口文件，初始化所有东西并启动应用。

dest — 编译完的文件需要被存放的路径。

format — Rollup支持多种输出格式。因为我们是要在浏览器中使用，需要使用立即执行函数表达式(IIFE)[注1]

sourceMap — 调试时sourcemap是非常有用的。这个配置项会在生成文件中添加一个sourcemap，让开发更方便。

更多请查看此文：

作者讲得非常的棒！

如何使用Rollup打包样式文件并添加LiveReload

我们会在上周的项目基础上继续进行，因此如果你还没有看上一节，推荐你先看一下。

注: 如果你没有项目的副本，你可以通过这条命令克隆在第一部分结束这个状态下的项目：git clone -b part-2-starter --single-branch

著作权归作者所有。

商业转载请联系作者获得授权,非商业转载请注明出处。

原文: © w3cplus.com

一篇文章说清 webpack、vite、vue-cli、create-vue 的区别

先看这个表格：

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

官网：

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

vue-cli 用于创建 vue2 的项目；

@vue/cli 用于创建 vue3 的项目，当然也支持 vue2。

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

官网：

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

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

官网：

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

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

官网：

rollup 是一种打包工具，特点就是，打的包非常精简，体积小。

官网是英文的，中文资料也比较少，不过好在常规用法可以参考 vite的官网。

尤雨溪在知乎的一次回答（ ）里提到：

webpack 是一个全能选手，啥都能干，只是有点复杂，对新手不太友好。

Rollup 是后起之秀，打包更简洁。

vite 把 rollup 变成了“开袋即食”，便于新手入门。

create-vue 基本取代了 vue-cli，除非你想创建 vue2 的项目。

所以，想创建一个 vue3 的项目，首选 create-vue，非常方便快捷，建立的项目也可以统一风格。