Rollup.js是什么？

做者：docoder@毛豆前端html

Overview

Rollup 是前端模块化的一个打包工具，能够将小块代码编译成大块复杂的代码，例如 library 或应用程序。
Rollup 对代码模块可使用新的标准化格式，如：ES6，而不是先前的解决方案，如：CommonJS 和 AMD。
Rollup 被普遍用于 Javascript libraries 的打包

Quick Start

rollup-starter-lib前端
rollup-starter-appnode

For the browser

# compile to a <script> containing a self-executing function ('iife')
$ rollup main.js --flie bundle.js --format iife
复制代码

For Node.js

# compile to a CommonJS module ('cjs')
$ rollup main.js --file bundle.js --format cjs
复制代码

For browsers and Node.js

# UMD format requires a bundle name
$ rollup main.js --file bundle.js --format umd --name "myBundle"
复制代码

For es module

$ rollup ./src/main.js --file ./dist/bundle.js --format es
复制代码

Why Rollup

Tree-shaking

也称为：live code inclusionreact
使用 Rollup 处理代码模块, 采用 ES6 标准（使用 import/export），能够对模块文件进行静态分析，并能够排除任何未实际使用的代码webpack
为何 ES Module 要优于 CommonJSgit
- ES Module 是官方标准，有一个直接清晰的发展方向
- CommonJS 只是在 ES Module 出现以前的一个特殊的暂时性的传统E标准
- ES Module 能够对文件进行静态分析，进行 Tree-shaking 优化
- ES Module 提供了更高级的特性，如，循环引用和动态绑定
- Rollup ES6 modules Playgroup

// 使用 CommonJS，必须导入整个库

// Import a full utils object using CommonJS
var utils = require( 'utils' );
var query = 'Rollup';
// Use the ajax method of the utils object
utils.ajax( 'https://api.example.com?search=' + query ).then( handleResponse );

// 使用 ES6 module，无须导入整个库

// Import ajax function using the ES6 import statement
import { ajax } from 'utils';
var query = 'Rollup';
// Calling ajax function
ajax( 'https://api.example.com?search=' + query ).then( handleResponse );
复制代码

Use Rollup in a CommonJS module

Rollup 坚决支持 ES module，CommonJS 没有在 Rollup kernel 中。
须要使用插件 rollup-plugin-commonjs ，来将其转换为 ES Module，前提还须要安装和引入 rollup-plugin-node-resolve 插件，缘由是 Rollup 不一样于 Webpack 和 Browserify，它不知道如何处理模块中的依赖，因此 rollup-plugin-node-resolve 插件能够告诉 Rollup 如何查找外部模块。
目前大部分的 npm 包都是以 commonjs 模块形式出现的，以防万一，仍是须要安装和引入插件 rollup-plugin-commonjs 。另外，为了防止其余插件的改变破坏 commonjs 的检测，rollup-plugin-commonjs 应该用在其余插件转换模块以前。

Use it over Webpack ?

A number of open-source projects use it over Webpackgithub
Webpack 得到了巨大成功，每个月有百万级的下载，赋能了成千上万的网站和应用，有巨大的生态和资金支持，相比之下，Rollup 无足轻重web
Facebook 采用 Rollup 来实现 React 的 build process，merge 了大量 pull requestajax

Vue, Ember, Preact, D3, Three.js, Moment, and dozens of other well-known libraries also use Rolluptypescript
Rollup 以不一样的目的被建立，Rollup 目的是要尽量的高效的构建扁平的可分配的 Javascript libraries，充分使用 ES Module 的优势, 会将全部代码放在同一个位置统一进行验证，更快的生成更轻量级的代码。Rollup 不支持 code-splitting，HMR，并且处理 CommonJS 时须要插件。
Webpack 支持 code-splitting , 实现了一个浏览器友好的 require ，将每一个模块一个接一个的验证再打包。若是须要 on-demand loading，会很好；不然会形成性能浪费，尤为若是打包大量模块时，性能较差。

结论：

Use webpack for apps, and Rollup for libraries

