前言

本文章主要记录如何使用rollup进行打包，写这篇文章作为我学习查阅笔记的地方，欢迎掘友们前来学习，相互进步！想要学习更多内容建议学习官网www.rollupjs.com/（中文）

一. 安装

npm install rollup -D

二.roullup 打包库文件

这边不介绍如何使用命令来进行打包的方式了，直接上配置文件打包方式。

2.1 打包多种库

//rollup.config.js
module.exports = {
  // 入口
  input: "./lib/index.js",
  // 出口
  output: [
  //打包通用的库
    {
      format: "umd",
      name: "clare", //必须加
      file: "./build/bundle.umd.js"
    },
    {
      format: "amd",
      file: "./build/bundle.amd.js"
    }, 
    //打包CommonJS的库
    {
      format: "cjs",
      file: "./build/bundle.cjs.js"
    },
    //打包浏览器的库
    {
      format: "iife",
      name: "clare",
      file: "./build/bundle.browser.js"
    }
  ]
}

TIP：rollup默认情况打包只会处理ES Moudle ，当然如果代码中用到了commonJs,可以安装@rollup/plugin-commonjs插件处理

同理，当rollup中集成了第三方库的情况，举例：

import answer from 'the-answer';  
  
export default function () {  
console.log('the answer is ' + answer);  
}

打包后报错：

由此输出的 bundle.js 仍然可以在 Node.js 中运行，因为 import 声明被转换成为 CommonJS 规范的 require 语句，但是 the-answer 并未 被打包在 bundle 中。为此，我们需要一个插件 @rollup/plugin-node-resolve。

最后整体配置如下：

const commonjs = require('@rollup/plugin-commonjs')
const nodeResolve = require('@rollup/plugin-node-resolve')

// 使用代码转换和压缩
const { babel } = require('@rollup/plugin-babel')
const terser = require('@rollup/plugin-terser')

// 默认lodash没有被打包是因为它使用commonjs, rollup默认情况下只会处理es module
const commonjs = require("@rollup/plugin-commonjs");
const nodeResolve = require("@rollup/plugin-node-resolve");

// 转换成es5和压缩代码
const { babel } = require("@rollup/plugin-babel");
const terser = require("@rollup/plugin-terser");

module.exports = {
  // 入口
  input: "./lib/index.js",
  // 出口
  output: {
    format: "umd",
    name: "clare",
    file: "./build/bundle.umd.js",
    globals: { //导入第三方库有别名不加这个属性会报错
      lodash: "_",
      "the-answer": "answer",
    },
  },
  external: ["lodash", "the-answer"],
  plugins: [
    commonjs(),
    nodeResolve(),
    babel({
      babelHelpers: "bundled",
      exclude: /node_modules/,
    }),
    terser(),
  ],
};

配置babel 的时候，配置babel.config.js

module.exports = {
  presets: [
    ["@babel/preset-env"]
  ]
}

三.roullup 打业务文件

配置其实都差不多，主要是安装一些插件和注意配置，下面举例打包css,vue文件的方法

const commonjs = require('@rollup/plugin-commonjs')
const nodeResolve = require('@rollup/plugin-node-resolve')

const { babel } = require('@rollup/plugin-babel')
const terser = require('@rollup/plugin-terser')

//处理css和vue文件需要的插件
const postcss = require('rollup-plugin-postcss')
const vue = require('rollup-plugin-vue')
const replace = require('@rollup/plugin-replace')


const isProduction = process.env.NODE_ENV === "production"
const plugins = [
  commonjs(),
  nodeResolve(),
  babel({
    babelHelpers: "bundled",
    exclude: /node_modules/
  }),
  postcss(),
  vue(),
  replace({
    "process.env.NODE_ENV": JSON.stringify('production'),
    preventAssignment: true
  }),
]



module.exports = {
  // 入口
  input: "./src/index.js",
  // 出口
  output: {
    format: "umd",
    name: "clare",
    file: "./build/bundle.umd.js",
    globals: {
      lodash: "_"
    }
  },
  plugins: plugins
}

//postcss.config.js
module.exports = {
  plugins: [require("postcss-preset-env")]
}

TIP: 打包vue文件如果不加@rollup/plugin-replace之后会报错，因为vue在打包的代码中用到了process.env.NODE_ENV,所以需要配置

当然如果你在修改代码的时候，想要实时监听浏览器，可以配置：

const serve = require('rollup-plugin-serve')
const livereload = require('rollup-plugin-livereload')
if (isProduction) {
  plugins.push(terser())
} else {
  const extraPlugins = [
    serve({
      port: 8000,
      open: true,
      contentBase: "."
    }),
    livereload()
  ]
  plugins.push(...extraPlugins)
}

"scripts": {
    "build": "rollup -c --environment NODE_ENV:production",
    "serve": "rollup -c --environment NODE_ENV:development -w"
  },