Vue2实现之rollup项目搭建

rollup

rollup打包类库时使用，打包文件比较纯粹；启动服务还是webpack

开发项目使用webpack

npm init -y

//                  rollup和babel的桥梁  babel核心模块  es6转es5            启动webpack服务
npm install rollup rollup-plugin-babel @babel/core  @babel/preset-env rollup-plugin-serve -D

rollup.config.js rollup的配置文件

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', //设置一个全局变量的名字 是 Vue
        format: 'umd', //模块格式  统一模块规范，默认 把Vue变量 放到window上（window.Vue），支持commenjs规范 也支持ES6规范 同时支持amd规范
        sourcemap: true //源码映射文件，es6 -> es5
    },
    plugins: [
        babel({
            exclude: "node_modules/**"  //这个目录下不需要babel转换
        }),
        serve({
            open: true,
            openPage: "/public/index.html",
            port: 3000,
            contentBase: ''  //'' 表示以当前配置文件根目录为基准，'/a' 表示 找'/a'下的 /public/index.html 文件
        })
    ]
}