Rollup 与 parcel

一.Rollup

ES 标准模块化规范-概述

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用
简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的 require 、Python 的 import ，甚至就连
CSS 都有 @import ，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨
大障碍。
在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务
器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取
代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。
ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。
CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必
须查找对象属性。
一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。
如果你希望外部能够读取模块内部的某个变量，就必须使用 export 关键字导出该变量。想要是要其他
模块导出的内容, 就必须使用 import 导入;

导入 (Importing)

导入的值不能重新分配，尽管导入的对象和数组可以被修改（导出模块，以及任何其他的导入，都将受
到该修改的影响）。在这种情况下，它们的行为与 const 声明类似。

命名导入 (Named Imports)

从源模块导入其原始名称的特定项目

import { something } from './module.js';

从源模块导入特定项,并在导入时自定义名称

import { something as somethingElse } from './module.js';

命名空间导入 (Namespace Imports)

将源模块中的所有内容作为对象导入，将所有源模块的命名导出公开为属性和方法。默认导出被排除在
此对象之外。

import as module from './module.js'

上面的 “something” 的例子将被附加到作为属性的导入对象上。“module.something”。

默认导入 (Default Import)

导入源文件的 默认导出

import something from './module.js';

空的导入 (Empty Import)

加载模块代码，但不要创建任何新对象。

import './module.js';

这对于polyfills是有用的，或者当导入的代码的主要目的是与原型有关的时候。

导出 (Exporting)

命名导出 (Named exports)

导出具体声明的值：

var something = true; export { something };

在导出时重命名

export { something as somethingElse };

声明后立即导出：

// 这可以与 `var`, `let`, `const`, `class`, and `function` 配合使用 export var something = true;

默认导出(Default Export)

导出一个值作为源模块的默认导出：

export default something;

仅当源模块只有一个导出时，才建议使用此做法。
将默认和命名导出组合在同一模块中是不好的做法，尽管它是规范允许的。

Rollup 入门

概述(Overview)

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，。Rollup 对代码模块
使用新的 ES Module 标准，而不是以前的社区模块化方案，如 CommonJS 和 AMD。ES6 模块已经被
现代化浏览器原生实现，2020 年 Vue 作者发布了 Vite ，定义为下一代前端开发与构建工具，目的是取
代依赖 Webpack 打包的各种构建工具，而 Vite 的模块化工具使用的就是 Rollup；

快速入门

使用 npm install --global rollup 进行安装, 运行 rollup --help 可以查看可用的选项和参数。
帮助信息中的提示中: Usage: rollup [options] <entry file> 就展示了 Rollup 的基本用法, 我们
准备三个文件 index.js 为入口主文件, 然后使用 ES6 模块化语法引入user.js 和 message.js 文件,并在
mian.js 中使用两个文件导出的数据内容;

// ======= index.js ============ 
import msg from './message' 
import {names} from './user' console.log(names()) console.log(msg) console.log('Rollup Test Code') 
// ======== message.js =========== 
export default { hi: 'Hey '
}
// ======== user.js =========== 
export const names = () => { 
   console.log('xiling') 
}
export const ages = () => { console.log(666) }

命令行终端执行: rollup index.js

$ rollup 
index.js index.js → stdout... 
var msg = { hi: 'Hey ' }
;const names = () => { 
   console.log('xiling'); 
};
console.log(names()); 
console.log(msg); 
console.log('Rollup Test Code');

在命令终端中, 我们能看到最终打包后的编译代码被打印出来了, 我们需要的是将小块的文件代码打包到
一个大的文件中, 想要实现效果,只需要在命令中添加指定的命令参数即可: rollup index.js --file bundle.js ,生成 bundle.js 文件,代码如下:

var msg = { hi: 'Hey ' };
const names = () => { 
  console.log('xiling'); 
};
console.log(names());
 console.log(msg); 
console.log('Rollup Test Code');

我们看到,打包后的代码非常简洁,就是将需要运行的代码,按照顺序拼装到一起,注意,是只会保留用到的代
码,这就是Rollup 最早提出的 Tree-shaking 特性,后来被几乎所以打包工具参考引入;
什么是 Tree-shaking 呢? 基本原理非常简单, Rollup 在打包的过程中, 静态分析代码中的 import，只引
入最基本最精简代码, 并将排除任何未实际使用的代码。所以可以生成轻量、快速，以及低复杂度的
library 和应用程序。

