Rollup打包前端组件库

插件安装

rollup的安装【全局安装】: npm install -g rollup

commonjs格式(很多第三库使用该格式)处理: npm install @rollup/plugin-commonjs --save-dev

json文件处理: npm install @rollup/plugin-json --save-dev

node-resolve第三方库路径处理: npm install @rollup/plugin-node-resolve --save-dev

typescript格式处理:npm install rollup-plugin-typescript2 --save-dev

sass样式处理:npm install rollup-plugin-sass --save-dev

忽略掉"dependencies"与"peerdependencies"的依赖,不对它们进行打包:npm install --save-dev rollup-plugin-exclude-dependencies-from-bundle

代码压缩: npm install rollup-plugin-terser;

兼容环境: npm install @rollup/plugin-replace(用来在插件打包时,将 process.env.NODE_DEV 替换成 字符串,避免在浏览器引入的时候.并没有NODE环境而报异常.)

别名的处理的插件: @rollup/plugin-alias npm地址:www.npmjs.com/package/@ro… PS:不含ts文件的别名处理.ts的别名直接在TS中配置即可.

样式文件引入

必须将样式文件引入到打包文件入口中.rollup-plugin-sass插件才会对它进行特殊处理. 但仅支持相对路径.@配置的路径别名,还未找到解决方案.

配置文件rollup.config.js

import typescript from "rollup-plugin-typescript2"
import { nodeResolve } from "@rollup/plugin-node-resolve"
import commonjs from "@rollup/plugin-commonjs"
import json from "@rollup/plugin-json"
import excludeDependencies from "rollup-plugin-exclude-dependencies-from-bundle"
import sass from "rollup-plugin-sass"
// 用来在插件打包时,将 process.env.NODE_DEV 替换成 字符串,避免在浏览器引入的时候.并没有NODE环境而报异常.
import replace from "@rollup/plugin-replace"
// 压缩代码的插件
import { terser } from "rollup-plugin-terser"
const path = require('path')
// ts 的配置文件,文件内容与tsconfig.json配置相同
const overrides = {
  compilerOptions: {
    "declaration": true,
  },
  // 要编译的文件夹
  "include": ["src/plugin/TypeScriptSpring"],
  "exclude": []
}

const config = {
  //入口文件地址
  input: path.resolve(__dirname, './src/plugin/index.ts'),
  output: [{
    name: 'typescriptSpring',
    //生成文件位置
    file: 'dist/index.js',
    //生成文件格式
    format: 'es'
  }],
  plugins: [
    nodeResolve(),
    commonjs(),
    json(),
    // ts打包时,默认调用的是根目录下的【tsconfig.json】配置文件,在此处可以进行一些修改,覆盖掉默认配置文件
    typescript({ tsconfigOverride: overrides }),
    excludeDependencies(),
    // sass({ output: 'dist/index.css' }),
    replace({
      'process.env.NODE_ENV': JSON.stringify('production'),
      // 在某些情况下,还可以替换下该找一些字符串.
      // __buildDate: () => JSON.stringify(new Date()),
      // __buildVersion: 15
    }),
    terser()
  ],
  // 配置不需要打包的内容【由插件使用者项目提供】,单个配置麻烦,直接由插件【rollup-plugin-exclude-dependencies-from-bundle】自动配置
  // external: ['react', 'react-dom']
}

export default config

新增:别名处理

补充:使用@表示src根路径绝对路径.

别名的处理的插件: @rollup/plugin-alias npm地址:www.npmjs.com/package/@ro… PS:不含ts文件的别名处理.ts的别名直接在TS中配置即可.

然后执行 npm run build-es,即可完成打包.