从零开始的Vue开发：搭建Rollup环境

2023-11-08 20:08:18

从零开始的Vue世界-01：搭建开发环境

在踏入Vue的世界之前，我们必须搭建一个合适的开发环境，为接下来的学习之旅做好准备。在这篇文章中，我们将介绍如何使用Rollup创建一个Vue开发环境。

什么是Rollup？

Rollup是一个JavaScript模块打包器，主要用于将多个模块打包成一个或多个可用于浏览器或Node.js的捆绑包。与Webpack偏向于应用打包的定位不同，Rollup更加专注于库打包。

搭建开发环境

1. 安装Rollup

npm install --save-dev rollup rollup-plugin-vue rollup-plugin-babel rollup-plugin-commonjs rollup-plugin-node-resolve

2. 创建rollup.config.js

在项目根目录下创建一个名为rollup.config.js的文件，并输入以下内容：

import vue from 'rollup-plugin-vue';
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    vue({
      css: true
    }),
    babel({
      exclude: 'node_modules/**'
    }),
    commonjs(),
    nodeResolve()
  ]
};

3. 编写main.js

在src目录下创建一个名为main.js的文件，并输入以下内容：

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App)
});

4. 运行Rollup

在终端中运行以下命令：

rollup -c

这将生成一个名为bundle.js的捆绑包，该捆绑包包含了Vue和我们的应用程序代码。

理解Rollup配置

input: 指定要打包的入口文件。
output: 指定捆绑包的输出文件和格式。
plugins: 指定要使用的Rollup插件。
- rollup-plugin-vue：将Vue组件编译成ES模块。
- rollup-plugin-babel：将ES6+代码转译为ES5。
- rollup-plugin-commonjs：支持CommonJS模块。
- rollup-plugin-node-resolve：解析Node.js模块。