1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

// 安装 esbuild
// pnpm add -D esbuild

import * as esbuild from 'esbuild'

// 转换 TypeScript → JavaScript
const result = await esbuild.transform(`
  const add = (a: number, b: number): number => a + b
  console.log(add(1, 2))
`, {
  loader: 'ts',
  format: 'esm',
})

console.log(result.code)
// 输出：
// const add = (a, b) => a + b;
// console.log(add(1, 2));

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// 打包多个文件
await esbuild.build({
  entryPoints: ['src/main.ts', 'src/utils.ts'],
  bundle: true,
  outdir: 'dist',
  format: 'esm',
  loader: {
    '.ts': 'ts',
    '.tsx': 'tsx',
  },
  minify: true,
  sourcemap: true,
  define: {
    '__VERSION__': '"1.0.0"',
  },
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

const result = await esbuild.build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  outfile: 'dist/bundle.js',
  minify: false,
  sourcemap: true,
  target: ['es2020'],
  platform: 'browser',  // 'browser' | 'node' | 'neutral'
  format: 'esm',         // 'esm' | 'cjs' | 'iife'
})

console.log(result.outputFiles)  // 输出文件信息

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// ES Module 的 import/export 是编译时确定的
// 这意味着 Rollup 可以在不执行代码的情况下分析依赖

// main.js
import { add } from './math.js'
console.log(add(1, 2))

// math.js
export function add(a, b) { return a + b }
export function subtract(a, b) { return a - b }  // ← Rollup 分析出没被用到，删除

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

// 一个简单的 Rollup 插件
function myPlugin(options = {}) {
  return {
    name: 'my-plugin',  // 插件名称（必须唯一）
    
    // 解析模块 ID（import 语句时调用）
    resolveId(source, importer) {
      // 处理自定义路径
      if (source.startsWith('my:')) {
        return source.slice(3)  // 返回解析后的路径
      }
      return null  // 返回 null 表示不处理，使用默认解析
    },
    
    // 加载模块（返回模块内容）
    load(id) {
      if (id === 'virtual:module') {
        return `export const message = 'Hello from virtual module!'`
      }
      return null  // 返回 null 表示不处理
    },
    
    // 转换代码
    transform(code, id) {
      if (id.endsWith('.custom')) {
        // 转换 .custom 文件为 JavaScript
        return {
          code: transformCustomToJS(code),
          map: generateSourceMap(),
        }
      }
      return null  // 返回 null 表示不处理
    },
    
    // 生成 bundle 之前
    buildStart() {
      // 可以在这里初始化一些东西
    },
    
    // 生成 bundle 之后
    generateBundle(options, bundle) {
      // 可以在这里修改输出文件
      // 比如添加额外的文件
    },
  }
}

1
2
3
4
5
6

// Rollup 会自动识别 dynamic import 进行分割
// main.js
import { add } from './math.js'
import('./utils.js').then(utils => {
  console.log(utils.format())
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // 把 vue 生态打包到一起
          'vue-vendor': ['vue', 'vue-router', 'pinia'],
          // 把大库单独打包
          'lodash': ['lodash-es'],
        },
      },
    },
  },
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// ES Module (es)
import { add } from './math.js'

// CommonJS (cjs)
const { add } = require('./math.js')
module.exports = { add }

// UMD (umd)
(function(root, factory) {
  if (typeof module === 'object' && module.exports) {
    module.exports = factory()
  } else {
    root.MyLib = factory()
  }
}(this, function() {
  return { add: function(a, b) { return a + b } }
}))

// IIFE (iife)
var MyLib = (function() {
  'use strict'
  return { add: function(a, b) { return a + b } }
})()

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// Vite 开发时的 esbuild 配置
export default defineConfig({
  esbuild: {
    // JSX 配置
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
    
    // TypeScript 配置
    target: 'esnext',
    
    // 日志级别
    logLevel: 'info',
    
    // 定义全局变量
    define: {
      __DEBUG__: 'false',
    },
  },
  
  optimizeDeps: {
    // esbuild 预构建选项
    include: ['vue', 'vue-router'],
    esbuildOptions: {
      target: 'esnext',
    },
  },
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

// Vite 生产时的 Rollup 配置
export default defineConfig({
  build: {
    target: 'esnext',
    minify: 'terser',  // 使用 terser 压缩
    
    rollupOptions: {
      input: {
        main: path.resolve(__dirname, 'index.html'),
      },
      output: {
        entryFileNames: 'js/[name]-[hash].js',
        chunkFileNames: 'js/[name]-[hash].js',
        assetFileNames: 'assets/[name]-[hash][extname]',
        
        manualChunks: {
          'vue-vendor': ['vue', 'vue-router'],
        },
      },
    },
  },
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// Vite 8 的打包器配置入口是 rolldownOptions
export default defineConfig({
  build: {
    // Rolldown 兼容 Rollup 插件 API；旧版 Vite 使用 build.rollupOptions
    rolldownOptions: {
      output: {
        entryFileNames: 'js/[name]-[hash].js',
        chunkFileNames: 'js/[name]-[hash].js',
      },
    },
  },
})