vue3 Vite 进阶rollup命令行使用详解

更新时间：2022年08月22日 16:47:19 作者：星河boy

这篇文章主要介绍了vue3 Vite 进阶rollup命令行使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

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] &lt;entry file&gt;  选项 输入文件
--help 帮助文档
-v, --version 查看版本
-i, --input &lt;filename&gt; 输入单个文件
-f, --format &lt;format&gt; 输出格式
-o, --file &lt;output&gt;  输出单个文件
-d, --dir &lt;dirname&gt;  输出多个文件
-w, --watch 监听文件改变，并重新打包
-c, --config &lt;filename&gt; 指定配置文件使用
--environment &lt;values&gt;  指定环境变量

输出多个文件

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

以上就是vue3 Vite 进阶rollup命令行使用详解的详细内容，更多关于vue3 Vite进阶rollup命令行的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue实现用户登录切换
这篇文章主要为大家详细介绍了vue实现用户登录切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
VUE实现大转盘抽奖
营运三宝(九宫格、大转盘、老虎机，当然此三宝当然是最基础的营销运营手段)，本片文章聊聊大转盘，转盘的实现逻辑应该是营销方案较为简单的一种了，本文将介绍如何实现大转盘抽奖，感兴趣的朋友可以参考下
2021-05-05
vue2.0 keep-alive最佳实践
这篇文章主要为大家详细介绍了vue2.0 keep-alive的最佳实践，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
羊了个羊通关脚本Vue node实现版本
这篇文章主要为大家介绍了羊了个羊通关脚本Vue node实现版本，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
这篇文章主要介绍了Vue axios全局拦截 get请求、post请求、配置请求的实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-11-11
Vue中使用Canvas实现绘制二维码
这篇文章主要为大家详细介绍了如何在Vue中使用Canvas实现绘制二维码，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下
2007-02-02
Vue和SpringBoot之间传递时间的方法实现
本文主要介绍了Vue和SpringBoot之间传递时间的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
Vuejs第十三篇之组件——杂项
组件（Component）是 Vue.js 最强大的功能之一。本文重点给大家介绍vuejs组件相关知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
2016-09-09
vue如何截取字符串
这篇文章主要介绍了vue如何截取字符串，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
详解如何制作并发布一个vue的组件的npm包
这篇文章主要介绍了详解如何制作并发布一个vue的组件的npm包，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11