rollup 热更新实现

这是我参与更文挑战的第 13 天，活动详情查看： 更文挑战

Lynne，一个能哭爱笑永远少女心的前端开发工程师。身处互联网浪潮之中，热爱生活与技术。

前言

在实际开发过程中，我们肯定要运行代码，查看页面，这时有个本地服务器就很重要，这样可以调试代码。

区分开发环境和生产环境

在开发环境我们需要sourcemap开启，配置热更新和本地服务，在生产环境我们需要sourcemap关闭，不需要热更新和本地服务，需要代码压缩等，所以需要区分。

拆分 roullup.config.dev.js和rollup.config.prod.js

将rollup.config.js拆分成两个rollup.config.dev.js和rollup.config.build.js

修改 package.json 中的打包命名即可。

当然也要记得更新rollup.config.js文件中的引用文件路径！！

配置 package.json

最后在package.json中配置命名（这里做了修改，区分了开发环境和生产环境)

配置rollup.config.dev.js

本地服务器 + source-map + 热更新

两个本地服务器插件

rollup-plugin-serve or rollup-plugin-dev

这两个插件相比：

• rollup-plugin-dev 使用koa服务器实现，存在依赖
• 具有可能有用的附加功能

安装插件

先来安装一个插件开启本地服务器

安装rollup-plugin-serve or rollup-plugin-dev

npm install rollup-plugin-serve --save-dev

or 

npm install rollup-plugin0dev --save-dev

开启热更新

安装rollup-plugin-livereload插件

npm install rollup-plugin-livereload --save-dev

在开发环境的rollup.config.dev.js中配置插件中配置rollup-plugin-livereload() 即可。

配置rollup.config.dev.js

在rollup.config.dev.js的打包输出 output 中配置 sourcemap: true,这样调试代码会更方便。

import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import json from 'rollup-plugin-json';
import pkg from '../package.json'; // 引用文件路径要记得修改！！
import livereload from 'rollup-plugin-livereload'
import serve from 'rollup-plugin-serve'

export default [
  {
    input: pkg.main,
    output: [
      {
        name: 'W',
        file: pkg.browser,
        format: 'umd',
        sourcemap: true,
      }
    ],
    plugins: [
      resolve(), // so Rollup can find `ms`
      commonjs(), // so Rollup can convert `ms` to an ES module
      json(), // so Rollup can read file `.json`
      livereload(),
      serve({
        open:true,
        port: 8082,
        contentBase: ''
      })
    ]
  }
];

引用库

在根目录下建一个index.html文件来引用js类库，npm run dev即可自动打开浏览器页面。

配置rollup.config.prod.js

生产环境下不需要以上配置，主要需要代码压缩，安装插件：

import { terser } from "rollup-plugin-terser";

开发环境配置插件。

export default [
  {
    input: pkg.main,
    output: [
      {
        name: 'W',
        file: pkg.browser,
        format: 'umd'
      }
    ],
    plugins: [
        resolve(), // so Rollup can find `ms`
        commonjs(), // so Rollup can convert `ms` to an ES module
        json(), // so Rollup can read file `.json`
        terser() // so minify
    ]
    }
];

总结

区分生产环境和开发环境能够帮助我们更好地开发，尤其是在开发环境下实现本地开发的便捷开发工具能够提高开发效率。