Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码, rollup.js更专注于Javascript类库打包 (开发应用时使用Wwebpack,开发库时使用Rollup

安装

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

rollup.config.js

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

export default {
	input: './src/index.js',
	output: {
		format: 'umd', // 模块化类型,默认情况下可以把Vue变量放到 window 上
		file: 'dist/umd/vue.js',
		name: 'Vue', // 打包后的全局变量的名字
		sourcemap: true
	},
	plugins: [
		babel({
			exclude: 'node_modules/**' // 这个目录不需要用 babel 转换
		}),
		process.env.ENV === 'development'
			? serve({
					open: true,
					openPage: '/public/index.html',
					port: 3000,
					contentBase: '' // 根目录 
				})
			: null
	]
};

配置.babelrc文件

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

package.json文件配置

"scripts": {
  "build:dev": "rollup -c",
  "serve": "cross-env ENV=development rollup -c -w"
},

-c 表示要使用配置文件 -w 表示文件内容变化后重新打包