rollup 打包 ts 库,外部库为何无法剔除?

我有一个使用 rollup 打包 ts 的项目:

依赖如下:

{
  "name": "my-lib",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "dits/index.js",
  "types": "dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.js"
    },
    "./math": {
      "import": "./dist/math/index.js"
    },
    "./utils": {
      "import": "./dist/utils/index.js"
    },
    "./dist/style.css": {
      "import": "./dist/style.css"
    }
  },
  "scripts": {
    "test": "vitest",
    "build": "rollup --config rollup.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@rollup/plugin-node-resolve": "^15.3.0",
    "@rollup/plugin-replace": "^6.0.1",
    "@rollup/plugin-typescript": "^12.1.1",
    "glob": "^11.0.0",
    "rollup": "^4.27.3",
    "rollup-plugin-delete": "^2.1.0",
    "rollup-plugin-esbuild-minify": "^1.1.2",
    "rollup-plugin-license": "^3.5.3",
    "rollup-plugin-scss": "^4.0.0",
    "sass": "^1.81.0",
    "typescript": "~5.6.3",
    "vitest": "^2.1.5"
  },
  "dependencies": {
    "dayjs": "^1.11.13",
    "ol": "^10.2.1",
    "tslib": "^2.8.1"
  }
}

rollup.config.js 如下:

/*
 * @Author      : ZhouQiJun
 * @Date        : 2024-11-22 21:57:27
 * @LastEditors : ZhouQiJun
 * @LastEditTime: 2024-11-23 03:52:42
 * @Description : rollup 配置
 */
import resolve from '@rollup/plugin-node-resolve'
import { globSync } from 'glob'
import path from 'node:path'
import { fileURLToPath } from 'node:url'
import del from 'rollup-plugin-delete'
import replace from '@rollup/plugin-replace'
import { readFileSync } from 'fs'
import license from 'rollup-plugin-license'
import { dirname } from 'node:path'

import typescript from '@rollup/plugin-typescript'
import { minify } from 'rollup-plugin-esbuild-minify'
import scss from 'rollup-plugin-scss'

const pkg = JSON.parse(readFileSync('./package.json', 'utf-8'))

const input = geneInput()

console.log(input)

const isProd = process.env.IS_PROD === 'true'

console.log({ isProd })

const __dirname = dirname(fileURLToPath(import.meta.url))

const plugins = [
  resolve(),
  del({ targets: 'dist/*' }),
  replace({
    preventAssignment: true,
    __version__: pkg.version,
    __buildTime__: new Date().toLocaleString(),
  }),
  scss({
    // sourceMap: true,
    exclude: ['node_modules/**'],
    outputStyle: 'compressed',
  }),
  typescript(),
  // license({
  //   banner: {
  //     content: {
  //       file: path.join(__dirname, 'LICENSE'),
  //     },
  //   },
  // }),
  // minify(), // NOTE 顺序很重要,这里要放在最后 !!!
  // 从上到下执行
]

/**
 * https://rollupjs.org/command-line-interface/#config-intellisense
 * @type {import('rollup').RollupOptions}
 */
export default {
  input,
  external: ['dayjs', 'ol/dist/ol.css', 'ol'], // FIXME 不生效!!!
  output: {
    format: 'esm',
    dir: 'dist',
    sourcemap: true,
    compact: true, // TODO 压缩不起效果
    assetFileNames: 'style[extname]',
  },
  plugins,
}

function geneInput() {
  const input = Object.fromEntries(
    globSync('src/**/*.ts')
      .map((file) => {
        // 这里将删除 `src/` 以及每个文档的扩展名。
        // 因此,例如 src/nested/foo.js 会变成 nested/foo
        const end = file.length - path.extname(file).length
        const key = path.relative('src', file.slice(0, end))
        // 这里可以将相对路径扩展为绝对路径,例如
        // src/nested/foo 会变成 /project/src/nested/foo.js
        const filePath = fileURLToPath(new URL(file, import.meta.url))
        return [key, filePath]
      })
      .filter((item) => !item[0].endsWith('.test')) // 过滤测试文件
  )
  return input
}

external 配置了剔除的模块。

tsconfig.json :

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "ESNext",
    "moduleResolution": "node",
    "declaration": true,
    "sourceMap": true,
    "outDir": "dist",
    "rootDir": "src",
    "strict": true,
    "esModuleInterop": true,
    "noImplicitOverride": true,
    "importHelpers": true,
    "noUnusedLocals": true,
    "resolveJsonModule": true,
    "useUnknownInCatchVariables": false,
    // "allowSyntheticDefaultImports": true,
    "typeRoots": ["./types", "*.d.ts", "./node_modules/@types"]
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

index.ts 引入外部样式:

import { Map } from 'ol'
import dayjs from 'dayjs' // 第三方库

import 'ol/dist/ol.css'// 外部样式

export function format(input: string): string {
  return dayjs(input).format('YYYY-MM-DD HH:mm:ss')
}

export function setupGis(container: string | HTMLElement, options: Map): Map {
  return new Map({
    target: container,
    ...options,
  })
}

打包输出:

import { Map } from 'ol'
import dayjs from 'dayjs'
import 'ol/dist/ol.css'
function format(input) {
  return dayjs(input).format('YYYY-MM-DD HH:mm:ss')
}
function setupGis(container, options) {
  return new Map(Object.assign({ target: container }, options))
}
export { format, setupGis } //# sourceMappingURL=index.js.map

为何 dayjs 和 import 'ol/dist/ol.css' 没有被剔除呢?

阅读 146
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Microsoft
子站问答
访问
宣传栏