Rollup 使用

TIP

Rollup 是一个专注于 JS 模块的打包器，能打包出更精简、更小的代码，通常用于 JS 库、JS 框架的打包

一 安装

• 中文官网
• 英文官网

1 全局安装

# 全局安装
npm install --global rollup

# 查看命令帮助
rollup --help

2 局部安装

• 安装 rollup

npm init -y

npm i rollup -D

• 编写配置文件 rollup.config.js

import path from "path";

export default {
  input: "src/index.js", // 入口
  output: {
    // 出口
    format: "iife", // 打包输出格式：立即执行 自执行函数
    file: path.resolve(__dirname, "dist/bundle.js"), // 出口文件
    sourcemap: true, // 根据源码产生映射文件
  },
};

• 修改启动参数 package.json

"scripts": {
	"dev": "rollup -c -w"
},

• 运行命令

npm run dev

二 常用配置

// rollup.config.js
export default {
	// 核心选项
	input: 'src/index.js', // 入口，可以单入口、可以多入口
	output: { // 出口
		format: 'iife', // 打包输出格式，五种：amd / es6 / iife / umd / cjs
		file: path.resolve(__dirname, 'dist/bundle.js'), // 出口文件
		sourcemap: true // 根据源码产生映射文件
	},
    plugins:[// 插件
		......
	],
	external: ['lodash'], //第三方依赖
	globals: { // 全局模块，例如全局变量$就是jquery
		jquery: '$'
	}
};

三 插件列表

• @rollup/plugin-node-resolve 解析第三方文件(node ts 等)

• @rollup/plugin-commonjs 解析 CommonJS 模块

• rollup-plugin-serve 本地服务器

• rollup-plugin-livereload 热更新

• rollup-plugin-typescript2 解析 typescript

• rollup-plugin-terser ES6+的 JS 解析器，用于压缩代码

• @rollup/plugin-json 解析 json 插件

• rollup-plugin-postcss 解析 css

• @rollup/plugin-babel babel 解析 ES6+语法

• 其他插件列表

四 部分配置

# 安装解析第三方和commonJS
npm i @rollup/plugin-node-resolve @rollup/plugin-commonjs -D

# 安装本地服务器
npm i rollup-plugin-serve -D

# 安装热更新
npm i rollup-plugin-livereload -D

# 安装typescript支持
npm i typescript rollup-plugin-typescript2 -D

# 安装css支持
npm i rollup-plugin-postcss -D

# 安装babel支持
npm i @rollup/plugin-babel @babel/core @babel/preset-env -D

# 安装js压缩
npm i rollup-plugin-terser -D

五 开发环境

// rollup.config.js
import resolve from "@rollup/plugin-node-resolve"; // 解析第三方模块的插件
import commonjs from "@rollup/plugin-commonjs"; // 解析commonJS模块
import typescript from "rollup-plugin-typescript2"; // 解析ts的插件
import serve from "rollup-plugin-serve"; // 启动本地服务的插件
import livereload from "rollup-plugin-livereload"; // 支持热更新
import postcss from "rollup-plugin-postcss"; // 解析css
import babel, { getBabelOutputPlugin } from "@rollup/plugin-babel"; // babel

import path from "path";

// 开发环境
export default {
  input: "src/index.js", // 入口
  output: {
    // 出口
    format: "esm", // 打包输出格式：立即执行 自执行函数
    file: path.resolve(__dirname, "dist/bundle.js"), // 出口文件
    sourcemap: true, // 根据源码产生映射文件
  },
  plugins: [
    // 插件
    resolve({
      // 第三方文件解析
      extensions: [".js", ".ts"],
    }),
    commonjs(),
    typescript({
      tsconfig: path.resolve(__dirname, "tsconfig.json"),
    }),
    postcss(),
    getBabelOutputPlugin({
      presets: ["@babel/preset-env"],
    }),
    babel({
      babelHelpers: "bundled",
      // include: '/src'
      exclude: "node_modules/**",
    }),
    livereload(),
    serve({
      openPage: "/index.html",
      contentBase: "", //
      port: 3001, // 端口
      // open: true // 自动打开浏览器
    }),
  ],
};

// package.json配置打包命令
"scripts": {
    "dev": "rollup -c -w"
  },

六 生产环境

// rollup.config.build.js
import resolve from "@rollup/plugin-node-resolve"; // 解析第三方模块的插件
import commonjs from "@rollup/plugin-commonjs"; // 解析commonJS模块
import typescript from "rollup-plugin-typescript2"; // 解析ts的插件
import { terser } from "rollup-plugin-terser";
import postcss from "rollup-plugin-postcss"; // 解析css

import path from "path";

// 生产环境
export default {
  input: "src/index.js", // 入口
  output: {
    format: "iife", // 打包格斯：立即执行 自执行函数
    file: path.resolve(__dirname, "dist/bundle.js"), // 出口文件
    sourcemap: true, // 根据源码产生映射文件
  },
  plugins: [
    resolve({
      // 第三方文件解析
      extensions: [".js", ".ts"],
    }),
    commonjs(),
    typescript({
      tsconfig: path.resolve(__dirname, "tsconfig.json"),
    }),
    terser(),
    postcss(),
  ],
};

// package.json配置打包命令
"scripts": {
    "build": "rollup -c rollup.config.build.js"
  },