rollup 学习

京尤不想
154 阅读7分钟

1. rollup 对比webpack 有哪些优势

  1. 更小的输出文件大小： Rollup 可以生成更小、更精简的输出文件。它采用 ES 模块的静态分析和 Tree-shaking 技术，可以将未使用的代码删除，从而减小最终的文件大小。这使得 Rollup 在构建库、组件和纯 JavaScript 应用时特别有优势。
  2. 更快的构建速度： Rollup 的构建速度通常比Webpack快。Rollup 的打包过程更直接，无需处理复杂的依赖图和热更新的逻辑，因此在大多数情况下比Webpack更快。
  3. ES 模块支持： Rollup 是设计用来处理ES模块的打包工具，它原生支持 ES6+ 的模块语法，并且可以自动生成具有正确导入和导出语句的模块。这使得使用 Rollup 打包的代码可以更好地与现代的 JavaScript 生态系统和工具进行交互。
  4. 代码拆分和动态导入： Rollup 支持动态导入（dynamic import）和代码拆分，可以根据需要异步加载模块，从而提高应用程序的性能。这些功能对于构建复杂的 web 应用程序非常有用。
  5. 更清晰的配置和插件系统： Rollup 的配置文件通常相对较简单，配置选项清晰明了。它还具有灵活的插件系统，可以通过插件来扩展和定制构建过程。

注意 ：虽然 Rollup 在某些方面具有优势，但在其他方面可能不如Webpack。Webpack 是一个更全面的构建工具，具有更丰富的功能，例如资源加载器（Loaders）、DevServer、代码分割等。根据事情情况来选择

2. 选择webapck 和rollup 我总结了一下这几点

2.1 选择webapck 场景（大型应用程序）

  • 你需要处理各种静态资源，包括 CSS、图片、HTML 等。
  • 你需要支持动态导入和代码分割。
  • 你需要构建多页应用程序或复杂的单页应用程序。
  • 你需要具有强大的 Loader 和插件系统来扩展和定制构建过程。
  • 你需要 Hot Module Replacement 和 DevServer 等开发工具。

2.2 选择rollup 场景（组件和功能库）

  • 你需要构建库或组件，并且希望生成更小、更精简的输出文件。
  • 你需要支持 ES6+ 的模块语法，并与现代 JavaScript 生态系统和工具进行交互。
  • 你需要通过动态导入和代码分割来提高应用程序的性能。
  • 你需要更快的构建速度和更清晰的配置文件。
  • 你需要更直接的构建过程，无需处理复杂的依赖图和热更新逻辑。

3. rollup 安装和配置

1. 安装依赖

2. 使用

3. 支持babel

4. tree-shaking代码

5. 使用引入第三方模块代码

6. 使用cdn

7. 安装使用typescript

8. 压缩代码

9. 编译postcss

10. 开启本地服务器

3.1 安装rollup

  • 安装
npm i rollup -D

3.2 使用rollup

  • 编写rollup.config.js文件
export default {
  input: './src/index.js',
  output: {
    file: 'dist/index.js',//输出文件的路径和名称
    format: 'umd',//五种输出格式：amd/es6/iife/umd/cjs
    // name: 'bundleName'//当format为iife和umd时必须提供，将作为全局变量挂在window下
  },
  // plugins
}
  • 编写package.json 文件
{
	"name": "rollup_1",
	"version": "1.0.0",
	"description": "",
	"dependencies": {
		"rollup": "^3.29.3"
	},
	"devDependencies": {},
	"scripts": {
		"build": "rollup --config"
	},
  "type": "module",
	"keywords": [],
	"author": "",
	"license": "ISC"
}
  • 新建一个html 文件 dist/index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>rollup </title>
  <script src="./index.js"></script>
</head>

<body>

</body>

</html>

image.png

image.png

3.3 支持babel

  • 安装babel依赖
