likes
comments
collection
share

vue3入门46 - Vite 进阶 - rollup使用

作者站长头像
站长
· 阅读数 22

rollup介绍

  • 开源类库优先选择
  • 以 ESM 标准为目标的构建工具
  • Tree Shaking

以命令行方式打包

  • 安装 rollup
npm install -g rollup
  • 创建 index.js 文件
import path from "path";
console.log("hello rollop", path.join("", "hello"));
  • 打包
rollup -i index.js --file dist.js --format umd
  • --file:打包输出文件
  • --format:打包格式(umd, cjs, es, iife)

Tree Shaking

只会打包我们用到的代码,没有用到的不会打包

  • 新建 a.js 文件
export const funA = () => {
  console.log("a");
};
export const funB = () => {
  console.log("b");
};
  • index.js 引入 a.js
import { funA } from "./a";
funA();
console.log("hello rollup");
  • 打包文件
rollup -i index.js --file dist.js --format es

输出代码,代码进行了合并,并且只打包了用到的代码

const funA = () => {
  console.log("a");
};

funA();
console.log("hello rollop");

Rollup 的命令行使用

index.js 文件

import path from "path";
import { funA } from "./a";
funA();
console.log("hello rollop", path.join(__dirname, "/hello"));

export const x = 12;

a.js 文件

export const funA = () => {
  console.log("a");
};
export const funB = () => {
  console.log("b");
};

命令行

rollup [options] <entry file>  选项 输入文件
  
--help 帮助文档
-v, --version 查看版本
-i, --input <filename> 输入单个文件
-f, --format <format> 输出格式
-o, --file <output>  输出单个文件
-d, --dir <dirname>  输出多个文件
-w, --watch 监听文件改变,并重新打包
-c, --config <filename> 指定配置文件使用
--environment <values>  指定环境变量
  • 输出多个文件
rollup -i index.js -i a.js --dir dist

format 格式

  • iife 输出自执行函数
rollup -i index.js --format iife

index.js → stdout...
Creating a browser bundle that depends on "path". You might need to include https://github.com/snowpackjs/rollup-plugin-polyfill-node
var index = (function (exports, path) {
  'use strict';

  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

  var path__default = /*#__PURE__*/_interopDefaultLegacy(path);

  const funA = () => {
    console.log("a");
  };

  funA();
  console.log("hello rollop", path__default["default"].join(__dirname, "/hello"));

  const x = 12;

  exports.x = x;

  Object.defineProperty(exports, '__esModule', { value: true });

  return exports;

})({}, path);
  • cjs 输出 commonJs 格式
rollup -i index.js --format cjs

index.js → stdout...
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var path = require('path');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var path__default = /*#__PURE__*/_interopDefaultLegacy(path);

const funA = () => {
  console.log("a");
};

funA();
console.log("hello rollop", path__default["default"].join(__dirname, "/hello"));

const x = 12;

exports.x = x;
  • es 输出 esModule 格式
rollup -i index.js --format es

index.js → stdout...
import path from 'path';

const funA = () => {
  console.log("a");
};

funA();
console.log("hello rollop", path.join(__dirname, "/hello"));

const x = 12;

export { x };
  • umd 输出兼容 iife、cjs、es 格式的文件
rollup -i index.js --format umd --name index

index.js → stdout...
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('path')) :
  typeof define === 'function' && define.amd ? define(['exports', 'path'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.index = {}, global.path));
})(this, (function (exports, path) { 'use strict';

  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

  var path__default = /*#__PURE__*/_interopDefaultLegacy(path);

  const funA = () => {
    console.log("a");
  };

  funA();
  console.log("hello rollop", path__default["default"].join(__dirname, "/hello"));

  const x = 12;

  exports.x = x;

  Object.defineProperty(exports, '__esModule', { value: true });

}));

  • umd 格式要指明 全局变量名 --name
 rollup -i index.js --file dist.js --format umd --name index

rollup.config.js

export default {
  input: "index.js",
  output: {
    file: "dist.js",
    format: "umd",
    name: "index",
  },
};

  • 执行配置文件
rollup --config rollup.config.js

设置/获取环境变量

在配置文件中获取

// rollup.config.js

console.log(process.env.MODE);

const mode = process.env.MODE;
const isLocal = mode === "local";
export default {
  input: "index.js",
  output: {
    file: "dist.js",
    format: isLocal ? "es" : "umd",
    name: "index",
  },
};

  • 执行命令
rollup --config rollup.config.js --environment MODE:local

插件 plugins

插件官网:github.com/rollup/plug…

  • 修改 index.js
import path from "path";
import { funA } from "./a";
import pkg from "./package.json";
console.log(pkg);
funA();
console.log("hello rollop", path.join(__dirname, "/hello"));

export const x = 12;
  • json 文件转为 esModule
npm install @rollup/plugin-json --save-dev 
npm install rollup
  • 由于 json 插件是安装在本地,所以执行本地的 rollup 来找到对应的插件
./node_modules/.bin/rollup --config rollup.config.js --plugin json