【九月打卡】第14天 添加 rollup 配置并完成打包

课程名称：web前端架构师

课程章节：第13周 第四章

主讲老师：张轩

课程内容：添加 rollup 配置并完成打包

rollup

rollup 的使用可以参考 https://www.rollupjs.com/

下面简单看下 rollup 的使用，直接使用配置文件,使用起来非常简单

// rollup.config.js
export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  }
}

插件是 Rollup 唯一的拓展方式 ，例如我们要导入.vue 文件，就需要导入 rollup-plugin-vue。https://github.com/vuejs/rollup-plugin-vue

rollup 插件 https://github.com/rollup/awesome

下面开始配置使用 rollup 使它支持打包我们实现的组件

首先我们可以先实现一个简单的组件

<script setup lang="ts">
const a:number = 100
</script>
<template>
  <div>{{ a }}</div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

支持 vue 文件

https://github.com/vuejs/rollup-plugin-vue

pnpm i rollup-plugin-vue -D

支持 sass 文件

https://github.com/thgh/rollup-plugin-scss

pnpm i rollup-plugin-scss -D

此外还需要安装 sass 作为编译器

pnpm i sass -D

安装 postcss

pnpm i rollup-plugin-postcss

配置浏览器兼容

pnpm i autoprefixer -D

在 package.json 文件中配置

{
 "browserslist": [
   "> 1%",
   "last 2 versions"
 ]
}

在 rollup.config.js 文件中配置

import autoprefixer from 'autoprefixer'
import postcss from 'rollup-plugin-postcss'
export default {
  input: 'src/App.vue',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    postcss({
      plugins: [autoprefixer()]
    }),
    extract: true
  ]
}

使用了 postcss 就可以不安装 rollup-plugin-scss 这个插件，不需要任何配置，只需要安装过 sass 编译器即可

推荐使用 postcss 的时候就不要使用 rollup-plugin-scss 这个插件了，因为它生效了，postcss 里的某些选项就不生效了，比如使用了 rollup-plugin-scss 后， 浏览器兼容代码 autoprefixer不会生效了

支持图片

https://github.com/rollup/plugins/tree/master/packages/image

pnpm i @rollup/plugin-image -D

支持typescript

pnpm i rollup-plugin-typescript2 typescript tslib -D

这里需要注意的是不要使用官方提供的 @rollup/plugin-typescript 插件，它与 vue 插件不兼容， vue 官方和 element-plus 使用的都是 rollup-plugin-typescript2 这个插件

文档地址 https://github.com/ezolenko/rollup-plugin-typescript2

打包使用的 ts 配置文件可能与我们开发组件所使用的 ts 配置有所区别，所以不要直接去修改 tsconfig.json 文件

这个插件支持配置 tsconfigOverride 用来覆盖 tsconfig.json 配置文件

const overrides = {
  compilerOptions: {
    declaration: true
  },
  include: ['src/App.vue']
}
export default {
  plugins: [
    typescript({
      tsconfigOverride: overrides
    })
}

下面是完整的 rollup 配置文件

import vue from 'rollup-plugin-vue'
import typescript from 'rollup-plugin-typescript2'
import img from '@rollup/plugin-image'
import autoprefixer from 'autoprefixer'
import postcss from 'rollup-plugin-postcss'

const overrides = {
  compilerOptions: {
    declaration: true
  },
  include: ['src/App.vue']
}
export default {
  input: 'src/App.vue',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    vue(),
    typescript({
      tsconfigOverride: overrides
    }),
    img(),
    postcss({
      plugins: [autoprefixer()],
      extract: true
    })
  ]
}