一、使用Rollup搭建开发环境

1、官网

2、什么是Rollup?

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

3、环境搭建

(1) 安装命令

bash

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

(2) rollup.config.js文件编写

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

export default {
    input: './src/index.js', // 打包入口
    output: {
        format: 'umd', //模块化类型
        name: 'Vue', // 全局变量的名字
        file: 'dist/umd/vue.js', // 打包输出文件名称
        sourcemap: true // 打包前后源码映射，方便调试
    },
    plugins: [
        babel({
            exclude: 'node_modules/**' // 排除目录
        }),
        serve({
            // open: true, // 打开默认浏览器
            port: 3000, // 端口
            contentBase: '', // 以当前目录为根目录标准
            openPage: '/index.html' // 默认打开入口文件
        })
    ]
}

(3) 配置.babelrc文件

json

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

(4) 新建一个html入口文件

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
	<!-- 引入vue文件 -->
    <script src="dist/umd/vue.js"></script>
    <script>
        console.log(Vue);
    </script>
</body>

</html>

(5) 配置package.json

json

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

(6) 执行命令

bash

npm run dev

一、使用Rollup搭建开发环境 ​

1、官网 ​

2、什么是Rollup? ​

3、环境搭建 ​

一、使用Rollup搭建开发环境

1、官网

2、什么是Rollup?

3、环境搭建