rollup 热更新实现

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

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

前言

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

两个本地服务器插件

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.config.js

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

引用库

在根目录下建一个index.html文件来引用js类库

在package.json中配置命名（这里做了修改，区分了开发环境和生产环境，这个配置请看下文)

开启热更新

安装rollup-plugin-livereload插件

npm install rollup-plugin-livereload --save-dev
复制代码

在插件中配置rollup-plugin-livereload() 即可。

区分开发环境和生产环境

在开发环境我们需要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.dev.js

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

配置rollup.config.prod.js

代码压缩

总结

区分生产环境和开发环境能够帮助我们更好地开发，尤其是在开发环境下实现本地开发的便捷开发工具能够提高开发效率。以上梳理了下开发流程中的必备配置项，基础配置前面文章配置过，也在项目中相应配置了，今天这部分配置后面会继续补充上具体代码配置。