rollup環境搭建（es6轉es5、壓縮、本地服務器、熱更新）

文件目錄

package.json

{
  "name": "my-vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "serve": "rollup -c -w"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/preset-env": "^7.10.2",
    "rollup": "^2.15.0",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-livereload": "^1.3.0",
    "rollup-plugin-serve": "^1.0.1",
    "rollup-plugin-uglify": "^6.0.4"
  }
}

devDependencies 內的包都要裝上，簡單說下一些包的作用：

• @babel/core：babel核心實現
• @babel/preset-env：es6轉es5，使用這個包要基於 @babel/core
• rollup-plugin-babel：babel 插件
• rollup-plugin-livereload：熱更新插件
• rollup-plugin-serve：服務器插件，用於開啟本地服務器
• rollup-plugin-uglify：壓縮代碼

環境搭建

.balbelrc:

{
  "presets": [
    "@babel/preset-env"
  ]
}

rollup.config.js:

import babel from 'rollup-plugin-babel';
import {uglify} from 'rollup-plugin-uglify';
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';

export default {
  input: 'src/index.js', // 入口文件
  output: {
    format: 'umd',
    file: 'dist/vue.js', // 打包后輸出文件
    name: 'Vue',  // 打包后的內容會掛載到window，name就是掛載到window的名稱
    sourcemap: true // 代碼調試  開發環境填true
  },
  plugins: [
    babel({
      exclude: "node_modules/**"
    }),
    // 壓縮代碼
    uglify(),
    // 熱更新 默認監聽根文件夾
    livereload(),
    // 本地服務器
    serve({
      open: true, // 自動打開頁面
      port: 8000, 
      openPage: '/public/index.html', // 打開的頁面
      contentBase: ''
    })
  ]
}

配置完成后，命令行輸入 npm run serve 跑起來

最后

關於這些包的使用，在npm上搜索相關包名稱就會有配置的用法

• rollup中文文檔
• npm