vue3 Vite进阶rollup命令行怎么使用

本篇内容介绍了“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命令行怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！