From e1e8cf0b11addea679d088a17d5f1c082eb6a427 Mon Sep 17 00:00:00 2001 From: hongqiongxing Date: Mon, 17 Apr 2023 14:47:18 +0800 Subject: [PATCH] =?UTF-8?q?global:=20=E5=90=8C=E6=AD=A53.0.1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts/commands/build/index.js | 4 +- scripts/context.js | 3 + scripts/index.d.ts | 247 ++++++++++++++++++++++++++++++++ scripts/utils/config.js | 6 + 4 files changed, 259 insertions(+), 1 deletion(-) create mode 100644 scripts/index.d.ts diff --git a/scripts/commands/build/index.js b/scripts/commands/build/index.js index 927b9371..c9a0b954 100644 --- a/scripts/commands/build/index.js +++ b/scripts/commands/build/index.js @@ -87,7 +87,9 @@ async function build (target) { replace: { ...replace, __DEV__: dev }, banner, cssPreprocessorOptions: config.cssPreprocessorOptions, - plugins: config.plugins + plugins: config.plugins, + externals: config.externals, + visualizer: config.visualizer }) cfg.build.minify = 'terser' cfg.build.terserOptions = { module: f.format === 'es', output: { comments: false } } diff --git a/scripts/context.js b/scripts/context.js index 91f9af81..ec982eaf 100644 --- a/scripts/context.js +++ b/scripts/context.js @@ -126,6 +126,9 @@ function createContext () { runPostPublish (name, pkg) { if (config.onPostPublish) return config.onPostPublish(pkg, name) }, + /** + * @returns {import('.').Config} + */ getConfig (pkg) { if (!pkg) return config return Object.assign({}, config, pkg.libd) diff --git a/scripts/index.d.ts b/scripts/index.d.ts new file mode 100644 index 00000000..779c5453 --- /dev/null +++ b/scripts/index.d.ts @@ -0,0 +1,247 @@ +/* eslint-disable @typescript-eslint/ban-types */ +import type { UserConfig } from 'vite' +import type { PluginVisualizerOptions } from 'rollup-plugin-visualizer' +import { PluginItem } from "@babel/core"; + +export declare interface Config { + /** + * 同 vite 的 css.preprocessorOptions 配置 + * @see https://cn.vitejs.dev/config/#css-preprocessoroptions + */ + cssPreprocessorOptions?: Record; + /** + * ES 格式打包配置，设置为 false 将关闭 + */ + es?: { + /** + * 是否打 es 包，输出到 es 目录 + * @default true + */ + enabled: boolean; + /** + * 打包保留原始 less 或 sass 文件 + * @default true + */ + keepCss: boolean; + /** + * 保留 dev 代码，__DEV__ 会转换成 process.env.NODE_ENV !== 'production'。 + * 该值为 false 会删除 dev 代码。 + * @default true + */ + keepDev: boolean; + } | false; + /** + * 是否输出 typescript 类型文件，输出到 es 目录 + * @default true + */ + declaration?: boolean; + /** + * 是否将输出类型文件打成单个类型文件，输出到 dist 目录 + * 默认文件名为 'index.d.ts' + * @default false + */ + bundleDts?: boolean | string; + /** + * umd 格式全局变量名，用户可以通过 `window.{umdName}` 访问到 SDK 暴露出的对象 + */ + umdName?: string; + /** + * umd 格式的全局依赖名映射，适用于 peerDependencies 依赖。 + * 例如项目有个 pkg1 的 peerDependencies 依赖，这个依赖的 umdName 为 Pkg1， + * 那么这个配置可以配置为 { pkg1: 'Pkg1' }。 + * 如果是 monorepo 并且依赖在一个 packages 目录下则不用手动配置，libd 会自己找到对应包的 umdName + */ + umdGlobals?: Record; + /** + * 本地开发时，是否需要 sourcemap。 + * @default true + */ + devSourceMap?: boolean; + /** + * 打包时是否输出 sourcemap。 + * @default true + */ + prodSourceMap?: boolean; + /** + * 代码语法降级配置，是否用 babel 进行语法降级，是否自动导入 polyfill。 + * 如果开启自动导入 polyfill 则需要自己安装 core-js。 + * 语法降级程度和要导入哪些 polyfill 可以使用 package.json 中的 browserslist 字段进行配置。 + */ + legacy?: { + /** + * 是否启用。 + * @default true + */ + enabled?: boolean; + /** + * 是否自动导入 polyfill。 + * 启用该选项需要自己安装 core-js。 + * @default false + */ + polyfills?: boolean; + /** + * 对 es 格式，是否使用 babel 语法降级。 + * @default false + */ + esEnabled?: boolean; + /** + * 对 es 格式，是否自动导入 polyfill。 + * @default false + */ + esPolyfills?: boolean; + /** + * 需要被 babel 转义排除的包 + */ + exclude?: string | RegExp | (string | RegExp)[]; + /** + * 需要被 babel 转义包含的包 + */ + include?: string | RegExp | (string | RegExp)[]; + /** + * 使用transformRuntime转义代码，默认为true + */ + transformRuntime?: boolean; + /** + * 传入给babel使用的插件列表 + */ + plugins?: PluginItem[] | null | undefined; + }, + /** + * 自定义任意打包，输出目录为 dist， + * 默认会有一个 umd 的打包，设置为 false 将关闭 + */ + buildFormats?: (({ + /** + * 打包的格式 + */ + format?: 'es' | 'cjs' | 'umd' | 'iife'; + /** + * 全局变量名，可用来覆盖默认的 umdName 配置 + */ + name?: string; + /** + * 入口文件名，如 index2.js + */ + input?: string; + /** + * 输出的文件名。 + * @default 'index.${format}.min.js' + */ + output?: string; + /** + * 输出的 css 文件名。 + * @default 'index.${format}.min.css' + */ + outputCss?: string; + /** + * 是否是浏览器环境。如果为 true 咋会把所有依赖都打进去，否则作为外部依赖。 + * @default true + */ + browser?: boolean; + /** + * 是否启用语法降级，用于覆盖外部 legacy.enabled 配置 + */ + legacy?: boolean; + /** + * 是否自动导入 polyfill，用于覆盖外部 legacy.polyfills 配置 + */ + polyfills?: boolean; + /** + * 是否再打包 dev 版本代码。 + * 如果为 true 会根据 __DEV__ + * 打包 'index.${format}.dev.min.js' + * 和 `index.${format}.prod.min.js` 版本 + * @default false + */ + keepDev?: boolean; + } | string)[]) | false; + /** + * dev 服务器配置 + * @see https://cn.vitejs.dev/config/#server-host + */ + server: UserConfig['server'], + /** + * vite 插件 + * @see https://cn.vitejs.dev/config/#plugins + */ + plugins: UserConfig['plugins']; + /** + * worker构建时使用的配置 + * @see https://cn.vitejs.dev/config/worker-options + */ + worker?: UserConfig['worker']; + /** + * 关联的本地外部项目，例如 SDK 依赖一个外部包。但是又不想用 node_modules 下的代码， + * 想直接引用本地的代码。可以使用该配置将外部项目加入到进来。 + * 例如 ['../pkg1']。这个 pkg1 是一个外部的 libd 项目。 + */ + projects?: string[]; + /** + * 用于替换代码中的全局值。同 vite 的 define 配置 + * 为函数时，参数是 package.json 对象 + */ + replace?: Record | ((pkg?: Record) => Record); + /** + * SDK 的 banner。可以是字符串或函数，函数时第一个参数 package.json 对象，第二是文件夹名 + */ + banner?: string | ((pkg: Record, name?: string) => string); + /** + * svg 是否输出 svg dom 元素。默认为 base64 字符串。 + * import icon from './icon.svg' + * const svgDom = icon() + * @default false + */ + svgDom?: boolean; + /** + * 需要从外部引入的模块，例如： + * ```js + * { + * externals: { + * react: 'React' + * } + * } + * + * ``` + */ + externals?: Record; + /** + * 是否生成UMD bundle后的代码分析结果 (rollup-plugin-visualizer) + * @see https://www.npmjs.com/package/rollup-plugin-visualizer#Options + * @default false + */ + visualizer?: boolean | PluginVisualizerOptions; + /** + * Demo 打包前的钩子，可用于修改 vite 配置 + */ + onPreBuildDemo?: (cfg: UserConfig, pkg: Record | undefined, dir: string) => UserConfig | undefined; + /** + * 打包前的钩子，可用于修改 vite 配置 + */ + onPreBuild?: (cfg: UserConfig, pkg: Record, name: string) => UserConfig | undefined; + /** + * 打包后的钩子 + */ + onPostBuild?: (pkg: Record, name: string) => void; + /** + * dev 前的钩子，可修改 vite 配置 + */ + onPreDev?: (cfg: UserConfig) => UserConfig | undefined; + /** + * dev 后的钩子 + */ + onPostDev?: () => void; + /** + * dev 随着修改不断运行的钩子 + */ + onDevProgress?: () => void; + /** + * npm 包发布前运行的钩子 + */ + onPrePublish?: (pkg: Record, name: string) => void; + /** + * npm 包发布后的钩子 + */ + onPostPublish?: (pkg: Record, name: string) => void; +} + +export declare function defineConfig(config: Config): Config; diff --git a/scripts/utils/config.js b/scripts/utils/config.js index bfa58ed8..fc8b3e28 100644 --- a/scripts/utils/config.js +++ b/scripts/utils/config.js @@ -1,6 +1,8 @@ const path = require('path') const fs = require('fs-extra') const react = require('@vitejs/plugin-react') +const { viteExternalsPlugin } = require('vite-plugin-externals') +const { visualizer: visualizerPlugin } = require('rollup-plugin-visualizer') const { resolveConfig } = require('vite') const legacy = require('./legacy') const ctx = require('../context') @@ -170,6 +172,8 @@ async function getBuildConfig (isDev, cfg = {}, isEs) { } } : undefined, + // Vite Externals + cfg.externals ? viteExternalsPlugin(cfg.externals) : undefined, (isDev || !cfg.legacy) ? undefined : legacy({ needPolyfills: cfg.needPolyfills, exclude: cfg.babelExclude }), isDev ? undefined @@ -193,6 +197,8 @@ async function getBuildConfig (isDev, cfg = {}, isEs) { } } }, + // Rollup Visualizer Plugin + cfg.visualizer && !isDev && !isEs ? visualizerPlugin(typeof cfg.visualizer === 'object' ? cfg.visualizer : undefined) : undefined, ...cfg.plugins ].filter(Boolean), worker: {