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] <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
- 修改 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移动端项目中如何实现页面缓存的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了vue3 Vite 进阶rollup命令行使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
今天小编就为大家分享一篇解决vue 表格table列求和的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要为大家详细介绍了vue监听用户输入和点击功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这篇文章主要介绍了vue使用HMAC-SHA256签名算法的相关知识,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-07-07
这篇文章主要介绍了Vue中自定义标签及其使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了Vuex新手的理解与使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
最近开发项目,关于表格的数据操作比较多,这个地方个人觉得比较难搞,特此记录一下,这篇文章主要给大家介绍了关于如何用vue2+element-ui实现多行行内表格编辑的相关资料,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了vue将文件/图片批量打包下载zip的教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
解决VUE-npm ERR! C:\rj\node-v14.4.0-win-x64\nod问题
这篇文章主要介绍了解决VUE-npm ERR! C:\rj\node-v14.4.0-win-x64\nod问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
最新评论