vue3 Vite 進階rollup命令列使用詳解

2022-08-22 22:00:12

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命令列的資料請關注it145.com其它相關文章！

vue3 Vite 進階rollup命令列使用詳解

目錄

rollup介紹

以命令列方式打包

Tree Shaking

Rollup 的命令列使用

命令列

format 格式

rollup.config.js

設定/獲取環境變數

外掛 plugins

熱門文章