记一次rollup打包过程

Administrator 0 阅读 博客

安装roolup

yarn add -D rollup

安装其他插件

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

插件说明:

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

rollup配置文件

新建rollup.config.js配置文件

// 导入依赖
  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配置

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

运行命令

yarn rollup:build