使用案例

创建一个typescript项目

yarn add -D rollup @rollup/plugin-typescript typescript

npx tsc --init

• rollup.config.js

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

项目模板

perspective.ts

参考自 perspective.ts 项目，自动从package读取main和moudle

模板功能：

• 代码压缩
• typescript
• babel 编译出es5

输出：ES5

输入：typescript4.x

// js 压缩
import { terser } from "rollup-plugin-terser";
import babel from "@rollup/plugin-babel";
import resolve from "@rollup/plugin-node-resolve";
import typescript from "rollup-plugin-typescript2";

import packageJson from "./package.json";

export default [
  // UMD (for browser script tag based imports)
  {
    input: "./src/index.ts",
    output: [
      {
        file: `dist/${packageJson.name}.min.js`,
        format: "umd",
        name: "Perspective",
        esModule: false,
        sourcemap: true,
      },
    ],
    plugins: [
      resolve(),
      typescript({
        tsconfigOverride: { compilerOptions: { declaration: false } },
      }),
      babel({
        babelHelpers: "bundled",
      }),
      terser(),
    ],
  },
    
  // 根据packageJson的 module字段，导出 ES5 或 cjs 文件，供 nodejs 使用
  // ESM (for ES module imports) and CJS (for node.js)
  {
    input: "./src/index.ts",
    output: [
      {
        file: packageJson.main,
        format: "cjs",
        exports: "named",
        sourcemap: true,
      },
      {
        file: packageJson.module,
        format: "esm",
        sourcemap: true,
      },
    ],
    plugins: [resolve(), typescript()],
  },
];

node + rollup + ts

参考自：https://juejin.cn/post/6844904035309322254

import path from 'path'
import rollupTypescript from 'rollup-plugin-typescript2'
import babel from 'rollup-plugin-babel'
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import { eslint } from 'rollup-plugin-eslint'
import { DEFAULT_EXTENSIONS } from '@babel/core'

import pkg from './package.json'

const paths = {
  input: path.join(__dirname, '/src/index.ts'),
  output: path.join(__dirname, '/lib'),
}

// rollup 配置项
const rollupConfig = {
  input: paths.input,
  output: [
    // 输出 commonjs 规范的代码
    {
      file: path.join(paths.output, 'index.js'),
      format: 'cjs',
      name: pkg.name,
    },
    // 输出 es 规范的代码
    {
      file: path.join(paths.output, 'index.esm.js'),
      format: 'es',
      name: pkg.name,
    },
  ],
  // external: ['lodash'], // 指出应将哪些模块视为外部模块，如 Peer dependencies 中的依赖
  // plugins 需要注意引用顺序
  plugins: [
    // 验证导入的文件
    eslint({
      throwOnError: true, // lint 结果有错误将会抛出异常
      throwOnWarning: true,
      include: ['src/**/*.ts'],
      exclude: ['node_modules/**', 'lib/**', '*.js'],
    }),

    // 使得 rollup 支持 commonjs 规范，识别 commonjs 规范的依赖
    commonjs(),

    // 配合 commnjs 解析第三方模块
    resolve({
      // 将自定义选项传递给解析插件
      customResolveOptions: {
        moduleDirectory: 'node_modules',
      },
    }),
    rollupTypescript(),
    babel({
      runtimeHelpers: true,
      // 只转换源代码，不运行外部依赖
      exclude: 'node_modules/**',
      // babel 默认不支持 ts 需要手动添加
      extensions: [
        ...DEFAULT_EXTENSIONS,
        '.ts',
      ],
    }),
  ],
}

export default rollupConfig