rollup 采用 es6 原生的模塊機制進行模塊的打包構建,rollup 更著眼于未來,對 commonjs 模塊機制不提供內置的支持,是一款更輕量的打包工具。rollup 比較適合打包 js 的 sdk 或者封裝的框架等,例如,vue 源碼就是 rollup 打包的。而 webpack 比較適合打包一些應用,例如 SPA 或者同構項目等等。
創建項目
目錄結構是這樣的:
hey-rollup/├── dist│ ├── bundle-name.js│ └── bundle-name.min.js├── example│ ├── dist│ │ └── example.js│ ├── index.html│ └── index.js├── package-lock.json├── package.json├── rollup.config.js├── src│ └── index.js└── test └── index.js
你可以在你的終端中執行下面的命令來安裝此項目
# cd /path/to/your/projectsgit clone https://github.com/daixwu/hey-rollup.git
安裝 Rollup
通過下面的命令安裝Rollup:
npm install --save-dev rollup
創建配置文件
在 hey-rollup 文件夾中創建一個新文件 rollup.config.js。之后在文件中添加下面的內容:
export default { input: "src/main.js", output: { file: "dist/js/main.min.js", format: "umd", name: 'bundle-name' }};
下面是每一個配置選項都做了些什么: