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
    ]
    }
];
複製代碼

總結

區分生產環境和開發環境可以幫助咱們更好地開發，尤爲是在開發環境下實現本地開發的便捷開發工具可以提升開發效率。