玩转 rollup#

import { defineConfig } from 'rollup'

export default defineConfig(
  // 可以传一个对象或一个数组，使用场景区别：
  // - 对象：有一个或多个入口，但 output 配置是共用的
  // - 数组：有多个入口，且 output 配置不同
  [
    {
      input: ['src/index.js', 'src/utils.js'],
      output: [
        // {
        //   // 产物输出目录
        //   dir: 'dist',
        //   // 以下三个配置项都可以使用这些占位符:
        //   // 1. [name]: 去除文件后缀后的文件名
        //   // 2. [hash]: 根据文件名和文件内容生成的 hash 值
        //   // 3. [format]: 产物模块格式，如 es、cjs
        //   // 4. [extname]: 产物后缀名(带`.`)
        //   // 入口模块的输出文件名
        //   entryFileNames: `[name].js`,
        //   // 非入口模块(如动态 import)的输出文件名
        //   chunkFileNames: 'chunk-[hash].js',
        //   // 静态资源文件输出文件名
        //   assetFileNames: 'assets/[name]-[hash][extname]',
        //   // 产物输出格式，包括`amd`、`cjs`、`es`、`iife`、`umd`、`system`
        //   format: 'cjs',
        //   // 是否生成 sourcemap 文件
        //   sourcemap: true,
        //   // 如果是打包出 iife/umd 格式，需要对外暴露出一个全局变量，通过 name 配置变量名
        //   name: 'MyBundle',
        //   // 全局变量声明
        //   globals: {
        //     // 项目中可以直接用`$`代替`jquery`
        //     jquery: '$',
        //   },
        // },
        {
          dir: 'dist/es',
          format: 'esm',
        },
        {
          dir: 'dist/cjs',
          format: 'cjs',
        },
      ],
      // 对于某些第三方包，有时候我们不想让 Rollup 进行打包，也可以通过 external 进行外部化
      // 在 SSR 构建或者使用 ESM CDN 的场景中，这个配置将非常有用
      // external: ['react', 'react-dom'],
    },
    {
      input: ['src/index.js'],
      output: [
        {
          name: 'Foo',
          dir: 'dist/umd',
          format: 'umd',
        },
        {
          name: 'Foo',
          dir: 'dist/iife',
          format: 'iife',
        },
      ],
    },
  ],
)

import { rollup } from 'rollup'

// 常用 inputOptions 配置
const inputOptions = {
  input: './src/index.js',
}

const outputOptionsList = [
  // 常用 outputOptions 配置
  {
    dir: 'dist-with-build-script/es',
    entryFileNames: `[name].[hash].js`,
    chunkFileNames: 'chunk-[hash].js',
    assetFileNames: 'assets/[name]-[hash][extname]',
    format: 'es',
    sourcemap: true,
    globals: {
      lodash: '_',
    },
  },
  // 省略其它的输出配置
]

async function build() {
  let bundle
  let buildFailed = false

  try {
    // 1. 调用 rollup 生成 bundle 对象
    bundle = await rollup(inputOptions)

    for (const outputOptions of outputOptionsList) {
      // 2. 拿到 bundle 对象，根据每一份输出配置，调用 generate 和 write 方法分别生成和写入产物
      const { output } = await bundle.generate(outputOptions)
      await bundle.write(outputOptions)
    }
  } catch (error) {
    buildFailed = true
    console.error(error)
  }
  if (bundle) {
    // 最后调用 bundle.close 方法结束打包
    await bundle.close()
  }
  process.exit(buildFailed ? 1 : 0)
}

build()

import { watch } from 'rollup'

const watcher = watch({
  // 和 rollup 配置文件中的属性基本一致，只不过多了`watch`配置
  input: './src/index.js',
  output: [
    {
      dir: 'dist-with-watch-script/es',
      format: 'esm',
    },
    {
      dir: 'dist-with-watch-script/cjs',
      format: 'cjs',
    },
  ],
  watch: {
    exclude: ['node_modules/**'],
    include: ['src/**'],
  },
})

// 监听 watch 各种事件
watcher.on('restart', () => {
  console.log('重新构建...')
})

watcher.on('change', (id) => {
  console.log('发生变动的模块id: ', id)
})

