为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打卡】第14天 添加 rollup 配置并完成打包

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

2022.09.18 23:53 126浏览

课程名称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-vuehttps://github.com/vuejs/rollup-plugin-vue

下面开始配置使用 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 文件

pnpm i rollup-plugin-vue -D

支持 sass 文件

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不会生效了

支持图片

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 这个插件

打包使用的 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
    })
  ]
}

图片描述

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Python工程师
手记
粉丝
0
获赞与收藏
0

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

146篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消