前言

众所周知, rollup 以其优秀的打包能力被青睐, 今天来个简单教程

1.创建项目

mkdir rollup-demo
cd rollup-demo

2.安装依赖

npm install rollup rollup-plugin-babel @babel/preset-env rollup-plugin-serve -D

解释下

// rollup 和 babel 桥梁
rollup-plugin-babel

// es6->es5
@babel/preset-env

// 启动服务
rollup-plugin-serve

3.rollup.config.js 配置

import serve from 'rollup-plugin-serve'
import babel from 'rollup-plugin-babel'

export default {
  input: 'src/index.js',
  output: {
    file: '/dist/vue.js',
    name: 'Vue', // 打包出来的名称
    format: 'umd', // 默认放大 window上
    sourcemap:true // es6->es5
  },
  plugins: [
    babel({
      exclude:"node_modules/**", // 这个目录不需要babel转换
    }),
    serve({
      open: true,
      openPage: "/public/index.html",
      port: 3000,
      contentBase:'' // base, 默认当前
    })
  ]
}

4.相关文件

入口文件: src/index.js

openPage: /public/index.html

5..babelrc

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

6.启动命令

package.json 中配置

这里 -c 指读取 rollup.config.js 配置文件, -w 监听文件改动

"scripts": {
  "dev": "rollup -c -w"
}

7.其他

生成目录如下

├── README.md
├── dist
│   ├── vue.js
│   └── vue.js.map
├── package.json
├── public
│   └── index.html
├── rollup.config.js
├── src
│   └── index.js
└── tree.md