安装roolup

1
yarn add -D rollup

安装其他插件

1
yarn add -D @rollup/plugin-commonjs rollup-plugin-terser rollup-plugin-typescript2

插件说明：

1
2
3
@rollup/plugin-commonjs：让rollup知道项目用了那些依赖，打包的时候不要忘了
rollup-plugin-terser：压缩代码
rollup-plugin-typescript2：让rollup可以看懂TS代码

rollup配置文件

新建rollup.config.js配置文件

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
// 导入依赖
  const { terser } = require('rollup-plugin-terser')
  const commonjs = require('@rollup/plugin-commonjs')
  const typescript = require('rollup-plugin-typescript2')
  ​
  // tsconfig.json合并选项
  // 一般来说默认使用项目的tsconfig.json，如果有个别需要修改的如下，可以在此修改
  const override = { compilerOptions: { module: 'ESNext' } }
  ​
  module.exports = {
    // 项目入口
    input: 'src/app.ts',
  ​
    // 打包后的出口和设置
    output: {
      file: 'dist/app.min.js',
      format: 'cjs',
      sourcemap: true,
      exports: 'default',
    },
  ​
    // 使用的插件
    // 注意，这里的插件使用是有顺序的，先把ts编译为js，然后查找依赖，最后压缩
    plugins: [typescript({ tsconfig: './tsconfig.json', tsconfigOverride: override }), commonjs(), terser()],
  }

package.json配置

1
"rollup:build": "rollup -c"  //-c表示按照配置文件运行

运行命令

1
yarn rollup:build