vue3 Vite 进阶rollup命令行使用详解
更新时间:2022年8月22日 22:42 点击:1189 作者:星河boy
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
以上就是vue3 Vite 进阶rollup命令行使用详解的详细内容,更多关于vue3 Vite进阶rollup命令行的资料请关注猪先飞其它相关文章!
原文出处:https://juejin.cn/post/7133931871389532173
上一篇: vue原生input输入框原理剖析
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25- 这篇文章主要介绍了Vue select 绑定动态变量的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-23
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要为大家详细介绍了vue实现div单选多选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-16
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01