npm i @rollup/plugin-babel @babel/core @babel/preset-env -D
  • 新建一个babel 配置文件 .babelrc
{
	"presets": [
		[
			"@babel/env",
			{
				"module": false
			}
		]
	]
}
  • rollup.config.js 文件
import babel from '@rollup/plugin-babel'

export default {
  input: './src/index.js',
  output: {
    file: 'dist/index.js',//输出文件的路径和名称
    format: 'umd',//五种输出格式：amd/es6/iife/umd/cjs
    // name: 'bundleName'//当format为iife和umd时必须提供，将作为全局变量挂在window下
  },
  plugins: [
    babel({
      exclude: './node_modules', // babel 排除编译文件
    })
  ]
}

3.4 使用tree-shaking

  • Tree-shaking的本质是消除无用的js代码
  • rollup只处理函数和顶层的import/export变量
  • 新建文件 src/main.js
import { a1, b1} from "./other";

export {
  a1, b1
}
  • 新建文件 src/other.js
export var a1= 1
export var b1 = 2
  • src/index.js
import { a1, b1 } from "./main";

console.log(a1)

const sum = (a, b) => {
  return a + b
}
let res = sum(1, 2)
console.log(res)
const promise = new Promise()
  • tree-shaking 后的代码

image.png

3.5 使用引入第三方模块

  • rollup.js编译源码中的模块引用默认只支持 ES6+的模块方式import/export
  • 需要支持commonjs和node-resolve 需要安装插件包
cnpm install @rollup/plugin-node-resolve @rollup/plugin-commonjs lodash --save-dev
  • rollup.config.js
import babel from '@rollup/plugin-babel'
import commonjs from '@rollup/plugin-commonjs'
import nodeResolve from '@rollup/plugin-node-resolve'
export default {
  input: './src/index.js',
  output: {
    file: 'dist/index.js',//输出文件的路径和名称
    format: 'umd',//五种输出格式：amd/es6/iife/umd/cjs
    // name: 'bundleName'//当format为iife和umd时必须提供，将作为全局变量挂在window下
  },
  plugins: [
    babel({
      exclude: './node_modules', // babel 排除编译文件
    }),
    nodeResolve(),
    commonjs()
  ]
}
  • index.js
import { a1, b1 } from "./main";
import _ from 'lodash';
console.log(_);
console.log(a1)

const sum = (a, b) => {
  return a + b
}
let res = sum(1, 2)
console.log(res)
const promise = new Promise()

image.png

3.6 使用CDN 外部引入模块这样打包体积会小很多

  • index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>rollup </title>
  <script src="https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"></script>
  <script src="./index.js"></script>

</head>

<body>

</body>

</html>
  • rollup.config.js
import babel from '@rollup/plugin-babel'
import commonjs from '@rollup/plugin-commonjs'
import nodeResolve from '@rollup/plugin-node-resolve'
export default {
  input: './src/index.js',
  output: {
    file: 'dist/index.js',//输出文件的路径和名称
    format: 'iife',//五种输出格式：amd/es6/iife/umd/cjs
    // name: 'bundleName'//当format为iife和umd时必须提供，将作为全局变量挂在window下
    name: 'bundleName',
    globals: {
      lodash: '_'
    }
  },
  plugins: [
    babel({
      exclude: './node_modules', // babel 排除编译文件
    }),
    nodeResolve(),
    commonjs()
  ],
  external: ['lodash']
}
  • 打包后结果

image.png

3.7 使用typescript

  • 安装typescript
cnpm i tslib typescript @rollup/plugin-typescript -D
  • rollup.config.js
import babel from '@rollup/plugin-babel'
import commonjs from '@rollup/plugin-commonjs'
import nodeResolve from '@rollup/plugin-node-resolve'
import typescript from '@rollup/plugin-typescript'
export default {
  input: './src/index.ts',
  output: {
    file: 'dist/index.js',//输出文件的路径和名称
    format: 'iife',//五种输出格式：amd/es6/iife/umd/cjs
    // name: 'bundleName'//当format为iife和umd时必须提供，将作为全局变量挂在window下
    name: 'bundleName',
    globals: {
      lodash: '_'
    }
  },
  plugins: [
    babel({
      exclude: './node_modules', // babel 排除编译文件
    }),
    nodeResolve(),
    commonjs(),
    typescript()
  ],
  external: ['lodash'] // 标记外部依赖 打包的时候不会打包进区
}
  • dist/index.ts
