rollup 基础使用 #

import * as dom from './lib/dom.js'
import { formatHMS } from './lib/time.js'

// get clock element
const clock = dom.get('.clock')

if (clock) {
  console.log('initializing clock')

  // update clock every second
  setInterval(() => {
    clock.textContent = formatHMS()
  }, 1000)
}

// fetch first node from selector
export function get(selector, doc = document) {
  return doc.querySelector(selector)
}

// fetch all nodes from selector
export function getAll(selector, doc = document) {
  return doc.querySelectorAll(selector)
}

// time formatting

// return 2-digit value
function timePad(n) {
  return String(n).padStart(2, '0')
}

// return time in HH:MM format
export function formatHM(d = new Date()) {
  return timePad(d.getHours()) + ':' + timePad(d.getMinutes())
}

// return time in HH:MM:SS format
export function formatHMS(d = new Date()) {
  return formatHM(d) + ':' + timePad(d.getSeconds())
}

;(function () {
  'use strict'

  function get(selector, doc = document) {
    return doc.querySelector(selector)
  }

  function timePad(n) {
    return ('' + n).padStart(2, '0')
  }

  function formatHM(d = new Date()) {
    return timePad(d.getHours() + ':' + timePad(d.getMinutes()))
  }

  function formatHMS(d = new Date()) {
    return formatHM(d) + ':' + timePad(d.getSeconds())
  }

  // get clock element
  const clock = get('.clock') // NOTE 即使是统一导入，也只会打包使用的函数

  if (clock) {
    console.log('initializing clock')
    // update clock every second
    setInterval(() => {
      clock.textContent = formatHMS()
    }, 1000)
  }
})() // IIFE 参数呢？

export default {
  // 核心选项
  input, // 必须
  output: {
    // 必须 (要输出多种格式，设置成一个数组)
    // 核心选项
    file, // 输出单个文件，必须，否则设置 dir
    format, // 必须
    name, // iife, umd 必须
    globals, // iiife, umd 中的全局变量

    // 额外选项
    banner,
    footer,
    sourcemap, // 生成 sourcemap  boolean | 'inline' | 'hidden'
    paths,
  },
  external,
  plugins,
  // watch: boolean | watchOptions
  watch: {
    include: '需要监听的文件', // string | RegExp | (string | RegExp)[]; // 包含文件 'src/**'
    exclude: '排除监听的文件', // string | RegExp | (string | RegExp)[]; // 排除文件 'node_modules/**'
    clearScreen: true, // 清除控制台 默认 true
    buildDelay: 100, // 延迟构建 默认 0 ms 即立即构建
  },
}

export default {
  input: './src/main.js',
  output: {
    file: './build/bundle.js',
    format: 'iife',
    sourcemap: true, // 独立的 sourcemap,
    // sourcemap: 'inline', // 行内 sourcemap,
  },

  // 监听配置
  watch: {
    include: 'src/**',
    exclude: 'node_modules/**',
    skipWrite: false, // Do not write files to disk when watching, 可提供打包速度
    clearScreen: false, // 不清除控制台打包输出信息
  },
}

export default {
  input: './cjs2es/input.js',
  output: {
    file: './cjs2es/output.js',
    format: 'es',
  },
  external: ['dayjs'], // 会从输出文件中排除 dayjs 的代码
}

import peerExternal from 'rollup-plugin-peer-deps-external'

export default {
  input: './cjs2es/input.js',
  output: {
    file: './cjs2es/output.js',
    format: 'es',
  },
  plugins: [peerExternal()],
}

process.env.VAR1 // true
process.env.VAR2 // value2
process.env.VAR3 // x

const isProduction = process.env.production

console.log(`running in ${isProduction ? 'production' : 'development'} mode`)

const sourcemap = isProduction ? false : true

import del from 'rollup-plugin-delete'

export default {
  plugins: [del({ targets: 'dist/*' })],
}

import dayjs from 'dayjs'

export function format() {
  return dayjs().format('HH:mm:ss')
}

// cjs2es.js
export default {
  input: './cjs2es/input.js',
  output: {
    file: './cjs2es/output.js',
    format: 'es',
  },
}

import commonjs from '@rollup/plugin-commonjs'
import resolveNode from '@rollup/plugin-node-resolve'

export default {
  input: './cjs2es/input.js',
  output: {
    file: './cjs2es/output.js',
    format: 'es',
  },
  plugins: [resolveNode(), commonjs()],
}

// cjs2es/input.js
import dayjs from 'dayjs'

export const version = '__version__' // 库的版本号，希望在打包时替换成 package.json 中的版本号
export function format() {
  return dayjs().format('HH:mm:ss')
}

import replace from '@rollup/plugin-replace'

export default {
  // ...
  plugins: [
    replace({
      __version__: '1.0.0',
      preventAssignment: true,
    }),
  ],
}

const version = '1.0.0'

function format() {
  return dayjs().format('HH:mm:ss')
}

export { format, version }

import dayjs from 'dayjs'

// 希望从 package.json 注入 version 和生成打包时间
const [v, buildOn] = '[VI]{version}|{date}[/VI]'.split('|')

export const version = v
export const buildTime = buildOn

export function format() {
  return dayjs().format('HH:mm:ss')
}

/*
 * @Author      : ZhouQiJun
 * @Date        : 2024-11-24 14:15:24
 * @LastEditors : ZhouQiJun
 * @LastEditTime: 2024-11-24 15:22:06
 * @Description : commonjs转es配置
 */
import commonjs from '@rollup/plugin-commonjs'
import resolveNode from '@rollup/plugin-node-resolve'
import peerExternal from 'rollup-plugin-peer-deps-external'
import versionInj from 'rollup-plugin-version-injector'

export default {
  input: './cjs2es/input.js',
  output: {
    file: './cjs2es/output.js',
    format: 'es',
  },
  plugins: [
    versionInj({
      injectInTags: {
        fileRegexp: /\.(js|html|css)$/,
        dateFormat: 'yyyy-mm-d HH:MM:ss',
      },
    }),
    peerExternal(),
    resolveNode(),
    commonjs(),
  ],
}

const [v, buildOn] = '1.0.0|2024-11-24 15:27:37'.split('|')

const version = v
const buildTime = buildOn
export { buildTime, version }