1.rollup环境搭建

1.空白文件夹安装相关依赖

npm init -y
npm install rollup rollup-plugin-babel @babel/preset-env @babel-/core

rollup是个打包工具，配合rollup-plugin-babel使用，再配合babel的一些插件完成打包的操作

2.创建rollup.config.js文件

这是对rollup的相关配置，默认名称为rollup.config.js，可以自定义

//rollup.config.js
import babel from "rollup-plugin-babel"
export default {
  input: './src/index.js',//打包入口，可以把它理解成express中的app.js，服务器启动时由它为根基调用其他的文件，然后其他文件再调用其他文件，这样扩散
  output: {    
    file: "./dist/vue.js",//打包后的文件存放的位置
    name: 'Vue',//打包后文件的名称，挂载在global上
    format: 'umd', // esm(相当于没打包) commonjs iifile自定义执行函数 umd(兼容其他(commonjs,amd))
    sourcemap: true,//希望可以调试源码
  },
  plugins: [
    babel({
      exclude: 'node_modules/**'  //被排除的模块
    })
  ]
}

3.创建.babelrc文件，配置babel

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

4.配置调试

// package.json文件配置打包时用rollup并使用rollup.config.js的配置文件(-c)并监听(w)，暂时不懂什么是监听，以后懂了会回来修改
  "scripts": {
    "dev": "rollup -cw"
  },

5.写个js测试一下打包能否成功

export const name = '小灰'

export default { age: 18 }

6.最后在dist目录下会生成vue.js和vue.map.js文件

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
	typeof define === 'function' && define.amd ? define(['exports'], factory) :
	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Vue = {}));
})(this, (function (exports) { 'use strict';

	var name = '小灰';
	var index = {
	  age: 18
	};

	exports["default"] = index;
	exports.name = name;

	Object.defineProperty(exports, '__esModule', { value: true });

}));
//# sourceMappingURL=vue.js.map

这就是打包后的结果了，学艺不精，希望各位大佬指点