vue3 Vite 进阶rollup命令行使用详解

针对“vue3 Vite 进阶rollup命令行使用详解”的主题，我将为您提供一份完整的攻略。如下：

什么是Vue3 Vite？

Vue3 Vite 是 Vue.js 团队开发的一款基于本地开发服务器和源码构建的新型前端构建工具。它旨在提供快速的开发环境和简单易懂的打包机制。

什么是Rollup？

Rollup 是一种 JavaScript 模块打包器。它基于 ES6 模块系统和 Tree Shaking 技术，可编译出更小、更快的代码库。

如何在Vue3项目中使用Rollup？

在Vue3项目中使用Rollup，可以通过配置 rollup.config.js 文件来进行。例如：

// rollup.config.js
import vue from 'rollup-plugin-vue';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.min.js',
    format: 'iife',
    name: 'MyBundle'
  },
  plugins: [
    vue(),
    resolve(),
    commonjs(),
    terser()
  ]
};

在上面的示例中，我们使用了 rollup-plugin-vue 插件来处理 Vue 单文件组件，@rollup/plugin-node-resolve 和 @rollup/plugin-commonjs 插件分别用于解析第三方库和 CommonJS 模块，最后使用 rollup-plugin-terser 插件来压缩输出文件。

Rollup命令行使用详解

以下是Rollup常用命令及其意义：

rollup -c ：使用默认配置文件 rollup.config.js 进行打包。
rollup -o bundle.min.js -f iife ：输出格式化方式为 IIFE 的文件，输出文件名为 bundle.min.js。
rollup -w：自动监视文件改动，并重新打包。
rollup --environment NODE_ENV:production：设置环境变量，例如 NODE_ENV 设置为 production。

上述命令中，-c 参数用于指定使用配置文件进行打包，也可以通过 -i 参数指定输入文件，例如 rollup -i src/index.js -o dist/bundle.js。