配置文件

我们一般在命令行中使用 Rollup。你也可以提供一份配置文件（可要可不要）来简化命令行操作，同时
还能启用 Rollup 的高级特性, 配置文件是一个ES6模块，它对外暴露一个对象，这个对象包含了一些
Rollup需要的一些选项。通常，我们把这个配置文件叫做 rollup.config.js ，它通常位于项目的根目
录;
注意: Rollup 本身会处理配置文件，所以可以使用 export default 语法——代码不会经过 Babel 等类
似工具编译，所以只能使用所用 Node.js 版本支持的 ES2015 语法。
配置选项列表 : https://www.rollupjs.com/guide/big-list-of-options

// rollup.config.js 
export default { 
// 包的入口点 (例如：你的 main.js 或者 index.js)
 input:'index.js', // 出口配置 
 output:{ 
  file:'budle.js', //打包到那个文件 format:'esm' // 生成包的格式
  } 
 }

输入 : input [string]: 'index.js' 这个包的入口点 (例如：你的 main.js 或者 app.js 或者 index.js )
输出 : output [object]:{}
output.file [string]: 'bundle.js' 要写入的文件。如果你想要用的话 ,生成 sourcemaps也是可以的；
output.format [string] :'iife' 生成包的格式。 包格式选项可以是下面的任意一个: amd – 异步模块定义，用于像RequireJS这样的模块加载器
cjs – CommonJS，适用于 Node 和 Browserify/Webpack
esm – 将软件包保存为 ES 模块文件，在现代浏览器中可以通过 <script type=module> 标签引
入iife – 一个自动执行的功能，适合作为 <script> 标签。（如果要为应用程序创建一个捆绑包，
您可能想要使用它，因为它会使文件大小变小。）
umd – 通用模块定义，以 amd ， cjs 和 iife 为一体
system - SystemJS 加载器格式
如果你想使用Rollup的配置文件，记得在命令行里加上 --config 或者 -c
如果需要不同的配置，也可以指定与默认 rollup.config.js 文件不同的配置文件：

rollup --config rollup.config.dev.js 
rollup --config rollup.config.prod.js

使用插件

认识插件及插件的基本使用

目前为止，我们通过相对路径，将一个入口文件和一个模块创建成了一个简单的 bundle。随着构建更复
杂的 bundle，通常需要更大的灵活性——引入 npm 安装的模块、通过 Babel 编译代码、和 JSON 文件
打交道等。
为此，我们可以用 插件(plugins) 在打包的关键过程中更改 Rollup 的行为;
Rollup 拥有非常丰富的插件体系，可以去 插件列表: https://github.com/rollup/awesome 看一下；
这里我们将使用 rollup-plugin-json 插件，使 Rollup 能够读取 JSON 文件中的数据。
将 rollup-plugin-json 安装为开发依赖,因为代码实际执行时不依赖这个插件——只是在打包时使用：

npm install rollup-plugin-json -D

编辑 rollup.config.js 文件，加入 JSON 插件：

// 直接使用 ES module 导入插件 
import json from 'rollup-plugin-json'; 
export default {
   input:'./src/index.js', 
   output:{  
      file:'./dist/budle.js', format:'iife', 
    },// 插件导出的是一个函数，直接调用函数， 
// 注意，是调用的结果直接给到 插件数组中 
plugins: [
   json()
 ] 
}

更改 index.js 的代码, 从 package.json 中读取数据：

import msg from './message'
 import { names } from './user' 
import { name, version } from '../package.json'; console.log(`项目名称:${name},项目版本：${version}`)
 console.log(names()) 
console.log(msg) 
console.log('Rollup Test Code')

打包过后的代码, 只保留了 name 和 version 两个内容, 这也就是 tree-shaking 起的作用。

写一个自己的 Rollup 插件

........

二.parcel

• parcel 为零配置打包工具,构建速度快,多进程同时工作,发布于2017年
  1.下载parcel

yarn add parcel-bundler --dev

2. html 为打包入口, src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Parcel Tutorials</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

3. 运行

yarn parcel src/index.html

4. 打包

yarn parcel build

5.自动添加依赖

import $ from 'jquery

6.动态导入

//动态导入
import("jquery").then(($) => {
  $(document.body).append("<h1>Hello Parcel</h1>");

  $(document.body).append(`<img src="${logo}" />`);
});

7.模块热替换

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