vue3 Vite 進(jìn)階rollup命令行使用詳解
更新時(shí)間：2022年08月22日 16:47:19 作者：星河boy
這篇文章主要介紹了vue3 Vite 進(jìn)階rollup命令行使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
rollup介紹
- 開源類庫優(yōu)先選擇
- 以 ESM 標(biāo)準(zhǔn)為目標(biāo)的構(gòu)建工具
- Tree Shaking
以命令行方式打包
- 安裝 rollup
npm install -g rollup
- 創(chuàng)建 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
輸出代碼，代碼進(jìn)行了合并，并且只打包了用到的代碼
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> 選項(xiàng) 輸入文件 --help 幫助文檔 -v, --version 查看版本 -i, --input <filename> 輸入單個(gè)文件 -f, --format <format> 輸出格式 -o, --file <output> 輸出單個(gè)文件 -d, --dir <dirname> 輸出多個(gè)文件 -w, --watch 監(jiān)聽文件改變，并重新打包 -c, --config <filename> 指定配置文件使用 --environment <values> 指定環(huán)境變量
- 輸出多個(gè)文件
rollup -i index.js -i a.js --dir dist
format 格式
- iife 輸出自執(zhí)行函數(shù)
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",
},
};
- 執(zhí)行配置文件
rollup --config rollup.config.js
設(shè)置/獲取環(huán)境變量
在配置文件中獲取
// 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",
},
};
- 執(zhí)行命令
rollup --config rollup.config.js --environment MODE:local
插件 plugins
插件官網(wǎng)：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 文件轉(zhuǎn)為 esModule
npm install @rollup/plugin-json --save-dev npm install rollup
- 由于 json 插件是安裝在本地，所以執(zhí)行本地的 rollup 來找到對應(yīng)的插件
./node_modules/.bin/rollup --config rollup.config.js --plugin json
以上就是vue3 Vite 進(jìn)階rollup命令行使用詳解的詳細(xì)內(nèi)容，更多關(guān)于vue3 Vite進(jìn)階rollup命令行的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue中Axios添加攔截器刷新token的實(shí)現(xiàn)方法
Axios是一款網(wǎng)絡(luò)前端請求框架，本文主要介紹了vue中Axios添加攔截器刷新token的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
解決vue中el-date-picker?type=daterange日期不回顯的問題
這篇文章主要介紹了解決vue中el-date-picker?type=daterange日期不回顯的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue數(shù)據(jù)字典取鍵值方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vuex中mutations與actions的區(qū)別詳解
下面小編就為大家分享一篇Vuex中mutations與actions的區(qū)別詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
el-upload大文件切片上傳實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了el-upload大文件切片上傳實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
結(jié)合康熙選秀講解vue虛擬列表實(shí)現(xiàn)
這篇文章主要為大家介紹了結(jié)合康熙選秀講解vue虛擬列表的原理使用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue項(xiàng)目中一定會用到的性能優(yōu)化技巧
這篇文章主要為大家介紹了vue項(xiàng)目中一定會用到的性能優(yōu)化技巧實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
在頁面加載數(shù)據(jù)之前,有一段空白時(shí)間,要么用loading加載,要么就用骨架屏，本文主要介紹了vue項(xiàng)目中使用骨架屏的方法，感興趣的可以了解一下2021-05-05
解決vue打包 npm run build-test突然不動了的問題
這篇文章主要介紹了解決vue打包 npm run build-test突然不動了的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue-cli中devServer.proxy相關(guān)配置項(xiàng)的使用
這篇文章主要介紹了vue-cli中devServer.proxy相關(guān)配置項(xiàng)的使用詳解，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04