使用rollup开启一个静态服务器

Rollup是一个现代的 JavaScript 打包工具，它可以将各种模块打包成一个更小、更快、更简单的单个文件。本文将介绍如何配置和启动 Rollup 服务。

安装 Rollup

首先，我们需要在项目中安装 Rollup：

npm install rollup –save-dev

创建 Rollup 配置文件

创建 rollup.config.js 文件，并添加以下内容：

export default {
  input: 'src/index.js',
  output: [
    {
      file: 'dist/bundle.js',
      format: 'umd'
    }
  ]
}

这个配置告诉 Rollup 入口点是 src/index.js，输出的文件为 dist/bundle.js，并且输出格式为 UMD。

配置 Rollup 插件

Rollup 支持许多插件，可以用来管理代码的大小、优化和处理不同类型的文件。例如，我们可以使用 @rollup/plugin-babel 插件来编译 ES6+ 代码。安装该插件：

npm install @rollup/plugin-babel –save-dev

然后，在配置文件中引入并配置该插件：

import babel from '@rollup/plugin-babel';

export default {
  input: 'src/index.js',
  output: [
    {
      file: 'dist/bundle.js',
      format: 'umd'
    }
  ],
  plugins: [
    babel({ babelHelpers: 'bundled' })
  ]
}

这个配置使用 babel 插件将 ES6+ 代码编译成浏览器可识别的代码，babelHelpers 选项设置为 'bundled'，意味着所有的 babel helper 函数将被打包到输出文件中。

配置 Rollup 开发服务器

Rollup 还可以作为开发服务器来使用。安装 rollup-plugin-serve 插件：

npm install rollup-plugin-serve –save-dev

然后在配置文件中引入并配置该插件：

import serve from 'rollup-plugin-serve';

export default {
  input: 'src/index.js',
  output: [
    {
      file: 'dist/bundle.js',
      format: 'umd'
    }
  ],
  plugins: [
    babel({ babelHelpers: 'bundled' }),
    serve({
      contentBase: ['dist'],
      port: 8080
    })
  ]
}