alexiusll 的博客
0%

rollup 使用整理 v1

发表于 分类于
本文字数： 2.2k 阅读时长 ≈ 2 分钟

Rollup是一个JavaScript的模块绑定器，它将一小段代码编译成更大更复杂的东西，比如库或应用程序。

它使用了JavaScript ES6版本中包含的代码模块的新的标准化格式，而不是以前的特殊解决方案，如CommonJS和AMD。

ES模块可以让您自由和无缝地组合来自您喜欢的库的最有用的单独函数。

官方网站

文档：

https://rollupjs.org/guide/en/

常用指令

1
2
3
4
5
6
7
# 查看帮助
$ rollup --help

# 使用配置文件来编译
# -c, --config <filename>     Use this config file (if argument is used but value
#                              is unspecified, defaults to rollup.config.js)
$ rollup -c

常用插件

  • rollup-plugin-typescript2
  • @rollup/plugin-node-resolve
  • rollup-plugin-postcss
  • rollup-plugin-terser
  • @rollup/plugin-commonjs
  • rollup-plugin-cleaner
  • rollup-plugin-string

配置文件

最简化的配置文件 rollup.config.js

1
2
3
4
5
6
7
export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  }
};

这里会生成 CommonJS 的代码

所有的可配置项

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
// rollup.config.js

// can be an array (for multiple inputs)
export default {
  // core input options
  external,
  input, // conditionally required
  plugins,

  // advanced input options
  cache,
  onwarn,
  preserveEntrySignatures,
  strictDeprecations,

  // danger zone
  acorn,
  acornInjectPlugins,
  context,
  moduleContext,
  preserveSymlinks,
  shimMissingExports,
  treeshake,

  // experimental
  experimentalCacheExpiry,
  perf,

  // required (can be an array, for multiple outputs)
  output: {
    // core output options
    dir,
    file,
    format, // required
    globals,
    name,
    plugins,

    // advanced output options
    assetFileNames,
    banner,
    chunkFileNames,
    compact,
    entryFileNames,
    extend,
    footer,
    hoistTransitiveImports,
    inlineDynamicImports,
    interop,
    intro,
    manualChunks,
    minifyInternalExports,
    outro,
    paths,
    preserveModules,
    preserveModulesRoot,
    sourcemap,
    sourcemapExcludeSources,
    sourcemapFile,
    sourcemapPathTransform,
    validate,

    // danger zone
    amd,
    esModule,
    exports,
    externalLiveBindings,
    freeze,
    indent,
    namespaceToStringTag,
    noConflict,
    preferConst,
    sanitizeFileName,
    strict,
    systemNullSetters
  },

  watch: {
    buildDelay,
    chokidar,
    clearScreen,
    skipWrite,
    exclude,
    include
  }
};

多配置文件

1
2
3
4
5
6
7
8
9
10
// rollup.config.js
import defaultConfig from './rollup.default.config.js';
import debugConfig from './rollup.debug.config.js';

export default commandLineArgs => {
  if (commandLineArgs.configDebug === true) {
    return debugConfig;
  }
  return defaultConfig;
};

运行：

rollup –config –configDebug

debug configuration 会被使用