sunnyxujian's blog
xujian
2022-05-08

rollup基础用法

rollupjs 是下一代ES模块捆绑器

# 1 背景

  • webpack打包非常繁琐，打包体积比较大

  • rollup主要是用来打包JS库的

  • vue/react/angular都在用rollup作为打包工具

# 2 安装依赖

cnpm i @babel/core @babel/preset-env  @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-typescript lodash rollup rollup-plugin-babel postcss rollup-plugin-postcss rollup-plugin-terser tslib typescript rollup-plugin-serve rollup-plugin-livereload -D
1

# 3 初次使用

# 3.1 rollup.config.js

  • Asynchronous Module Definition异步模块定义
  • ES6 module是es6提出了新的模块化方案
  • IIFE(Immediately Invoked Function Expression)即立即执行函数表达式，所谓立即执行，就是声明一个函数，声明完了立即执行
  • UMD全称为Universal Module Definition,也就是通用模块定义
  • cjs是nodejs采用的模块化标准，commonjs使用方法require来引入模块,这里require()接收的参数是模块名或者是模块文件的路径

rollup.config.js

export default {
    input:'src/main.js',
    output:{
        file:'dist/bundle.cjs.js',//输出文件的路径和名称
        format:'cjs',//五种输出格式：amd/es6/iife/umd/cjs
        name:'bundleName'//当format为iife和umd时必须提供，将作为全局变量挂在window下
    }
}
1
2
3
4
5
6
7
8

# 3.2 src\main.js

src\main.js

console.log('hello');
1

# 3.3 package.json

package.json

{
 "scripts": {
    "build": "rollup --config"
  },
}
1
2
3
4
5

# 3.4 dist\index.html

dist\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rollup</title>
</head>
<body>
    <script src="bundle.cjs.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

# 4 支持babel

  • 为了使用新的语法，可以使用babel来进行编译输出

# 4.1 安装依赖

  • @babel/core是babel的核心包
  • @babel/preset-env是预设
  • @rollup/plugin-babel是babel插件
cnpm install @rollup/plugin-babel @babel/core @babel/preset-env --save-dev
1

# 4.2 src\main.js

let sum = (a,b)=>{
    return a+b;
}
let result = sum(1,2);
console.log(result);
1
2
3
4
5

# 4.3 .babelrc

.babelrc

{
    "presets": [
       [
        "@babel/env",
        {
            "modules":false
        }
       ]
    ]
}
1
2
3
4
5
6
7
8
9
10

# 4.4 rollup.config.js

rollup.config.js

