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

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

1. 安装 Rollup

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

npm install rollup --save-dev

2. 创建 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。

3. 配置 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 函数将被打包到输出文件中。

4. 配置 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
    })
  ]
}

这个配置使用 rollup-plugin-serve 插件启动了一个本地服务器，将端口号设置为 8080，并指定静态文件根目录为 dist 文件夹。

5. 启动 Rollup 开发服务器

现在我们可以在终端中运行以下命令来启动 Rollup 开发服务器：

npx rollup -c -w

这个命令将 Rollup 配置文件传递给 Rollup 命令行工具，并启用监视模式 -w，使 Rollup 可以监听文件变化并重新构建源代码和输出代码。一旦命令运行成功，我们就可以在浏览器中访问 http://localhost:8080 来查看我们的应用程序。

总结

通过以上步骤，我们成功地配置了 Rollup 和启动了 Rollup 开发服务器。这使得我们可以更加高效地编写和测试我们的 JavaScript 应用程序，并减少了构建和部署的繁琐过程。