Rollup , Parcel

Rollup

• RollUp 更为小巧，仅仅是一款ESM打包器，Rollup中并不支持类似HMR这种高级特性，RollUp并不是要与Webpack全面竞争，初衷是希望提供一个充分利用ESM各项特性的高效打包器

yarn add rollup --dev   安装rollup 模块

yarn rollup ./src/index.js --format iife   运行入口文件

yarn rollup ./src/index.js --format iife --file dist/bundle.js   运行并且编译到指定文件

Rollup 配置文件

//rollup.config.js

export default{
    input:'src/index.js',//打包的入口文件目录
    output:{
        file:'dist/bundle.js',//输出的文件名
        format:'iife',//输出格式
    }
}

yarn rollup --config  运行--config 文件
也可以 yarn rollup --config rollup1.config.js    运行指定文件名的配置

Rollup 插件

插件是rollup 唯一扩展程序

yarn add rollup-plugin-json --dev

Rollup 加载npm模块

Rollup 默认只能够按照文件路径方式加载本地模块，对于npm模块并不能像webpack一样按照名称导入对应的模块

使用rollup-plugin-node-resolve插件 可以使用模块名称直接导入对应的模块

yarn add rollup-plugin-node-resolve --dev


//rollup.config.js
import json from 'rollup-plugin-json'
import resolve from 'rollup-plugin-node-resolve'

export default{
    input:'src/index.js',//打包的入口文件目录
    output:{
        file:'dist/bundle.js',//输出的文件名
        format:'iife',//输出格式
    },
    plugins:[
        json(),
        resolve()
    ]
}

//index.js
// 导入模块成员
import _ from 'lodash-es'
import { log } from "./logger";
import message from "./messages";

import { name, version } from "../package.json";
// 使用模块成员
const msg = message.hi;

log(msg);
log(version);
log(name);
log(_.camelCase('hello world'));


//运行
yarn rollup --config  

Rollup 加载CommonJS 模块

yarn add rollup-plugin-commonjs --dev

//rollup.config.js
import json from 'rollup-plugin-json'
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
export default{
    input:'src/index.js',//打包的入口文件目录
    output:{
        file:'dist/bundle.js',//输出的文件名
        format:'iife',//输出格式
    },
    plugins:[
        json(),
        resolve(),
        commonjs()
    ]
}

//index.js
// 导入模块成员
import _ from 'lodash-es'
import { log } from "./logger";
import message from "./messages";

import { name, version } from "../package.json";
import cjs from './cjs-module'


// 使用模块成员
const msg = message.hi;

log(msg);
log(version);
log(name);
log(_.camelCase('hello world'));
log(cjs)

Rollup 代码拆分

index.js采用动态导入的方式实现
import("./logger").then(({ log }) => {
  log("code splitting");
});

rollup.config.js
export default{
    input:'src/index.js',//打包的入口文件目录
    output:{
        dir:'dist',
        format:'amd',//改为amd格式
    },
  
}

运行  yarn rollup --config --format amd

Rollup 多入口打包

export default{
    input:{
        foo:'src/index.js',
        bar:'src/album.js'
    },
    output:{
        dir:'dist',
        format:'amd'
    }
}

Rollup 选用原则

优点

• 输出结果更加扁平
  -自动移除未引用的代码
• 打包结果依然完全刻度
  缺点
• 加载非ESM的第三方模块比较复杂
• 模块最终都被打包到一个函数里面，无法实现HMR（模块热替换）
• 浏览器环境中，代码才分功能依赖AMD库

---

Webpack 大而全，Rollup小而美。
应用程序开发建议使用Webpack,库/框架开发使用Rollup

Parcel 零配置的前端应用打包器

yarn add parcel-bundler --dev


yarn parcel src/index.html   运行入口文件

yarn parcel build src/index.html  打包

自动启动浏览器服务，自带热替换功能，自带自动下载插件功能，构建速度更快