diff --git a/build/.eslintrc.js b/build/.eslintrc.js index 0c567a8612..4a3972d5ba 100644 --- a/build/.eslintrc.js +++ b/build/.eslintrc.js @@ -1,5 +1,8 @@ -module.exports = { +/* eslint-disable @typescript-eslint/no-var-requires */ +const { defineConfig } = require('eslint-define-config') + +module.exports = defineConfig({ rules: { 'no-console': 'off', }, -} +}) diff --git a/build/build-info.ts b/build/build-info.ts index 349bd8e4be..9ea67c4091 100644 --- a/build/build-info.ts +++ b/build/build-info.ts @@ -54,3 +54,5 @@ export const buildConfigEntries = Object.entries( export type BuildConfig = typeof buildConfig export type BuildConfigEntries = [Module, BuildInfo][] + +export const target = 'es2018' diff --git a/build/full-bundle.ts b/build/full-bundle.ts index 66ecbe1bde..6c62326ebb 100644 --- a/build/full-bundle.ts +++ b/build/full-bundle.ts @@ -7,18 +7,28 @@ import esbuild from 'rollup-plugin-esbuild' import replace from '@rollup/plugin-replace' import filesize from 'rollup-plugin-filesize' import { parallel } from 'gulp' +import glob from 'fast-glob' +import { camelCase, capitalize } from 'lodash' import { version } from '../packages/element-plus/version' +import { reporter } from './plugins/size-reporter' import { ElementPlusAlias } from './plugins/element-plus-alias' -import { epRoot, epOutput } from './utils/paths' -import { generateExternal, writeBundles } from './utils/rollup' - +import { epRoot, epOutput, localeRoot } from './utils/paths' +import { + formatBundleFilename, + generateExternal, + writeBundles, +} from './utils/rollup' import { withTaskName } from './utils/gulp' +import { EP_BRAND_NAME } from './utils/constants' +import { target } from './build-info' -export const buildFull = (minify: boolean) => async () => { +const banner = `/*! ${EP_BRAND_NAME} v${version} */\n` + +async function buildFullEntry(minify: boolean) { const bundle = await rollup({ input: path.resolve(epRoot, 'index.ts'), plugins: [ - await ElementPlusAlias(), + ElementPlusAlias(), nodeResolve({ extensions: ['.mjs', '.js', '.json', '.ts'], }), @@ -30,7 +40,7 @@ export const buildFull = (minify: boolean) => async () => { esbuild({ minify, sourceMap: minify, - target: 'es2018', + target, }), replace({ 'process.env.NODE_ENV': JSON.stringify('production'), @@ -42,11 +52,14 @@ export const buildFull = (minify: boolean) => async () => { ], external: await generateExternal({ full: true }), }) - const banner = `/*! Element Plus v${version} */\n` await writeBundles(bundle, [ { format: 'umd', - file: path.resolve(epOutput, `dist/index.full${minify ? '.min' : ''}.js`), + file: path.resolve( + epOutput, + 'dist', + formatBundleFilename('index.full', minify, 'js') + ), exports: 'named', name: 'ElementPlus', globals: { @@ -59,7 +72,8 @@ export const buildFull = (minify: boolean) => async () => { format: 'esm', file: path.resolve( epOutput, - `dist/index.full${minify ? '.min' : ''}.mjs` + 'dist', + formatBundleFilename('index.full', minify, 'mjs') ), sourcemap: minify, banner, @@ -67,6 +81,57 @@ export const buildFull = (minify: boolean) => async () => { ]) } +async function buildFullLocale(minify: boolean) { + const files = await glob(`${path.resolve(localeRoot, 'lang')}/*.ts`, { + absolute: true, + }) + return Promise.all( + files.map(async (file) => { + const filename = path.basename(file, '.ts') + const name = capitalize(camelCase(filename)) + + const bundle = await rollup({ + input: file, + plugins: [ + esbuild({ + minify, + sourceMap: minify, + target, + }), + filesize({ reporter }), + ], + }) + await writeBundles(bundle, [ + { + format: 'umd', + file: path.resolve( + epOutput, + 'dist/locale', + formatBundleFilename(filename, minify, 'js') + ), + exports: 'named', + name: `ElementPlusLocale${name}`, + sourcemap: minify, + banner, + }, + { + format: 'esm', + file: path.resolve( + epOutput, + 'dist/locale', + formatBundleFilename(filename, minify, 'mjs') + ), + sourcemap: minify, + banner, + }, + ]) + }) + ) +} + +export const buildFull = (minify: boolean) => async () => + Promise.all([buildFullEntry(minify), buildFullLocale(minify)]) + export const buildFullBundle = parallel( withTaskName('buildFullMinified', buildFull(true)), withTaskName('buildFull', buildFull(false)) diff --git a/build/gulpfile.ts b/build/gulpfile.ts index ae74bc8f58..1df445136a 100644 --- a/build/gulpfile.ts +++ b/build/gulpfile.ts @@ -3,15 +3,12 @@ import { mkdir, copyFile } from 'fs/promises' import { copy } from 'fs-extra' import { series, parallel } from 'gulp' import { run } from './utils/process' -import { withTaskName } from './utils/gulp' +import { runTask, withTaskName } from './utils/gulp' import { buildOutput, epOutput, epPackage, projRoot } from './utils/paths' import { buildConfig } from './build-info' import type { TaskFunction } from 'gulp' import type { Module } from './build-info' -const runTask = (name: string) => - withTaskName(name, () => run(`pnpm run build ${name}`)) - export const copyFiles = () => Promise.all([ copyFile(epPackage, path.join(epOutput, 'package.json')), diff --git a/build/modules.ts b/build/modules.ts index 530b7efc22..a855ca3a4c 100644 --- a/build/modules.ts +++ b/build/modules.ts @@ -11,7 +11,7 @@ import { ElementPlusAlias } from './plugins/element-plus-alias' import { generateExternal, writeBundles } from './utils/rollup' import { excludeFiles } from './utils/pkg' import { reporter } from './plugins/size-reporter' -import { buildConfigEntries } from './build-info' +import { buildConfigEntries, target } from './build-info' import type { OutputOptions } from 'rollup' export const buildModules = async () => { @@ -25,7 +25,7 @@ export const buildModules = async () => { const bundle = await rollup({ input, plugins: [ - await ElementPlusAlias(), + ElementPlusAlias(), css(), vue({ target: 'browser' }), nodeResolve({ @@ -34,7 +34,7 @@ export const buildModules = async () => { commonjs(), esbuild({ sourceMap: true, - target: 'es2018', + target, }), filesize({ reporter }), ], diff --git a/build/plugins/element-plus-alias.ts b/build/plugins/element-plus-alias.ts index 40140f49aa..9df66e79e5 100644 --- a/build/plugins/element-plus-alias.ts +++ b/build/plugins/element-plus-alias.ts @@ -1,16 +1,14 @@ import { EP_PKG, EP_PREFIX } from '../utils/constants' -import { getDistPackages } from '../utils/pkg' import type { Plugin } from 'rollup' -export async function ElementPlusAlias(): Promise { - const pkgs = await getDistPackages() +export function ElementPlusAlias(): Plugin { + const THEME_CHALK = `${EP_PREFIX}/theme-chalk` return { name: 'element-plus-alias-plugin', resolveId(id, importer, options) { if (!id.startsWith(EP_PREFIX)) return - const THEME_CHALK = `${EP_PREFIX}/theme-chalk` if (id.startsWith(THEME_CHALK)) { return { id: id.replaceAll(THEME_CHALK, `${EP_PKG}/theme-chalk`), @@ -18,11 +16,6 @@ export async function ElementPlusAlias(): Promise { } } - let updatedId = id - for (const pkg of pkgs) { - if (id.startsWith(pkg.name)) - updatedId = updatedId.replace(pkg.name, pkg.dir) - } return this.resolve(id, importer, { skipSelf: true, ...options }) }, } diff --git a/build/utils/constants.ts b/build/utils/constants.ts index 730c8a84b4..e3366a8f8f 100644 --- a/build/utils/constants.ts +++ b/build/utils/constants.ts @@ -1,2 +1,3 @@ export const EP_PREFIX = '@element-plus' export const EP_PKG = 'element-plus' +export const EP_BRAND_NAME = 'Element Plus' diff --git a/build/utils/gulp.ts b/build/utils/gulp.ts index 300d8d080c..0fe474744c 100644 --- a/build/utils/gulp.ts +++ b/build/utils/gulp.ts @@ -1,4 +1,8 @@ +import { run } from './process' import type { TaskFunction } from 'gulp' export const withTaskName = (name: string, fn: T) => Object.assign(fn, { displayName: name }) + +export const runTask = (name: string) => + withTaskName(name, () => run(`pnpm run build ${name}`)) diff --git a/build/utils/pkg.ts b/build/utils/pkg.ts index 48f19c6ae7..c8a0b14342 100644 --- a/build/utils/pkg.ts +++ b/build/utils/pkg.ts @@ -1,7 +1,7 @@ import findWorkspacePackages from '@pnpm/find-workspace-packages' import { buildConfig } from '../build-info' import { EP_PREFIX } from './constants' -import { pkgRoot, projRoot } from './paths' +import { projRoot } from './paths' import type { Module } from '../build-info' import type { ProjectManifest } from '@pnpm/types' @@ -25,12 +25,12 @@ export const getPackageDependencies = (pkgPath: string): string[] => { return Object.keys(dependencies ?? {}) } +/** used for type generator */ export const pathRewriter = (module: Module) => { const config = buildConfig[module] return (id: string) => { id = id.replaceAll(`${EP_PREFIX}/theme-chalk`, 'element-plus/theme-chalk') - // TODO: handle @element-plus/icons id = id.replaceAll(`${EP_PREFIX}/`, `${config.bundle.path}/`) return id } @@ -42,18 +42,3 @@ export const excludeFiles = (files: string[]) => { (path) => !excludes.some((exclude) => path.includes(exclude)) ) } - -/** - * get package list (theme-chalk excluded) - */ -export const getDistPackages = async () => - (await getWorkspacePackages()) - .map((pkg) => ({ name: pkg.manifest.name, dir: pkg.dir })) - .filter( - (pkg): pkg is { name: string; dir: string } => - !!pkg.name && - !!pkg.dir && - pkg.name.startsWith(EP_PREFIX) && - pkg.dir.startsWith(pkgRoot) && - pkg.name !== `${EP_PREFIX}/theme-chalk` - ) diff --git a/build/utils/rollup.ts b/build/utils/rollup.ts index 7983fa6cfe..4731def488 100644 --- a/build/utils/rollup.ts +++ b/build/utils/rollup.ts @@ -21,3 +21,11 @@ export const generateExternal = async (options: { full: boolean }) => { export function writeBundles(bundle: RollupBuild, options: OutputOptions[]) { return Promise.all(options.map((option) => bundle.write(option))) } + +export function formatBundleFilename( + name: string, + minify: boolean, + ext: string +) { + return `${name}${minify ? '.min' : ''}.${ext}` +}