若是你须要 code-splitting，有不少 static assets，须要使用不少 CommonJS 依赖，使用 Webpack
若是你的 codebase 是ES Module，写一些给其余人使用的代码或库，那么使用 Rollup

pkg.module

将来，ES Module ( import 和 export) 会使统一标准，库的使用也会无缝。但如今不少浏览器以及 Node.js 不支持 import 和 export , 须要使用 UMD 或 CommonJS (Nodejs)
在 package.json 文件中增长 "module": "dist/my-library.es.js" , 能够同时更好的支持 UMD 和 ES Module
Webpack 和 Rollup 都会利用 pkg.module 来尽量生成更高效的代码, 在某些状况下都会 tree-shaking

Example: Create a Typescript and React Module

ALL JS LIBRARIES SHOULD BE AUTHORED IN TYPESCRIPT

Install

$ yarn add typescript rollup rollup-plugin-typescript2 rollup-plugin-commonjs  rollup-plugin-peer-deps-external rollup-plugin-node-resolve --dev

$ yarn add react @types/react --dev
$ yarn add react-dom @types/react-dom --dev
复制代码

tsconfig.json

{
  "compilerOptions": {
    "outDir": "build",
    "module": "esnext",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "sourceMap": true,
    "allowJs": false,
    "jsx": "react",
    "declaration": true, // 自动生成 .d.ts
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "resolveJsonModule": true,
    "downlevelIteration": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["src"], // 查找 ts 文件路径
  "exclude": ["node_modules", "build"] // 排出路径避免 build
}
复制代码

rollup.config.js

import typescript from "rollup-plugin-typescript2";
import commonjs from "rollup-plugin-commonjs";
import external from "rollup-plugin-peer-deps-external";
import resolve from "rollup-plugin-node-resolve";

import pkg from "./package.json";

export default {
  input: "src/index.tsx",
  output: [
    {
      file: pkg.main,
      format: "cjs",
      // exports: "named",
      sourcemap: true
    },
    {
      file: pkg.module,
      format: "es",
      // exports: "named",
      sourcemap: true
    }
  ],
  external: [
    ...Object.keys(pkg.dependencies || {}),
    ...Object.keys(pkg.peerDependencies || {})
  ],
  plugins: [
    commonjs({  // 置于最前 ( 不然可能须要配置 namedExports 才能阻止保错 )
      include: ["node_modules/**"],
    }),
    external(),
    resolve(),
    typescript({
      rollupCommonJSResolveHack: true,
      exclude: "**/__tests__/**",
      clean: true
    })
  ]
};
复制代码

package.json

{
  "name": "...",
  "version": "...",
  "description": "...",
  "author": "...",
  "main": "build/index.js",
  "module": "build/index.es.js", // pkg.module
  "jsnext:main": "build/index.es.js",
  "types": "build/index.d.ts",
  "license": "...",
  "repository": "...",
  "keywords": ['...', '...'],
  "scripts": {
    "build": "rollup -c",
    "start": "rollup -c -w",
    "prepare": "npm run build" // npm publish 时会先调用进行打包
  },
  "files": [ // 仅 build 文件夹被打包进库里
    "build"
  ],
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    "@types/react": "^16.8.23",
    "@types/react-dom": "^16.8.4",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "rollup": "^1.16.6",
    "rollup-plugin-commonjs": "^10.0.1",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-peer-deps-external": "^2.2.0",
    "rollup-plugin-typescript2": "^0.21.2",
    "typescript": "^3.5.2"
  }
}
复制代码

Developing locally

# 在开发的库文件目录下
$ yarn link # 会在全局生成一个 link 文件 (如：.nvm/versions/node/v10.15.3/lib/node_modules/your-package-name)，link 到此库文件目录

# 在要使用库的 example project 文件目录下
$ yarn link your-package-name # link 到全局的 link 文件，从而又 link 到开发的库文件目录

# Fix Duplicate React: https://github.com/facebook/react/issues/15315#issuecomment-479802153
$ npm link ../example/node_modules/react
复制代码