Vue2实现之rollup项目搭建

rollup

专门打包js库，大型项目用 webpack，生态丰富

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',  // 打包的出口
        format: 'umd', //模块格式  统一模块规范，默认 把Vue变量 放到window上（window.Vue），支持commenjs规范 也支持ES6规范 同时支持amd规范
        name: 'Vue', //umd模块需要配置name ，会将导出的模块放到window上，设置一个全局变量的名字 是 Vue；如果在node中使用cjs、如果是打包webpack中导入 使用esm、如果是在前端里使用script去引用 使用 iife umd 
        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 文件
        })
    ]
}

package.json执行脚本配置

"scripts": {
    "build:dev": "rollup -c",
    // rollup 使用rollup打包
    // -c 使用配置文件
    // -w 发生变化重新打包
    "dev": "cross-env ENV=development rollup -c -w"
}