经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue3 Vite 进阶rollup命令行使用详解
来源:jb51  时间:2022/8/22 18:17:26  对本文有异议

rollup介绍

  • 开源类库优先选择
  • 以 ESM 标准为目标的构建工具
  • Tree Shaking

以命令行方式打包

  • 安装 rollup
  1. npm install -g rollup
  • 创建 index.js 文件
  1. import path from "path";
  2. console.log("hello rollop", path.join("", "hello"));
  • 打包
  1. rollup -i index.js --file dist.js --format umd
  • --file:打包输出文件
  • --format:打包格式(umd, cjs, es, iife)

Tree Shaking

只会打包我们用到的代码,没有用到的不会打包

  • 新建 a.js 文件
  1. export const funA = () => {
  2. console.log("a");
  3. };
  4. export const funB = () => {
  5. console.log("b");
  6. };
  • index.js 引入 a.js
  1. import { funA } from "./a";
  2. funA();
  3. console.log("hello rollup");
  • 打包文件
  1. rollup -i index.js --file dist.js --format es

输出代码,代码进行了合并,并且只打包了用到的代码

  1. const funA = () => {
  2. console.log("a");
  3. };
  4. funA();
  5. console.log("hello rollop");

Rollup 的命令行使用

index.js 文件

  1. import path from "path";
  2. import { funA } from "./a";
  3. funA();
  4. console.log("hello rollop", path.join(__dirname, "/hello"));
  5. export const x = 12;

a.js 文件

  1. export const funA = () => {
  2. console.log("a");
  3. };
  4. export const funB = () => {
  5. console.log("b");
  6. };

命令行

  1. rollup [options] <entry file> 选项 输入文件
  2. --help 帮助文档
  3. -v, --version 查看版本
  4. -i, --input <filename> 输入单个文件
  5. -f, --format <format> 输出格式
  6. -o, --file <output> 输出单个文件
  7. -d, --dir <dirname> 输出多个文件
  8. -w, --watch 监听文件改变,并重新打包
  9. -c, --config <filename> 指定配置文件使用
  10. --environment <values> 指定环境变量
  • 输出多个文件
  1. rollup -i index.js -i a.js --dir dist

format 格式

  • iife 输出自执行函数
  1. rollup -i index.js --format iife
  2. index.js stdout...
  3. Creating a browser bundle that depends on "path". You might need to include https://github.com/snowpackjs/rollup-plugin-polyfill-node
  4. var index = (function (exports, path) {
  5. 'use strict';
  6. function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
  7. var path__default = /*#__PURE__*/_interopDefaultLegacy(path);
  8. const funA = () => {
  9. console.log("a");
  10. };
  11. funA();
  12. console.log("hello rollop", path__default["default"].join(__dirname, "/hello"));
  13. const x = 12;
  14. exports.x = x;
  15. Object.defineProperty(exports, '__esModule', { value: true });
  16. return exports;
  17. })({}, path);
  • cjs 输出 commonJs 格式
  1. rollup -i index.js --format cjs
  2. index.js stdout...
  3. 'use strict';
  4. Object.defineProperty(exports, '__esModule', { value: true });
  5. var path = require('path');
  6. function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
  7. var path__default = /*#__PURE__*/_interopDefaultLegacy(path);
  8. const funA = () => {
  9. console.log("a");
  10. };
  11. funA();
  12. console.log("hello rollop", path__default["default"].join(__dirname, "/hello"));
  13. const x = 12;
  14. exports.x = x;
  • es 输出 esModule 格式
  1. rollup -i index.js --format es
  2. index.js stdout...
  3. import path from 'path';
  4. const funA = () => {
  5. console.log("a");
  6. };
  7. funA();
  8. console.log("hello rollop", path.join(__dirname, "/hello"));
  9. const x = 12;
  10. export { x };
  • umd 输出兼容 iife、cjs、es 格式的文件
  1. rollup -i index.js --format umd --name index
  2. index.js stdout...
  3. (function (global, factory) {
  4. typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('path')) :
  5. typeof define === 'function' && define.amd ? define(['exports', 'path'], factory) :
  6. (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.index = {}, global.path));
  7. })(this, (function (exports, path) { 'use strict';
  8. function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
  9. var path__default = /*#__PURE__*/_interopDefaultLegacy(path);
  10. const funA = () => {
  11. console.log("a");
  12. };
  13. funA();
  14. console.log("hello rollop", path__default["default"].join(__dirname, "/hello"));
  15. const x = 12;
  16. exports.x = x;
  17. Object.defineProperty(exports, '__esModule', { value: true });
  18. }));
  • umd 格式要指明 全局变量名 --name
  1. rollup -i index.js --file dist.js --format umd --name index

rollup.config.js

  1. export default {
  2. input: "index.js",
  3. output: {
  4. file: "dist.js",
  5. format: "umd",
  6. name: "index",
  7. },
  8. };
  • 执行配置文件
  1. rollup --config rollup.config.js

设置/获取环境变量

在配置文件中获取

  1. // rollup.config.js
  2. console.log(process.env.MODE);
  3. const mode = process.env.MODE;
  4. const isLocal = mode === "local";
  5. export default {
  6. input: "index.js",
  7. output: {
  8. file: "dist.js",
  9. format: isLocal ? "es" : "umd",
  10. name: "index",
  11. },
  12. };
  • 执行命令
  1. rollup --config rollup.config.js --environment MODE:local

插件 plugins

插件官网:github.com/rollup/plug…

  • 修改 index.js
  1. import path from "path";
  2. import { funA } from "./a";
  3. import pkg from "./package.json";
  4. console.log(pkg);
  5. funA();
  6. console.log("hello rollop", path.join(__dirname, "/hello"));
  7. export const x = 12;
  • json 文件转为 esModule
  1. npm install @rollup/plugin-json --save-dev
  2. npm install rollup
  • 由于 json 插件是安装在本地,所以执行本地的 rollup 来找到对应的插件
  1. ./node_modules/.bin/rollup --config rollup.config.js --plugin json

以上就是vue3 Vite 进阶rollup命令行使用详解的详细内容,更多关于vue3 Vite进阶rollup命令行的资料请关注w3xue其它相关文章!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号