rollup 实践系列之开发环境配配置

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

前言

简单应用 rollup 打包工具库项目，并不需要有多深入了解 rollup，只需要参照 rollup 官方文档 即可，但想要拥有便捷流畅的开发体验还是需要去多了解一些文档以外的内容~~

项目初始化

安装 rollup

npm install rollup --save-dev

注意多人开发最好配置 --save-dev 本地开发环境，保证运行在相同开发环境下，减少错误。

配置 gitignore

添加 gitignore，忽略不用上传的文件

// .gitignore
.DS_Store
node_modules
dist

package.json

在 package.json 中配置 script 实现命令行打包。

"scripts": {
  "build": "rollup -c", // -c参数即 config 使用配置文件
  "dev": "rollup -c -w" // -w参数监听源文件是否有改动，如果有改动，重新打包
},

rollup 配置文件

新建一个 rollup.config.js 文件，配置最基本的输入输出。

// rollup.config.js
export default {
  input: 'src/main.js', // 打包入口
  output: { // 打包出口
    file: 'bundle.js',
    format: 'cjs'  // 打包模式规范-commonJS
  }
};

当然也可以根据项目的实际需要配置开发环境与生产环境文件，即将rollup.config.js拆分成两个rollup.config.dev.js和rollup.config.build.js，并在package.json 中区分开来：

rollup --c rollup.config.dev.js
rollup --c rollup.config.prod.js

配置 plugin

插件(plugins) 在打包的关键过程中更改 Rollup 的行为。

必备插件

必备的两个插件 plugin-commonjs 和 plugin-node-resolve

import commonjs from '@rollup/plugin-commonjs'; // 支持 commonjs 语法
import resolve from '@rollup/plugin-node-resolve'; // 告诉 Rollup 如何查找外部模块

热更新插件

划重点！！！在开发中怎么能少了热更新呢，众所周知，rollup 是不支持热更新的，但这么好用的功能，与时俱进的 rollup 怎么能没有呢？插件 rollup-plugin-hotreload 实现了这个功能！

npm install --save-dev rollup-plugin-hotreload 

在 rollup.config.js 中配置如下：

import { rph, rphMultibundles } from "rollup-plugin-hotreload";
import path from "path";
import "your_server_path"; // import your server path;

export default rphMultibundles({
  //...
  plugins: [
    rph({
      templateHtmlPath: "src/index.html", // template html path relative to rootDir
      isStopRPH: false, // stop hotreload or not
      rootDir: __dirname, // rootDir
      rootBuildDir: "build", // build root path relative to rootDir
      buildPaths: [
        // first one is relative path to rootDir...
        ["js/index.min.js", "src/index.js"]
        // as many as you want ...
      ]
    })
  ]
});

总结

完成以上配置，就能实现一个基本的rollup构建打包流程了，后续开发配置会在本文持续更新~~