乐趣区

关于rollup: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);

}());

加载 NPM 模块

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 模块,如果应用一般版本须要做额定解决

加载 CommonJS 模块

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 不会被解析

Code Splitting

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 的劣势}
退出移动版