rollupjs打包css（rollupjs）

• 1、如何使用Rollup打包JavaScript
• 2、如何使用Rollup打包樣式文件並添加LiveReload
• 3、一篇文章說清 webpack、vite、vue-cli、create-vue 的區別

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，讓開發更方便。

更多請查看此文：

作者講得非常的棒！

我們會在上周的項目基礎上繼續進行，因此如果你還沒有看上一節，推薦你先看一下。

注: 如果你沒有項目的副本，你可以通過這條命令克隆在第一部分結束這個狀態下的項目：git clone -b part-2-starter –single-branch

著作權歸作者所有。

商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。

原文: © w3cplus.com

先看這個表格：

是不是有了一個整體的感覺？我們再來詳細的看一下。

官網：

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，非常方便快捷，建立的項目也可以統一風格。