Rollup和 parcel入门

Rollup概述

Rollup也是一款ES Module（ JavaScript 模块 ）的打包器，它可以将项目中散落的模块打包成整块的代码。从而使这些划分好的模块可以更好的运行在浏览器环境和 nodeJs 环境。

Rollup 与 webpack 类似，但相比于webpack ，Rollup 小巧的多，因为在配合插件的使用下，webpack 几乎可以完成开发中 前端工程化的绝大部分工作。

而Rollup 就只是一款ESM的打包器。 提供一个充分利用ESM各项特性的高效打包器 。

Rollup快速上手

安装rollup：yarn add rollup --dev

//create.js
export const createInput = () => {
    let input = document.createElement('input')
    input.placeholder = "请输入内容"
    return input
}
export const createHead = () => {
    let header = document.createElement('div')
    header.innerHTML = 'header'
    return header
}
export const createButton = () => {
    let button = document.createElement('button')
    button.innerHTML = '按钮'
    return button
}

//index.js
import { createHead } from './create'
document.body.append(createHead())

执行打包命令：yarn rollup src/index.js --format iife --file dist/bundle.js

• src/index.js：打包入口文件
• –format iife（自调用函数）：指定代码输出格式
• –file dist/bundle.js`：指定输出文件路径

编译后的代码：

(function () {
    'use strict';

    const createHead = () => {
        let header = document.createElement('div');
        header.innerHTML = 'header';
        return header
    };

    document.body.append(createHead());

}());

Rollup打包结果非常简洁，相比webpack没有多余的引导代码和模块函数，且自动去除了无用的代码。就是把各个模块按照互相之间的依赖顺序先后拼接到一起。

并且Rollup默认自动开启了 Tree Shaking去优化了我们的输出结果，Tree Shaking这个概念最早也是在rollup这个工具中提出的。

Rollup配置文件

在项目文件下新建rollup.config.js 的配置文件，它运行在nodeJs环境中，但rollup 自身会处理这个配置文件，所以在这里可以直接使用ES Module。

rollup.config.js配置文件需要导出一个对象。

export default {
    input:'./src/index',
    output:{
        file:'./dist/bundle.js',    //指定输出文件名
        format:'iife'   //指定输出格式

    }
}

运行：yarn rollup --config //必须添加–config 参数来表明使用项目中的配置文件

或者：yarn rollup --config rollup.config.js //指定使用哪个配置文件

Rollup使用插件

Rollup本身的功能就只是 ESM模块的合并打包。想要实现其他的功能比如：加载其他类型的资源文件，导入commonJs模块，编译ECMAScript新特性。Rollup支持使用插件的方式去扩展实现。

插件是Rollup唯一的拓展方式 ，不想webpack那样划分了Loader、plugin、minimizer三种扩展方式。

接下来使用rollup导入json文件：

安装：yarn add rollup-plugin-json --dev

import json from 'rollup-plugin-json'
...
    plugins:[
        json()
    ]
...
//-----main.js
import pkg from '../package.json'
// 使用模块成员
const msg = messages.hi

编译后：

(function () {
    'use strict';

    const log = msg => {
        console.log('---------- INFO ----------');
        console.log(msg);
        console.log('--------------------------');
    };
    var name = "01-getting-started";
    var version = "0.1.0";
    var main = "index.js";
    var author = "zce <w@zce.me> (https://zce.me)";
    var license = "MIT";
    var devDependencies = {
        rollup: "^1.26.3",
        "rollup-plugin-json": "^4.0.0"
    };
    var pkg = {
        name: name,
        version: version,
        main: main,
        author: author,
        license: license,
        devDependencies: devDependencies
    };
    // 导入模块成员
    log(pkg);
}());

Rollup加载 NPM模块

Rollup默认只能够按照文件路径的方式加载本地模块。它并不支持直接通过模块名称导入对应的node_modules模块。但rollup官方提供了 rollup-plugin-node-resolve插件 可以实现这个功能。

安装： yarn add rollup-plugin-node-resolve --dev

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()
    ]
}

Rollup加载 CommonJs模块

Rollup默认只支持ES Modules的模块打包。但是目前大量的 npm 模块是以commonJs规范导出成员，所以为了兼容这些模块，官方给出了 rollup-plugin-commonjs这个插件。

安装：yarn add rollup-plugin-commonjs --dev

import json from 'rollup-plugin-json'
import npmB from 'rollup-plugin-node-resolve'
import commonGF from 'rollup-plugin-commonjs'
export default {
    ...
    plugins:[
        json(),
        npmB(),
        commonGF()
    ]
}

Rollup代码拆分

Rollup同样可以使用 ES Module的 import() 动态导入的方式实现模块的按需加载，Rollup内部也会自动处理代码的拆分。（分包）

//main.js
import('./logger').then(({log})=>{
    log("aa无情")
})

//rollup.config.js
export default {
    input:'./src/index',
    //使用Rollup不支持UMD和IIFE,浏览器端我们可以使用AMD，当我们输出多个文件时，必须指定输出目录output.dir,而不是out.file rollup.config.js 
    output:{
        dir:"dist",		//指定输出文件名
        format:'amd'	//指定输出格式
    }
}

Rollup多入口打包

Rollup同样支持多入口打包，而且对于不同入口中公共的部分还会自动提取到独立的文件中作为独立的bundle。

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

Rollup选用原则

优点：

• 输出结果更加扁平，执行效率更高
• 自动移除未引用的代码（自动启用Tree Shaking）
• 打包结果对于开发中依然可读

缺点：

• 加载非ESM的第三方模块比较复杂，需要配置相关插件
• 模块最早被打包到一个函数中，无法实现HMR模块热替换的开发体验
• 浏览器环境中，代码拆分功能依赖AMD 库。

如果我们正在开发应用程序，可以选择webpack; 但如果我们正在开发一个框架或类库，Rollup的优点就非常有用，缺点几乎可以忽略。像vue、react等知名框架都是使用Rollup打包器而非 webpack。

Webpack大而全，Rollup小而美

parcel

parcel是一款几乎零配置的前端打包器，提供了近乎傻瓜式的使用体验。只需要了解它提供的几个简单的命令就可以直接使用。

parcel可以使用任何类型的文件作为入口，但是最好还是使用 HTML 或 JavaScript 文件

新建一个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>

</body>
<script src="./index.js"></script>
 
</html>

index.js

import {
    createHead,
    createInput
} from './create'
document.body.append(createHead())
document.body.append(createInput())

if(module.hot){
    module.hot.accept(()=>{
        console.log('hmr')
    })
}

create.js

export const createInput = () => {
    let input = document.createElement('input')
    input.placeholder = "请输入内容 "
    return input
}
export const createHead = () => {
    let header = document.createElement('div')
    header.innerHTML = 'header'
    return header
}

开发启动：yarn parcel src/index.html //需要传入打包入口的路径

1、parcel 命令不仅执行了打包，并且同时开启了开发服务器。并且自带自动刷新功能

2、同时支持模块热替换

3、Parcel可以自动安装依赖 ，只管正常使用，文件保存，Parcel就会自动安装。

4、Parcel处理图片、css等文件不需要任何配置，支持导入commonJs模块

import './style.css'
<img src="./parcel-front.webp">

5、使用动态导入会自动拆分代码

import('lodash-es').then(_ => {
    console.log(_.camelCase('hello word'))
})

6、生产打包

输出文件都会被压缩，而且样式代码也都提取到单个文件当中了。

yarn parcel build src/index.html

同等体量的项目打包parcel的构建速度回避webpack快很多，因为parcel的内部 使用的是多进程同时工作，充分发挥了多核CPU 的性能。当然webpack 中可以使用happypack的插件来实现这一点。

Parcel的特点：完全零配置、自动安装依赖、构建速度比较快

Parcel首发于 2017年，因为当时的webpack过于繁琐，官方文档也不够清晰明了。真正做到了完全零配置。

但webpack 生态更好一些，扩展更丰富

webpack 也越来越好用，开发者也越来越熟悉。