vue3 Vite进阶rollup命令行使用介绍

1

npm install -g rollup

1

2

import path from "path";

console.log("hello rollop", path.join("", "hello"));

1

rollup -i index.js --file dist.js --format umd

1

2

3

4

5

6

export const funA = () => {

  console.log("a");

};

export const funB = () => {

  console.log("b");

};

1

2

3

import { funA } from "./a";

funA();

console.log("hello rollup");

1

rollup -i index.js --file dist.js --format es

1

2

3

4

5

const funA = () => {

  console.log("a");

};

funA();

console.log("hello rollop");

1

2

3

4

5

import path from "path";

import { funA } from "./a";

funA();

console.log("hello rollop", path.join(__dirname, "/hello"));

export const x = 12;

1

2

3

4

5

6

export const funA = () => {

  console.log("a");

};

export const funB = () => {

  console.log("b");

};

1

2

3

4

5

6

7

8

9

10

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>  指定环境变量

1

rollup -i index.js -i a.js --dir dist

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

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);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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;

1

2

3

4

5

6

7

8

9

10

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 };

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

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 });

}));

1

rollup -i index.js --file dist.js --format umd --name index

1

2

3

4

5

6

7

8

export default {

  input: "index.js",

  output: {

    file: "dist.js",

    format: "umd",

    name: "index",

  },

};

1

rollup --config rollup.config.js

1

2

3

4

5

6

7

8

9

10

11

12

// 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",

  },

};

1

rollup --config rollup.config.js --environment MODE:local

1

2

3

4

5

6

7

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;

1

2

npm install @rollup/plugin-json --save-dev

npm install rollup

1

./node_modules/.bin/rollup --config rollup.config.js --plugin json