watcher.on('event', (e) => {
  if (e.code === 'BUNDLE_END') {
    console.log('打包信息:', e)
  }
})

// build 阶段
const bundle = await rollup.rollup(inputOptions)

// output 阶段
await Promise.all(outputOptions.map(bundle.write))

// end
await bundle.close()

async function build() {
  const rollupBuild = await rollup.rollup({
    input: [resolve(__dirname, 'demo.js')],
  })

  console.log(inspect(rollupBuild, false, 100, true))
}

{
  cache: {
    modules: [
      {
        ast: { ... },
        attributes: {},
        code: "export const foo = 'foo'\n",
        customTransformCache: false,
        dependencies: [],
        id: '/Users/root/code/projects/vite-learning/demos/rollup-startup/src/what-does-build-phase-do/module-foo.js',
        meta: {},
        moduleSideEffects: true,
        originalCode: "export const foo = 'foo'\n",
        originalSourcemap: null,
        resolvedIds: [Object: null prototype] {},
        sourcemapChain: [],
        syntheticNamedExports: false,
        transformDependencies: [],
        transformFiles: undefined
      },
      {
        ast: { ... },
        attributes: {},
        code: "import { foo } from './module-foo'\n\nconsole.log(foo)\n",
        customTransformCache: false,
        dependencies: [
          '/Users/root/code/projects/vite-learning/demos/rollup-startup/src/what-does-build-phase-do/module-foo.js'
        ],
        id: '/Users/root/code/projects/vite-learning/demos/rollup-startup/src/what-does-build-phase-do/demo.js',
        meta: {},
        moduleSideEffects: true,
        originalCode: "import { foo } from './module-foo'\n\nconsole.log(foo)\n",
        originalSourcemap: null,
        resolvedIds: [Object: null prototype] {
          './module-foo': {
            attributes: {},
            external: false,
            id: '/Users/root/code/projects/vite-learning/demos/rollup-startup/src/what-does-build-phase-do/module-foo.js',
            meta: {},
            moduleSideEffects: true,
            resolvedBy: 'rollup',
            syntheticNamedExports: false
          }
        },
        sourcemapChain: [],
        syntheticNamedExports: false,
        transformDependencies: [],
        transformFiles: undefined
      }
    ],
    plugins: [Object: null prototype] {}
  },
  close: [AsyncFunction: close],
  closed: false,
  generate: [AsyncFunction: generate],
  watchFiles: [Getter],
  write: [AsyncFunction: write]
}

async function build() {
  const rollupBuild = await rollup.rollup({
    input: [resolve(__dirname, 'demo.js')],
  })

  const rollupOutput = await rollupBuild.generate({
    format: 'esm',
  })

  console.log(inspect(rollupOutput, false, 100, true))
}

{
  output: [
    {
      exports: [],
      facadeModuleId: '/Users/root/code/projects/vite-learning/demos/rollup-startup/src/what-does-build-phase-do/demo.js',
      isDynamicEntry: false,
      isEntry: true,
      isImplicitEntry: false,
      moduleIds: [
        '/Users/root/code/projects/vite-learning/demos/rollup-startup/src/what-does-build-phase-do/module-foo.js',
        '/Users/root/code/projects/vite-learning/demos/rollup-startup/src/what-does-build-phase-do/demo.js'
      ],
      name: 'demo',
      type: 'chunk',
      dynamicImports: [],
      fileName: 'demo.js',
      implicitlyLoadedBefore: [],
      importedBindings: {},
      imports: [],
      modules: [Object: null prototype] {
        '/Users/root/code/projects/vite-learning/demos/rollup-startup/src/what-does-build-phase-do/module-foo.js': {
          code: [Getter],
          originalLength: 25,
          removedExports: [],
          renderedExports: [ 'foo' ],
          renderedLength: 18
        },
        '/Users/root/code/projects/vite-learning/demos/rollup-startup/src/what-does-build-phase-do/demo.js': {
          code: [Getter],
          originalLength: 53,
          removedExports: [],
          renderedExports: [],
          renderedLength: 17
        }
      },
      referencedFiles: [],
      code: "const foo = 'foo';\n\nconsole.log(foo);\n",
      map: null,
      preliminaryFileName: 'demo.js',
      sourcemapFileName: null
    }
  ]
}