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
    ]
    }
];
复制代码

总结

区分生产环境和开发环境可以帮助咱们更好地开发，尤为是在开发环境下实现本地开发的便捷开发工具可以提升开发效率。