let myName: string = 'zhufeng';
let age: number = 12;
console.log(myName, age);

image.png

3.8 压缩js文件

  • 安装
cnpm install rollup-plugin-terser --save-dev
  • rollup.config.js
import babel from '@rollup/plugin-babel'
import commonjs from '@rollup/plugin-commonjs'
import nodeResolve from '@rollup/plugin-node-resolve'
import typescript from '@rollup/plugin-typescript'
import { terser } from 'rollup-plugin-terser'
export default {
  input: './src/index.ts',
  output: {
    file: 'dist/index.js',//输出文件的路径和名称
    format: 'iife',//五种输出格式：amd/es6/iife/umd/cjs
    // name: 'bundleName'//当format为iife和umd时必须提供，将作为全局变量挂在window下
    name: 'bundleName',
    globals: {
      lodash: '_'
    }
  },
  plugins: [
    babel({
      exclude: './node_modules', // babel 排除编译文件
    }),
    nodeResolve(),
    commonjs(),
    typescript(),
    terser()
  ],
  external: ['lodash'] // 标记外部依赖 打包的时候不会打包进区
}

image.png

3.9 编译css

  • 安装postcss
cnpm install postcss rollup-plugin-postcss --save-dev
  • rollup.config.js
import babel from '@rollup/plugin-babel'
import commonjs from '@rollup/plugin-commonjs'
import nodeResolve from '@rollup/plugin-node-resolve'
import typescript from '@rollup/plugin-typescript'
import { terser } from 'rollup-plugin-terser'
import postcss from 'rollup-plugin-postcss'
export default {
  input: './src/index.ts',
  output: {
    file: 'dist/index.js',//输出文件的路径和名称
    format: 'cjs',//五种输出格式：amd/es6/iife/umd/cjs
    // name: 'bundleName'//当format为iife和umd时必须提供，将作为全局变量挂在window下
    name: 'bundleName',
    globals: {
      lodash: '_'
    }
  },
  plugins: [
    babel({
      exclude: './node_modules', // babel 排除编译文件
    }),
    nodeResolve(),
    commonjs(),
    typescript(),
    terser(),
    postcss()
  ],
  external: ['lodash'] // 标记外部依赖 打包的时候不会打包进区
}

image.png

3.10 开启本地服务

  • 安装
cnpm install rollup-plugin-serve --save-dev
  • rollup.config.js
import babel from '@rollup/plugin-babel'
import commonjs from '@rollup/plugin-commonjs'
import nodeResolve from '@rollup/plugin-node-resolve'
import typescript from '@rollup/plugin-typescript'
import { terser } from 'rollup-plugin-terser'
import postcss from 'rollup-plugin-postcss'
import serve from 'rollup-plugin-serve'
export default {
  input: './src/index.ts',
  output: {
    file: 'dist/index.js',//输出文件的路径和名称
    format: 'cjs',//五种输出格式：amd/es6/iife/umd/cjs
    // name: 'bundleName'//当format为iife和umd时必须提供，将作为全局变量挂在window下
    name: 'bundleName',
    globals: {
      lodash: '_'
    }
  },
  plugins: [
    babel({
      exclude: './node_modules', // babel 排除编译文件
    }),
    nodeResolve(),
    commonjs(),
    typescript(),
    terser(),
    postcss(),
    serve({
      open:true,
      port:8080,
      contentBase:'./dist'
    })
  ],
  external: ['lodash'] // 标记外部依赖 打包的时候不会打包进区
}

image.png

代码地址 gitee.com/little1/rol…

avatar
文章
阅读
粉丝