+import babel from '@rollup/plugin-babel';
export default {
    input:'src/main.js',
    output:{
        file:'dist/bundle.cjs.js',//输出文件的路径和名称
        format:'cjs',//五种输出格式：amd/es6/iife/umd/cjs
        name:'bundleName'//当format为iife和umd时必须提供，将作为全局变量挂在window下
    },
+   plugins:[
+       babel({
+           exclude:"node_modules/**"
+       })
+   ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 5 tree-shaking

  • Tree-shaking的本质是消除无用的js代码
  • rollup只处理函数和顶层的import/export变量

# 5.1 src\main.js

src\main.js

import {name,age} from './msg';
console.log(name);
1
2

# 5.2 src\msg.js

src\msg.js

export var name = 'zhufeng';
export var age = 12;
1
2

# 6 使用第三方模块

  • rollup.js编译源码中的模块引用默认只支持 ES6+的模块方式import/export

# 6.1 安装依赖

cnpm install @rollup/plugin-node-resolve @rollup/plugin-commonjs lodash  --save-dev
1

# 6.2 src\main.js

src\main.js

import _ from 'lodash';
console.log(_);
1
2

# 6.3 rollup.config.js

rollup.config.js

import babel from 'rollup-plugin-babel';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
export default {
    input:'src/main.js',
    output:{
        file:'dist/bundle.cjs.js',//输出文件的路径和名称
        format:'cjs',//五种输出格式：amd/es6/iife/umd/cjs
        name:'bundleName'//当format为iife和umd时必须提供，将作为全局变量挂在window下
    },
    plugins:[
        babel({
            exclude:"node_modules/**"
        }),
+       resolve(),
+       commonjs()
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 7 使用CDN

# 7.1 src\main.js

src\main.js

import _ from 'lodash';
import $ from 'jquery';
console.log(_.concat([1,2,3],4,5));
console.log($);
export default 'main';
1
2
3
4
5

# 7.2 dist\index.html

dist\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rollup</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery/jquery.min.js"></script>
    <script src="bundle.cjs.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 7.3 rollup.config.js

rollup.config.js

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
export default {
    input:'src/main.js',
    output:{
        file:'dist/bundle.cjs.js',//输出文件的路径和名称
+       format:'iife',//五种输出格式：amd/es6/iife/umd/cjs
+       name:'bundleName',//当format为iife和umd时必须提供，将作为全局变量挂在window下
+       globals:{
+           lodash:'_', //告诉rollup全局变量_即是lodash
+           jquery:'$' //告诉rollup全局变量$即是jquery
+       }
    },
    plugins:[
        babel({
            exclude:"node_modules/**"
        }),
        resolve(),
        commonjs()
    ],
+   external:['lodash','jquery']
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 8 使用typescript

# 8.1 安装

cnpm install tslib typescript @rollup/plugin-typescript --save-dev
1

# 8.2 src\main.ts

src\main.ts

let myName:string = 'zhufeng';
let age:number=12;
console.log(myName,age);
1
2
3

# 8.3 rollup.config.js

rollup.config.js

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
export default {
+   input:'src/main.ts',
    output:{
        file:'dist/bundle.cjs.js',//输出文件的路径和名称
        format:'iife',//五种输出格式：amd/es6/iife/umd/cjs
        name:'bundleName',//当format为iife和umd时必须提供，将作为全局变量挂在window下
        globals:{
            lodash:'_', //告诉rollup全局变量_即是lodash
            jquery:'$' //告诉rollup全局变量$即是jquery
        }
    },
    plugins:[
        babel({
            exclude:"node_modules/**"
        }),
        resolve(),
        commonjs(),
+       typescript()
    ],
    external:['lodash','jquery']
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 8.4 tsconfig.json

tsconfig.json

{
  "compilerOptions": {  
    "target": "es5",                          
    "module": "ESNext",                     
    "strict": true,                         
    "skipLibCheck": true,                    
    "forceConsistentCasingInFileNames": true 
  }
}
1
2
3
4
5
6
7
8
9

# 9 压缩JS

  • terser是支持ES6 +的JavaScript压缩器工具包

# 9.1 安装

cnpm install rollup-plugin-terser --save-dev
1

# 9.2 rollup.config.js

rollup.config.js

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
+import {terser} from 'rollup-plugin-terser';
export default {
    input:'src/main.ts',
    output:{
        file:'dist/bundle.cjs.js',//输出文件的路径和名称
        format:'iife',//五种输出格式：amd/es6/iife/umd/cjs
        name:'bundleName',//当format为iife和umd时必须提供，将作为全局变量挂在window下
        globals:{
            lodash:'_', //告诉rollup全局变量_即是lodash
            jquery:'$' //告诉rollup全局变量$即是jquery
        }
    },
    plugins:[
        babel({
            exclude:"node_modules/**"
        }),
        resolve(),
        commonjs(),
        typescript(),
+       terser(),
    ],
    external:['lodash','jquery']
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 10 编译css

# 10.1 安装

cnpm install  postcss rollup-plugin-postcss --save-dev
1

# 10.2 rollup.config.js

rollup.config.js

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import {terser} from 'rollup-plugin-terser';
+import postcss from 'rollup-plugin-postcss';
export default {
    input:'src/main.js',
    output:{
        file:'dist/bundle.cjs.js',//输出文件的路径和名称
        format:'iife',//五种输出格式：amd/es6/iife/umd/cjs
        name:'bundleName',//当format为iife和umd时必须提供，将作为全局变量挂在window下
        globals:{
            lodash:'_', //告诉rollup全局变量_即是lodash
            jquery:'$' //告诉rollup全局变量$即是jquery
        }
    },
    plugins:[
        babel({
            exclude:"node_modules/**"
        }),
        resolve(),
        commonjs(),
        typescript(),
        //terser(),
+       postcss()
    ],
    external:['lodash','jquery']
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# 10.3 src\main.js

src\main.js

import './main.css';
1

# 10.4 src\main.css

src\main.css

body{
    background-color: green;
}
1
2
3

# 11 编译Sass

# 11.1 安装

# v3 needs sass installed seperately (or node-sass)
npm install --save-dev rollup-plugin-scss@3 sass

# v2 has node-sass included (with option to use sass)
npm install --save-dev rollup-plugin-scss@2
1
2
3
4
5

# 11.2 rollup.config.dev.js

// rollup.config.js
import scss from 'rollup-plugin-scss'

export default {
  input: 'input.js',
  output: {
    file: 'output.js',
    format: 'esm'
  },
  plugins: [
    scss({
      include: ["/**/*.css", "/**/*.scss", "/**/*.sass"],
      output: "./build/css/style.css",
      failOnError: true,
    }) // will output compiled styles to output.css
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 12 本地服务器

# 12.1 安装

cnpm install rollup-plugin-serve --save-dev
1

# 12.2 rollup.config.dev.js

rollup.config.dev.js

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import postcss from 'rollup-plugin-postcss';
+import serve from 'rollup-plugin-serve';
export default {
    input:'src/main.js',
    output:{
        file:'dist/bundle.cjs.js',//输出文件的路径和名称
        format:'iife',//五种输出格式：amd/es6/iife/umd/cjs
        name:'bundleName',//当format为iife和umd时必须提供，将作为全局变量挂在window下
        sourcemap:true,
        globals:{
            lodash:'_', //告诉rollup全局变量_即是lodash
            jquery:'$' //告诉rollup全局变量$即是jquery
        }
    },
    plugins:[
        babel({
            exclude:"node_modules/**"
        }),
        resolve(),
        commonjs(),
        typescript(),
        postcss(),
+       serve({
+           open:true,
+           port:8080,
+           contentBase:'./dist'
+       })
    ],
    external:['lodash','jquery']
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# 12.3 package.json

package.json

{
  "scripts": {
    "build": "rollup --config rollup.config.build.js",
    "dev": "rollup --config rollup.config.dev.js -w"
  },
}
1
2
3
4
5
6
编辑 (opens new window)
#rollup
上次更新: 2022/05/22, 18:34:11
打包优化之loader&plugin
手写rollup原理

← 手写rollup原理→

最近更新
01
😍Vue3和React都在用的函数式编程，学起来~
 02-03
02
链表
 11-24
03
基础类型
 11-18
更多文章>
Theme by Vdoing | Copyright © 2020-2023 xujian | MIT License