rollup介绍
- 开源类库优先选择
- 以 ESM 标准为目标的构建工具
- Tree Shaking
以命令行方式打包
- 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
只会打包我们用到的代码,没有用到的不会打包
- export const funA = () => {
- console.log("a");
- };
- export const funB = () => {
- console.log("b");
- };
- 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 格式
- 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);
- 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;
- 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 });
- }));
- 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…
- 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;
- 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命令行的资料请关注w3xue其它相关文章!