关于rollup:Rollup个人笔记

与 webpack 作用相似，Rollup 更为玲珑，它仅仅是一款 ESM 打包器，并没有其余额定性能，

例如自动化的插件，HMR 等在 Rollup 中不反对

它的诞生并不是要与 webpack 全民竞争，只是提供一个充分利用 ESM 各项个性的高效打包器

装置: yarn add rollup --dev(^1.26.3)

应用:yarn rollup ./src/index.js 入口文件 --format iife --file dist/bundle.js 输入文件

查看 rollup 命令 yarn rollup

# index.js 根文件

// 导入模块成员
import {log} from './logger'
import messages from './messages'

// 应用模块成员
const msg = messages.hi

log(msg)

应用打包命令后，会生成 dist/bundle.js 文件

代码相比 webpack 大量疏导代码和模块函数，这里的输入很简略清晰，没有多余代码

输入代码中只会保留用到的局部，对于未援用的局部都没有输入，这是因为 rollup 默认会主动开启 tree shaking, 树摇最早在 rollup 中提出

# bundle.js

(function () {
  'use strict';

  const log = msg => {console.log('---------- INFO ----------');
    console.log(msg);
    console.log('--------------------------');
  };

  var messages = {hi: 'Hey Guys, I am zce~'};

  // 导入模块成员

  // 应用模块成员
  const msg = messages.hi;

  log(msg);

}());

rollup.config.js 运行在 node 环境中，rollup 会额定解决这个文件，因而也容许应用 ESM

export default {
  input:'src/index.js', // 入口文件门路
  output:{ // 输入相干配置
    file:'dist/bundle.js' // 输入文件名
    format:'iife' // 输入格局
  }
}

执行须要通过 yarn rollup --config，默认状况下它是不会读取配置文件的

指定配置名称来打包文件 yarn rollup --config rollup.production.js

rollup 的本身性能就是 esm 模块的合并打包

如果有加载其余类型资源文件，导入 Commonjs，编译 ES6+ 新个性等须要应用插件扩大实现

插件是 Rollup 惟一扩大路径（webpack loader plugins minimizer）

例子

导入 json 插件，yarn add rollup-plugin-json --dev

# index.js

import {log} from './logger'
import messages from './messages'
import {name, version} from '../package.json' // 导入 json

// 应用模块成员
const msg = messages.hi

log(msg)


log(name) // 应用 json
log(version)

配置 rollup.config.js

import json from 'rollup-plugin-json'

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [json() // json 函数调用后果放入 plugins
  ]
}

查看打包后果

(function () {
  'use strict';
  
  ...

  var name = "03-plugins"; // json 会被 tree shaking，只显示援用成员
  var version = "0.1.0";

  log(name);
  log(version);

}());

rollup 默认只能按文件门路的形式加载本地文件模块，对于 node_modules 下的第三方模块，并不能像 webapck，通过模块名称导入对应模块

yarn add rollup-plugin-node-resolve --dev 能够解决 rollup 应用第三方模块名称导入模块的问题。

import json from 'rollup-plugin-json'
import resolve from 'rollup-plugin-node-resolve'

export defalut{
  input:'src/index.js',
  output:{
    file:'dist/bundle.js',
    format:''iife
  },
  plugins:[json(),
    resolve()]
}

此时就能够导入 NPM 模块了！

例如
yarn add lodash-es 装置一个模块

# index.js

import _ from 'lodash-es' // 引入 NPM 模块

_.camelCase('hello world')

留神：应用 lodash-es（lodash esm 版本）而不是 lodash 是因为 rollup 默认只能解决 esm 模块，如果应用一般版本须要做额定解决

yarn add rollup-plugin-commonjs --dev 为了解决 commonjs 模块打包问题

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

此时，尝试增加一个 commonjs 模块文件

# cjs-module.js

module.exports = {foo:'bar'}

# index.js 入口

import cjs from './cjs-module' 

console.log(cjs.foo)

留神：如果改用 const cjs = requrie(‘./cjs-module.js’) 引入，须要留神不能够 esm 和 commonjs 两个混用，不然 require 不会被解析

Dynamic Imports 实现按需加载，rollup 外部会进行代码拆分

# index.js

import('./logger').then(({log})=>{log('code splitting!')
})

此时打包会报错，yarn rollup –config，通知咱们代码拆分打包，format 不能应用 iife 模式，

因为 iife 会把所有模块放在同一个函数中，相比于 webpack 并没有疏导代码，没法实现代码拆分，因而批改 format 为 amd or commonjs

执行 yarn rollup --config --format amd

仍然报错，代码宰割输入多文件 trunk 须要批改，file 为 dir

export default {
  input: 'src/index.js',
  output: {
    // file: 'dist/bundle.js',
    // format: 'iife'

    dir: 'dist',
    format: 'amd'
  }
}

公共局部也会提取进去作为独立的 bundle

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

留神：多入口打包外部会主动提前公共模块（外部会代码拆分），就不能用 iife，

amd 标准无奈在浏览器间接援用，通过实现 amd 规范的库加载（Require.js）

<!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>Document</title>
</head>
<body>
  <!-- AMD 规范格局的输入 bundle 不能间接援用 -->
  <!-- <script src="foo.js"></script> -->
   
  <!-- 须要 Require.js 这样的库 -->
  <script src="https://unpkg.com/requirejs@2.3.6/require.js" data-main="foo.js"></script>
  <!-- data-main 执行入口模块门路 -->
</body>
</html>

用 live server 关上这个 html

长处

输入后果更加扁平
主动移除未援用代码
打包后果仍然齐全可读

毛病

加载非 ESM 的第三方模块比较复杂
模块最终被打包到一个函数中，无奈实现 HMR
浏览器环境中，代码拆分性能依赖 AMD 库

如果咱们正在开发应用程序，须要大量引入第三方模块，利用过大还要分包

如果咱们开发一个框架或者类库，很少依赖第三方模块，大多数出名框架 / 库都在应用 Rollup 作为模块打包

Webpack 大而全，Rollup 小而美，应用程序用 webpack，库 / 框架 Rollup

optimization:{concatenateModules:true // 抹平了 rollup 的劣势}

关于rollup:Rollup个人笔记

Rollup

配置文件

应用插件

加载 NPM 模块

加载 CommonJS 模块

Code Splitting

多入口打包

选用准则