我有一个使用 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' 没有被剔除呢?