rollup

使用Rollup对TS文件进行打包

TS VUE

Posted by huangqing on July 1, 2021

Rollup

rollup是一款小巧的javascript模块打包工具，更适合于库应用的构建工具;可以将小块代码编译成大块复杂的代码，基于ES6 modules,自动进行 Tree-shaking,它可以让你的 bundle 最小化，有效减少文件请求大小。

使用到的库

npm install typescript rollup-plugin-typescript2 rollup-plugin-terser  --save-dev

其他可能使用到的兼容性的库：

npm install "@rollup/plugin-node-resolve" rollup-plugin-commonjs rollup-plugin-babel --save-dev
  • rollup: rollup核心包
  • rollup-plugin-buble: 类似babel的工具，比babel轻
  • rollup-plugin-typescript2 : 包含编译器错误的typescript的汇总插件,这是对原始的rollup-plugin-typescript的重写，从这个分叉开始并借用,这个版本比原始版本稍慢，但它将打印出typescript语法和语义诊断消息。
  • rollup-plugin-commonjs: 将commonJS 转换成 es6 模块. rollup-plugin-json: 将 json 文件转换为 es6 模块
  • @rollup/plugin-node-resolve: 帮助 rollup 查找外部模块.必须在插件列表中rollup-plugin-typescript2之前，尤其是使用browser: true选项时
  • rollup-plugin-terser: 压缩
  • rollup-plugin-filesize: 显示打包出来的文件大小
  • rollup-plugin-babel :这个插件透明代码，但不改变文件扩展名。尽管Babel插件声称它处理所有文件，但它只查看默认扩展名为.js,.jsx,.es6,.es,.mjs的代码。要解决此问题，请将ts和tsx添加到babel扩展列表中。

rollup.config.js

import { terser } from 'rollup-plugin-terser';
import typescript from 'rollup-plugin-typescript2';

// 定义不需要打包类库的全局变量
const globals = {
  'vue-i18n': 'vue-i18n',
  moment: 'moment',
  vue: 'vue',
  'lodash-es': 'lodash-es',
};

export default {
  input: 'index.ts',
  output: [
    {
      file: 'dist/mylibs.umd.js',
      format: 'umd',
      name: 'mylibs',
      sourcemap: true,
      globals,
    },
    { file: 'dist/mylibs.cjs.js', format: 'cjs', sourcemap: true, globals },
    { file: 'dist/mylibs.esm.js', format: 'esm', sourcemap: true, globals },
  ],
  plugins: [
    typescript({
      removeComments: true,
      // 使用声明生成路径配置
      useTsconfigDeclarationDir: true,
      // 覆盖 tsconfig.json 的配置项
      tsconfigOverride: {
          include: ['src/components/*/*'],
      },
    }),
    terser(),
  ],
  // 不需要打包的类库
  external: ['moment', 'lodash-es', 'vue', 'vue-i18n'],
};

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    // 使用的ES标准
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "types": ["vite/client"],
    // 生成声明文件
    "declaration": true,
    // 声明文件生成到的文件目录
    "declarationDir": "dist/types/",
    "outDir": "./dist/"
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts"]
}
CATALOG
    FRIENDS