build: refactor each package build (#3709)

.eslintignore

@@ -1,6 +1,4 @@
 node_modules
 dist
-packages/*/es
-packages/*/lib
 pnpm-lock.yaml
 !.*

.eslintrc.js

@@ -31,7 +31,7 @@ module.exports = {
       },
     },
     {
-      files: ['**/__tests__/**'],
+      files: ['**/__tests__/**', '**/gulpfile.ts'],
       rules: {
         'no-console': 'off',
       },

.gitignore

@@ -11,8 +11,6 @@ node_modules
 # Bundle
 dist
 coverage
-packages/*/es
-packages/*/lib
 packages/element-plus/version.ts
 
 # local env files

.prettierignore

@@ -1,6 +1,4 @@
 dist
 node_modules
-packages/*/es
-packages/*/lib
 coverage
 pnpm-lock.yaml

build/component-types.ts

@@ -8,6 +8,7 @@ import { bold } from 'chalk'
 import { green, yellow } from './utils/log'
 import { buildOutput, compRoot, projRoot } from './utils/paths'
 
+import { pathRewriter } from './utils/pkg'
 import type { SourceFile } from 'ts-morph'
 
 const TSCONFIG_PATH = path.resolve(projRoot, 'tsconfig.json')
@@ -115,11 +116,7 @@ export const genComponentTypes = async () => {
 
       await fs.writeFile(
         filepath,
-        outputFile
-          .getText()
-          .replaceAll('@element-plus/components', 'element-plus/es')
-          .replaceAll('@element-plus/theme-chalk', 'element-plus/theme-chalk')
-          .replaceAll('@element-plus', 'element-plus/es'),
+        pathRewriter('esm', true)(outputFile.getText()),
         'utf8'
       )
 

build/component.ts

@@ -11,20 +11,21 @@ import { sync as globSync } from 'fast-glob'
 import filesize from 'rollup-plugin-filesize'
 
 import { compRoot, buildOutput } from './utils/paths'
-import { generateExternal, writeBundles } from './utils/rollup'
+import {
+  generateExternal,
+  rollupPathRewriter,
+  writeBundles,
+} from './utils/rollup'
 import { run } from './utils/process'
 import { withTaskName } from './utils/gulp'
-import { getWorkspaceNames } from './utils/pkg'
 
 import { genComponentTypes } from './component-types'
 import { buildConfig } from './info'
 import reporter from './size-reporter'
-import { EP_PREFIX } from './constants'
 
 import type { OutputOptions } from 'rollup'
-import type { Module, BuildInfo } from './info'
+import type { Module, BuildConfigEntries } from './info'
 
-let workspacePkgs: string[] = []
 const plugins = [
   css(),
   vue({
@@ -36,19 +37,6 @@ const plugins = [
   esbuild(),
 ]
 
-const pathsRewriter = (module: Module) => (id: string) => {
-  const config = buildConfig[module]
-  if (workspacePkgs.some((pkg) => id.startsWith(pkg)))
-    return id.replace(EP_PREFIX, config.bundle.path)
-  else return ''
-}
-
-const init = async () => {
-  workspacePkgs = (await getWorkspaceNames()).filter((pkg) =>
-    pkg.startsWith(EP_PREFIX)
-  )
-}
-
 async function getComponents() {
   const files = globSync('*', {
     cwd: compRoot,
@@ -60,9 +48,10 @@ async function getComponents() {
   }))
 }
 
-async function buildEachComponent() {
+export async function buildEachComponent() {
   const componentPaths = await getComponents()
   const external = await generateExternal({ full: false })
+  const pathRewriter = await rollupPathRewriter()
 
   const builds = componentPaths.map(
     async ({ path: p, name: componentName }) => {
@@ -74,7 +63,7 @@ async function buildEachComponent() {
         plugins,
         external,
       }
-      const opts = (Object.entries(buildConfig) as [Module, BuildInfo][]).map(
+      const opts = (Object.entries(buildConfig) as BuildConfigEntries).map(
         ([module, config]): OutputOptions => ({
           format: config.format,
           file: path.resolve(
@@ -84,7 +73,7 @@ async function buildEachComponent() {
             'index.js'
           ),
           exports: module === 'cjs' ? 'named' : undefined,
-          paths: pathsRewriter(module),
+          paths: pathRewriter(module),
           plugins: [filesize({ reporter })],
         })
       )
@@ -96,7 +85,7 @@ async function buildEachComponent() {
   await Promise.all(builds)
 }
 
-async function buildComponentEntry() {
+export async function buildComponentEntry() {
   const entry = path.resolve(compRoot, 'index.ts')
   const config = {
     input: entry,
@@ -125,9 +114,9 @@ function copyTypes() {
   return parallel(copy('esm'), copy('cjs'))
 }
 
-export const buildComponents = series(
-  init,
+export const buildComponent = series(
   parallel(genComponentTypes, buildEachComponent, buildComponentEntry),
   copyTypes()
 )
-export { genComponentTypes, buildEachComponent, buildComponentEntry }
+
+export { genComponentTypes }

build/constants.ts

@@ -1,2 +1 @@
 export const EP_PREFIX = '@element-plus'
-export const excludes = ['icons']

build/entry-types.ts

@@ -2,7 +2,7 @@ import path from 'path'
 import fs from 'fs/promises'
 import { bold } from 'chalk'
 import glob from 'fast-glob'
-import { Project, ScriptTarget } from 'ts-morph'
+import { Project, ScriptTarget, ModuleKind } from 'ts-morph'
 import { parallel } from 'gulp'
 import { epRoot, buildOutput, projRoot } from './utils/paths'
 import { yellow, green } from './utils/log'
@@ -13,25 +13,24 @@ import type { Module } from './info'
 
 import type { SourceFile } from 'ts-morph'
 
-const TSCONFIG_PATH = path.resolve(projRoot, 'tsconfig.dts.json')
+const TSCONFIG_PATH = path.resolve(projRoot, 'tsconfig.json')
 
 export const genEntryTypes = async () => {
   const files = await glob('*.ts', {
     cwd: epRoot,
     absolute: true,
+    onlyFiles: true,
   })
   const project = new Project({
     compilerOptions: {
+      module: ModuleKind.ESNext,
       allowJs: true,
-      declaration: true,
       emitDeclarationOnly: true,
       noEmitOnError: false,
       outDir: path.resolve(buildOutput, 'entry/types'),
-      skipLibCheck: true,
-      esModuleInterop: true,
       target: ScriptTarget.ESNext,
-      downlevelIteration: true,
-      // types: ["./typings", "esnext", "dom"],
+      rootDir: epRoot,
+      strict: false,
     },
     skipFileDependencyResolution: true,
     tsConfigFilePath: TSCONFIG_PATH,
@@ -42,17 +41,24 @@ export const genEntryTypes = async () => {
     const sourceFile = project.addSourceFileAtPath(f)
     sourceFiles.push(sourceFile)
   })
+  project.addSourceFilesAtPaths(path.resolve(projRoot, 'typings', '*.d.ts'))
+
+  const diagnostics = project.getPreEmitDiagnostics()
+
+  console.log(project.formatDiagnosticsWithColorAndContext(diagnostics))
+
+  await project.emit({
+    emitOnlyDtsFiles: true,
+  })
 
   const tasks = sourceFiles.map(async (sourceFile) => {
     yellow(`Emitting file: ${bold(sourceFile.getFilePath())}`)
-    await sourceFile.emit()
+
     const emitOutput = sourceFile.getEmitOutput()
     for (const outputFile of emitOutput.getOutputFiles()) {
       const filepath = outputFile.getFilePath()
 
-      await fs.mkdir(path.dirname(filepath), {
-        recursive: true,
-      })
+      await fs.mkdir(path.dirname(filepath), { recursive: true })
       await fs.writeFile(
         filepath,
         outputFile.getText().replaceAll('@element-plus', '.'),
@@ -65,12 +71,24 @@ export const genEntryTypes = async () => {
   await Promise.all(tasks)
 }
 
-export function copyEntryTypes() {
-  const src = path.resolve(buildOutput, 'entry', 'types')
+export const copyEntryTypes = (() => {
+  const src = path.resolve(buildOutput, 'entry/types')
   const copy = (module: Module) =>
-    withTaskName(`copyEntryTypes:${module}`, () =>
-      run(`rsync -a ${src}/ ${buildConfig[module].output.path}/`)
+    parallel(
+      withTaskName(`copyEntryTypes:${module}`, () =>
+        run(`rsync -a ${src}/ ${buildConfig[module].output.path}/`)
+      ),
+      withTaskName('copyEntryDefinitions', async () => {
+        const files = await glob('*.d.ts', {
+          cwd: epRoot,
+          absolute: true,
+          onlyFiles: true,
+        })
+        await run(
+          `rsync -a ${files.join(' ')} ${buildConfig[module].output.path}/`
+        )
+      })
     )
 
   return parallel(copy('esm'), copy('cjs'))
-}
+})()

build/full-bundle.ts

@@ -10,12 +10,16 @@ import { parallel } from 'gulp'
 import { genEntryTypes } from './entry-types'
 import { RollupResolveEntryPlugin } from './rollup-plugin-entry'
 import { epRoot, epOutput } from './utils/paths'
-import { EP_PREFIX, excludes } from './constants'
 import { yellow, green } from './utils/log'
-import { generateExternal, writeBundles } from './utils/rollup'
+import {
+  generateExternal,
+  rollupPathRewriter,
+  writeBundles,
+} from './utils/rollup'
 import { buildConfig } from './info'
 import { run } from './utils/process'
 import { withTaskName } from './utils/gulp'
+import type { BuildConfigEntries } from './info'
 
 import type { RollupOptions, OutputOptions, InputOptions } from 'rollup'
 
@@ -93,23 +97,16 @@ export const buildEntry = async () => {
     external: () => true,
   })
 
-  const rewriter = (id: string) => {
-    if (id.startsWith(`${EP_PREFIX}/components`))
-      return id.replace(`${EP_PREFIX}/components`, './components')
-    else if (id.startsWith(EP_PREFIX) && excludes.every((e) => !id.endsWith(e)))
-      return id.replace(EP_PREFIX, '.')
-    else return ''
-  }
-
   yellow('Generating entries')
+  const rewriter = await rollupPathRewriter()
   writeBundles(
     bundle,
-    Object.values(buildConfig).map(
-      (config): OutputOptions => ({
+    (Object.entries(buildConfig) as BuildConfigEntries).map(
+      ([module, config]): OutputOptions => ({
         format: config.format,
         dir: config.output.path,
         exports: config.format === 'cjs' ? 'named' : undefined,
-        paths: rewriter,
+        paths: rewriter(module),
       })
     )
   )

build/gulp-rewriter.ts

@@ -1,14 +0,0 @@
-import through2 from 'through2'
-
-export const gulpRewriter = (rewriteTo = '../..') => {
-  return through2.obj(function (file, _, cb) {
-    const compIdentifier = new RegExp('@element-plus', 'g')
-
-    file.contents = Buffer.from(
-      file.contents.toString().replace(compIdentifier, rewriteTo)
-    )
-    cb(null, file)
-  })
-}
-
-export default gulpRewriter

build/gulpfile.ts

@@ -23,7 +23,7 @@ export default series(
   withTaskName('clean', () => run('pnpm run clean')),
 
   parallel(
-    runTask('buildComponents'),
+    runTask('buildComponent'),
     runTask('buildStyle'),
     runTask('buildFullBundle'),
     runTask('buildHelper'),
@@ -35,13 +35,14 @@ export default series(
   parallel(
     copyStyle(),
     copyFullStyle,
-    copyEntryTypes(),
+    copyEntryTypes,
     copySourceCode(),
     copyREADME()
   )
 )
 
-export * from './components'
+export * from './component'
 export * from './style'
 export * from './full-bundle'
+export * from './entry-types'
 export * from './helper'

build/info.ts

@@ -45,3 +45,4 @@ export const buildConfig: Record<Module, BuildInfo> = {
   },
 }
 export type BuildConfig = typeof buildConfig
+export type BuildConfigEntries = [Module, BuildInfo][]

build/packages.ts

@@ -0,0 +1,53 @@
+import path from 'path'
+import ts from 'gulp-typescript'
+import { src, dest, series, parallel } from 'gulp'
+import { withTaskName, gulpPathRewriter } from './utils/gulp'
+import { buildConfig } from './info'
+import { epOutput, projRoot } from './utils/paths'
+import { getPackageManifest } from './utils/pkg'
+import { EP_PREFIX } from './constants'
+import type { BuildConfigEntries } from './info'
+
+export const buildPackage = (pkgPath: string) => {
+  const manifest = getPackageManifest(path.resolve(pkgPath, 'package.json'))
+  const pkgName = manifest.name!.replace(`${EP_PREFIX}/`, '')
+
+  const tasks = (Object.entries(buildConfig) as BuildConfigEntries).map(
+    ([module, config]) => {
+      const output = path.resolve(pkgPath, 'dist', config.output.name)
+
+      const build = () => {
+        const tsConfig = path.resolve(projRoot, 'tsconfig.json')
+        const inputs = [
+          '**/*.ts',
+          '!node_modules',
+          '!gulpfile.ts',
+          '!__test?(s)__/*',
+          path.resolve(projRoot, 'typings', '*.d.ts'),
+        ]
+        return withTaskName(`build:${pkgName}:${module}`, () =>
+          src(inputs)
+            .pipe(
+              ts.createProject(tsConfig, {
+                module: config.module,
+                strict: false,
+              })()
+            )
+            .pipe(gulpPathRewriter(module))
+            .pipe(dest(output))
+        )
+      }
+
+      const copy = () =>
+        withTaskName(`copy:${pkgName}:${module}`, () =>
+          src(`${output}/**`).pipe(
+            dest(path.resolve(epOutput, config.output.name, pkgName))
+          )
+        )
+
+      return series(build(), copy())
+    }
+  )
+
+  return parallel(...tasks)
+}

build/style.ts

@@ -1,12 +1,10 @@
 import path from 'path'
 import { parallel, dest, src } from 'gulp'
 import ts from 'gulp-typescript'
-import through2 from 'through2'
 import { buildOutput, compRoot } from './utils/paths'
 import { buildConfig } from './info'
-import { withTaskName } from './utils/gulp'
+import { withTaskName, gulpPathRewriter } from './utils/gulp'
 import { run } from './utils/process'
-import { EP_PREFIX } from './constants'
 
 import type { Module } from './info'
 
@@ -21,25 +19,10 @@ const tsProject = (module: Module) =>
     module: buildConfig[module].module,
   })()
 
-const rewriter = (module: Module) => {
-  const config = buildConfig[module]
-  return through2.obj(function (file, _, cb) {
-    file.contents = Buffer.from(
-      (file.contents.toString() as string)
-        .replaceAll(
-          `${EP_PREFIX}/components`,
-          `${config.bundle.path}/components`
-        )
-        .replaceAll(`${EP_PREFIX}/theme-chalk`, 'element-plus/theme-chalk')
-    )
-    cb(null, file)
-  })
-}
-
 const build = (module: Module) =>
   withTaskName(`buildStyle:${module}`, () =>
     src(inputs)
-      .pipe(rewriter(module))
+      .pipe(gulpPathRewriter(module))
       .pipe(tsProject(module))
       .pipe(dest(path.resolve(output, buildConfig[module].output.name)))
   )

build/utils/gulp.ts

@@ -1,4 +1,17 @@
-export const withTaskName = <T extends (...args: any) => any>(
-  name: string,
-  fn: T
-) => Object.assign(fn, { displayName: name })
+import through2 from 'through2'
+import { pathRewriter } from './pkg'
+import type { TaskFunction } from 'gulp'
+import type { Module } from '../info'
+
+export const withTaskName = <T extends TaskFunction>(name: string, fn: T) =>
+  Object.assign(fn, { displayName: name })
+
+export const gulpPathRewriter = (module: Module) => {
+  const rewriter = pathRewriter(module, true)
+
+  return through2.obj((file, _, cb) => {
+    const contents: string = file.contents.toString()
+    file.contents = Buffer.from(rewriter(contents))
+    cb(null, file)
+  })
+}

build/utils/pkg.ts

@@ -1,5 +1,8 @@
 import findWorkspacePackages from '@pnpm/find-workspace-packages'
+import { buildConfig } from '../info'
+import { EP_PREFIX } from '../constants'
 import { projRoot } from './paths'
+import type { Module } from '../info'
 import type { ProjectManifest } from '@pnpm/types'
 
 export const getWorkspacePackages = () => findWorkspacePackages(projRoot)
@@ -27,3 +30,14 @@ export const getPackageDependencies = (pkgPath: string): string[] => {
   const { dependencies } = manifest
   return Object.keys(dependencies ?? {})
 }
+
+export const pathRewriter = (module: Module, replaceAll: boolean) => {
+  const replaceName = replaceAll ? 'replaceAll' : 'replace'
+  const config = buildConfig[module]
+
+  return (id: string) => {
+    id = id[replaceName](`${EP_PREFIX}/theme-chalk`, 'element-plus/theme-chalk')
+    id = id[replaceName](`${EP_PREFIX}/`, `${config.bundle.path}/`)
+    return id
+  }
+}

build/utils/rollup.ts

@@ -1,5 +1,12 @@
+import { EP_PREFIX } from '../constants'
 import { epPackage } from './paths'
-import { getWorkspacePackages, getPackageDependencies } from './pkg'
+import {
+  getWorkspacePackages,
+  getPackageDependencies,
+  getWorkspaceNames,
+  pathRewriter,
+} from './pkg'
+import type { Module } from '../info'
 
 import type { OutputOptions, RollupBuild } from 'rollup'
 
@@ -25,3 +32,21 @@ export const generateExternal = async (options: { full: boolean }) => {
 export function writeBundles(bundle: RollupBuild, options: OutputOptions[]) {
   return Promise.all(options.map((option) => bundle.write(option)))
 }
+
+export const rollupPathRewriter = async () => {
+  const workspacePkgs = (await getWorkspaceNames()).filter((pkg) =>
+    pkg.startsWith(EP_PREFIX)
+  )
+
+  return (module: Module) => {
+    const rewriter = pathRewriter(module, false)
+
+    return (id: string) => {
+      if (workspacePkgs.some((pkg) => id.startsWith(pkg))) {
+        return rewriter(id)
+      } else {
+        return ''
+      }
+    }
+  }
+}

packages/directives/gulpfile.ts

@@ -1,57 +1,3 @@
-import path from 'path'
-import gulp from 'gulp'
-import ts from 'gulp-typescript'
-import { buildOutput } from '../../build/utils/paths'
-import rewriter from '../../build/gulp-rewriter'
+import { buildPackage } from '../../build/packages'
 
-export const esm = './es'
-export const cjs = './lib'
-const tsProject = ts.createProject('tsconfig.json')
-
-const inputs = [
-  './**/*.ts',
-  '!./node_modules',
-  '!./__tests__/*.ts',
-  '!./gulpfile.ts',
-]
-
-function compileEsm() {
-  return gulp
-    .src(inputs)
-    .pipe(tsProject())
-    .pipe(rewriter())
-    .pipe(gulp.dest(esm))
-}
-
-function compileCjs() {
-  return gulp
-    .src(inputs)
-    .pipe(
-      ts.createProject('tsconfig.json', {
-        module: 'commonjs',
-      })()
-    )
-    .pipe(rewriter())
-    .pipe(gulp.dest(cjs))
-}
-
-const distBundle = path.resolve(buildOutput, './element-plus')
-
-/**
- * copy from packages/theme-chalk/lib to dist/theme-chalk
- */
-function copyEsm() {
-  return gulp
-    .src(`${esm}/**`)
-    .pipe(gulp.dest(path.resolve(distBundle, 'es/directives')))
-}
-
-function copyCjs() {
-  return gulp
-    .src(`${cjs}/**`)
-    .pipe(gulp.dest(path.resolve(distBundle, 'lib/directives')))
-}
-
-export const build = gulp.series(compileEsm, compileCjs, copyEsm, copyCjs)
-
-export default build
+export default buildPackage(__dirname)

packages/directives/package.json

@@ -11,8 +11,8 @@
     "vue": "^3.2.0"
   },
   "scripts": {
-    "clean": "rimraf lib",
-    "build": "gulp build"
+    "clean": "rimraf dist",
+    "build": "gulp"
   },
   "gitHead": "c69724230befa8fede0e6b9c37fb0b7e39fd7cdd"
 }

packages/directives/tsconfig.json

@@ -1,11 +0,0 @@
-{
-  "compilerOptions": {
-    "esModuleInterop": true,
-    "rootDir": ".",
-    "declaration": true,
-    "lib": ["ES2020", "DOM"],
-    "skipLibCheck": true,
-    "target": "es6",
-    "moduleResolution": "node"
-  }
-}

packages/hooks/gulpfile.ts

@@ -1,57 +1,3 @@
-import path from 'path'
-import gulp from 'gulp'
-import ts from 'gulp-typescript'
-import { buildOutput } from '../../build/utils/paths'
-import rewriter from '../../build/gulp-rewriter'
+import { buildPackage } from '../../build/packages'
 
-export const esm = './es'
-export const cjs = './lib'
-const tsProject = ts.createProject('tsconfig.json')
-
-const inputs = [
-  './**/*.ts',
-  '!./node_modules',
-  '!./gulpfile.ts',
-  '!./__tests__/*.ts',
-]
-
-function compileEsm() {
-  return gulp
-    .src(inputs)
-    .pipe(tsProject())
-    .pipe(rewriter())
-    .pipe(gulp.dest(esm))
-}
-
-function compileCjs() {
-  return gulp
-    .src(inputs)
-    .pipe(
-      ts.createProject('tsconfig.json', {
-        module: 'commonjs',
-      })()
-    )
-    .pipe(rewriter())
-    .pipe(gulp.dest(cjs))
-}
-
-const distBundle = path.resolve(buildOutput, './element-plus')
-
-/**
- * copy from packages/hooks/lib to dist/hooks
- */
-function copyEsm() {
-  return gulp
-    .src(`${cjs}/**`)
-    .pipe(gulp.dest(path.resolve(distBundle, 'lib/hooks')))
-}
-
-function copyCjs() {
-  return gulp
-    .src(`${esm}/**`)
-    .pipe(gulp.dest(path.resolve(distBundle, 'es/hooks')))
-}
-
-export const build = gulp.series(compileEsm, compileCjs, copyEsm, copyCjs)
-
-export default build
+export default buildPackage(__dirname)

packages/hooks/package.json

@@ -12,8 +12,8 @@
     "vue": "^3.2.0"
   },
   "scripts": {
-    "clean": "rimraf lib",
-    "build": "gulp build"
+    "clean": "rimraf dist",
+    "build": "gulp"
   },
   "gitHead": "c69724230befa8fede0e6b9c37fb0b7e39fd7cdd"
 }

packages/hooks/tsconfig.json

@@ -1,11 +0,0 @@
-{
-  "compilerOptions": {
-    "esModuleInterop": true,
-    "rootDir": ".",
-    "declaration": true,
-    "lib": ["ES2020", "DOM"],
-    "skipLibCheck": true,
-    "target": "es6",
-    "moduleResolution": "node"
-  }
-}

packages/locale/gulpfile.ts

@@ -1,72 +1,3 @@
-import path from 'path'
-import gulp from 'gulp'
-import ts from 'gulp-typescript'
-import { buildOutput } from '../../build/utils/paths'
+import { buildPackage } from '../../build/packages'
 
-export const esm = './es'
-export const cjs = './lib'
-const inputs = './lang/*.ts'
-
-function compileLangEsm() {
-  return gulp
-    .src(inputs)
-    .pipe(ts.createProject('tsconfig.json')())
-    .pipe(gulp.dest(path.resolve(esm, 'lang')))
-}
-
-function compileLangCjs() {
-  return gulp
-    .src(inputs)
-    .pipe(
-      ts.createProject('tsconfig.json', {
-        module: 'commonjs',
-      })()
-    )
-    .pipe(gulp.dest(path.resolve(cjs, 'lang')))
-}
-
-function compileEntryEsm() {
-  return gulp
-    .src('./index.ts')
-    .pipe(ts.createProject('tsconfig.json')())
-    .pipe(gulp.dest(esm))
-}
-
-function compileEntryCjs() {
-  return gulp
-    .src('./index.ts')
-    .pipe(
-      ts.createProject('tsconfig.json', {
-        module: 'commonjs',
-      })()
-    )
-    .pipe(gulp.dest(cjs))
-}
-
-const distBundle = path.resolve(buildOutput, './element-plus')
-
-/**
- * copy from packages/theme-chalk/lib to dist/theme-chalk
- */
-function copyEsm() {
-  return gulp
-    .src(`${cjs}/**/*`)
-    .pipe(gulp.dest(path.resolve(distBundle, './lib/locale')))
-}
-
-function copyCjs() {
-  return gulp
-    .src(`${esm}/**/*`)
-    .pipe(gulp.dest(path.resolve(distBundle, './es/locale')))
-}
-
-export const build = gulp.series(
-  compileEntryEsm,
-  compileEntryCjs,
-  compileLangEsm,
-  compileLangCjs,
-  copyEsm,
-  copyCjs
-)
-
-export default build
+export default buildPackage(__dirname)

packages/locale/package.json

@@ -9,8 +9,8 @@
   "types": "index.d.ts",
   "license": "MIT",
   "scripts": {
-    "clean": "rimraf lib es",
-    "build": "gulp build"
+    "clean": "rimraf dist",
+    "build": "gulp"
   },
   "gitHead": "c69724230befa8fede0e6b9c37fb0b7e39fd7cdd"
 }

packages/locale/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "compilerOptions": {
-    "esModuleInterop": true,
-    "rootDir": ".",
-    "declaration": true,
-    "target": "ES6",
-    "moduleResolution": "node"
-  }
-}

packages/theme-chalk/gulpfile.ts

@@ -1,28 +1,25 @@
-/* eslint-disable no-console */
-
 import path from 'path'
 import chalk from 'chalk'
-import gulp from 'gulp'
+import { src, dest, series, parallel } from 'gulp'
 import gulpSass from 'gulp-sass'
 import dartSass from 'sass'
 import autoprefixer from 'gulp-autoprefixer'
 import cleanCSS from 'gulp-clean-css'
 import rename from 'gulp-rename'
-import { buildOutput } from '../../build/utils/paths'
+import { epOutput } from '../../build/utils/paths'
 
-const noElPrefixFile = /(index|base|display)/
-
-const sass = gulpSass(dartSass)
-export const distFolder = './lib'
+const distFolder = path.resolve(__dirname, 'dist')
+const distBundle = path.resolve(epOutput, 'theme-chalk')
 
 /**
  * compile theme-chalk scss & minify
  * not use sass.sync().on('error', sass.logError) to throw exception
  * @returns
  */
-function compile() {
-  return gulp
-    .src('./src/*.scss')
+function buildThemeChalk() {
+  const sass = gulpSass(dartSass)
+  const noElPrefixFile = /(index|base|display)/
+  return src(path.resolve(__dirname, 'src/*.scss'))
     .pipe(sass.sync())
     .pipe(autoprefixer({ cascade: false }))
     .pipe(
@@ -41,34 +38,40 @@ function compile() {
         }
       })
     )
-    .pipe(gulp.dest(distFolder))
+    .pipe(dest(distFolder))
 }
 
 /**
  * copy font to lib/fonts
  * @returns
  */
-function copyFont() {
-  return gulp.src('./src/fonts/**').pipe(gulp.dest(`${distFolder}/fonts`))
+export function copyFont() {
+  return src(path.resolve(__dirname, 'src/fonts/**')).pipe(
+    dest(path.resolve(distFolder, 'fonts'))
+  )
 }
 
-const distBundle = path.resolve(buildOutput, './element-plus/theme-chalk')
-
 /**
  * copy from packages/theme-chalk/lib to dist/theme-chalk
  */
-function copyToLib() {
-  return gulp.src(`${distFolder}/**`).pipe(gulp.dest(distBundle))
+export function copyThemeChalkBundle() {
+  return src(`${distFolder}/**`).pipe(dest(distBundle))
 }
 
 /**
  * copy source file to packages
  */
 
-function copySourceToLib() {
-  return gulp.src('./src/**').pipe(gulp.dest(path.resolve(distBundle, './src')))
+export function copyThemeChalkSource() {
+  return src(path.resolve(__dirname, 'src/**')).pipe(
+    dest(path.resolve(distBundle, 'src'))
+  )
 }
 
-export const build = gulp.series(compile, copyFont, copyToLib, copySourceToLib)
+export const build = parallel(
+  copyFont,
+  copyThemeChalkSource,
+  series(buildThemeChalk, copyThemeChalkBundle)
+)
 
 export default build

packages/theme-chalk/package.json

@@ -7,8 +7,8 @@
   "jsdelivr": "index.css",
   "style": "index.css",
   "scripts": {
-    "clean": "rimraf lib",
-    "build": "gulp build"
+    "clean": "rimraf dist",
+    "build": "gulp"
   },
   "repository": {
     "type": "git",

packages/tokens/gulpfile.ts

@@ -1,46 +1,3 @@
-import path from 'path'
-import { src, dest, parallel, series } from 'gulp'
-import ts from 'gulp-typescript'
-import { epOutput, projRoot } from '../../build/utils/paths'
-import rewriter from '../../build/gulp-rewriter'
-import { buildConfig } from '../../build/info'
-import { withTaskName } from '../../build/utils/gulp'
+import { buildPackage } from '../../build/packages'
 
-import type { Module } from '../../build/info'
-
-export const buildTokens = (module: Module) => {
-  const tsConfig = path.resolve(projRoot, 'tsconfig.json')
-  const inputs = [
-    './*.ts',
-    '!./node_modules',
-    '!./gulpfile.ts',
-    '!./__tests__/*.ts',
-    path.resolve(projRoot, 'typings', 'vue-shim.d.ts'),
-  ]
-  const config = buildConfig[module]
-  return withTaskName(`buildTokens:${module}`, () =>
-    src(inputs)
-      .pipe(
-        ts.createProject(tsConfig, {
-          module: config.module,
-          strict: false,
-        })()
-      )
-      .pipe(rewriter('..'))
-      .pipe(dest(path.resolve(__dirname, config.output.name)))
-  )
-}
-
-const copyTokens = (module: Module) => {
-  const config = buildConfig[module]
-  return withTaskName(`copyTokens:${module}`, () => {
-    return src(`${path.resolve(__dirname, config.output.name)}/**`).pipe(
-      dest(path.resolve(epOutput, config.output.name, 'tokens'))
-    )
-  })
-}
-
-export default parallel(
-  series(buildTokens('cjs'), copyTokens('cjs')),
-  series(buildTokens('esm'), copyTokens('esm'))
-)
+export default buildPackage(__dirname)

packages/tokens/package.json

@@ -6,7 +6,7 @@
     "vue": "^3.2.0"
   },
   "scripts": {
-    "clean": "rimraf lib",
+    "clean": "rimraf dist",
     "build": "gulp"
   },
   "main": "index.ts",

packages/utils/gulpfile.ts

@@ -1,52 +1,3 @@
-import path from 'path'
-import gulp from 'gulp'
-import ts from 'gulp-typescript'
-import { buildOutput } from '../../build/utils/paths'
+import { buildPackage } from '../../build/packages'
 
-import type { Settings } from 'gulp-typescript'
-
-export const esm = './es'
-export const cjs = './lib'
-
-const inputs = ['./**/*.ts', '!gulpfile.ts', '!./node_modules', '!./tests/*.ts']
-
-function createProject(settings: Settings = {}) {
-  return ts.createProject('tsconfig.json', {
-    // temporarily disabled
-    // TODO: remove this
-    strict: false,
-    ...settings,
-  })
-}
-
-function compileEsm() {
-  return gulp.src(inputs).pipe(createProject()()).pipe(gulp.dest(esm))
-}
-
-function compileCjs() {
-  return gulp
-    .src(inputs)
-    .pipe(createProject({ module: 'commonjs' })())
-    .pipe(gulp.dest(cjs))
-}
-
-const distBundle = path.resolve(buildOutput, './element-plus')
-
-/**
- * copy from packages/theme-chalk/lib to dist/theme-chalk
- */
-function copyEsm() {
-  return gulp
-    .src(`${cjs}/**`)
-    .pipe(gulp.dest(path.resolve(distBundle, './lib/utils')))
-}
-
-function copyCjs() {
-  return gulp
-    .src(`${esm}/**`)
-    .pipe(gulp.dest(path.resolve(distBundle, './es/utils')))
-}
-
-export const build = gulp.series(compileEsm, compileCjs, copyEsm, copyCjs)
-
-export default build
+export default buildPackage(__dirname)

packages/utils/package.json

@@ -6,8 +6,8 @@
     "vue": "^3.2.0"
   },
   "scripts": {
-    "clean": "rimraf lib es",
-    "build": "gulp build"
+    "clean": "rimraf dist",
+    "build": "gulp"
   },
   "gitHead": "c69724230befa8fede0e6b9c37fb0b7e39fd7cdd"
 }

packages/utils/tsconfig.json

@@ -1,12 +0,0 @@
-{
-  "compilerOptions": {
-    "esModuleInterop": true,
-    "rootDir": ".",
-    "declaration": true,
-    "lib": ["ES2020", "DOM"],
-    "skipLibCheck": true,
-    "target": "es6",
-    "moduleResolution": "node",
-    "strict": true
-  }
-}

tsconfig.dts.json

@@ -1,23 +0,0 @@
-{
-  "compilerOptions": {
-    "module": "esnext",
-    "declaration": true,
-    "noImplicitAny": false,
-    "removeComments": true,
-    "moduleResolution": "node",
-    "esModuleInterop": true,
-    "jsx": "preserve",
-    "noLib": false,
-    "target": "esnext",
-    "lib": ["esnext", "DOM"],
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "forceConsistentCasingInFileNames": true,
-    "allowJs": true,
-    "emitDeclarationOnly": true,
-    "noEmitOnError": true,
-    "skipLibCheck": true,
-    "rootDir": "packages/element-plus"
-  },
-  "exclude": ["node_modules"]
-}

tsconfig.json

@@ -18,11 +18,5 @@
     "strict": true,
     "skipLibCheck": true
   },
-  "exclude": [
-    "node_modules",
-    "**/__tests__",
-    "dist/**",
-    "packages/*/es",
-    "packages/*/lib"
-  ]
+  "exclude": ["node_modules", "**/__tests__", "dist/**"]
 }