refactor(@vant/cli): migrate to ESM package

packages/vant-cli/bin.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-require('./lib/cli');
+import './lib/cli.js';

packages/vant-cli/cjs/babel-preset-vue-ts.cjs

@@ -4,13 +4,13 @@
  * see: https://github.com/babel/babel-loader/pull/738
  */
 
-import { readFileSync } from 'fs';
+const { readFileSync } = require('fs');
-import { declare } from '@babel/helper-plugin-utils';
+const { declare } = require('@babel/helper-plugin-utils');
 
 module.exports = declare(() => ({
   overrides: [
     {
-      test: (filePath: string) => {
+      test: (filePath) => {
         if (/\.vue$/.test(filePath)) {
           const template = readFileSync(filePath, { encoding: 'utf8' });
           return (

packages/vant-cli/cjs/babel.config.cjs

@@ -1,11 +1,4 @@
-import { ConfigAPI } from '@babel/core';
+module.exports = function (api, options) {
-
-type PresetOption = {
-  loose?: boolean;
-  enableObjectSlots?: boolean;
-};
-
-module.exports = function (api?: ConfigAPI, options: PresetOption = {}) {
   if (api) {
     api.cache.never();
   }
@@ -24,7 +17,7 @@ module.exports = function (api?: ConfigAPI, options: PresetOption = {}) {
         },
       ],
       require.resolve('@babel/preset-typescript'),
-      require('../compiler/babel-preset-vue-ts'),
+      require('./babel-preset-vue-ts.cjs'),
     ],
     plugins: [
       [
@@ -36,5 +29,3 @@ module.exports = function (api?: ConfigAPI, options: PresetOption = {}) {
     ],
   };
 };
-
-export default module.exports;

packages/vant-cli/cjs/jest.config.cjs

@@ -1,17 +1,17 @@
-import { join } from 'path';
+const { join } = require('path');
-import { existsSync } from 'fs-extra';
+const { existsSync } = require('fs');
-import {
+const { ROOT } = require('./shared.cjs');
-  ROOT,
+
-  JEST_SETUP_FILE,
+const JEST_SETUP_FILE = join(__dirname, 'jest.setup.cjs');
-  JEST_FILE_MOCK_FILE,
+const JEST_FILE_MOCK_FILE = join(__dirname, 'jest.file-mock.cjs');
-  JEST_STYLE_MOCK_FILE,
+const JEST_STYLE_MOCK_FILE = join(__dirname, 'jest.style-mock.cjs');
-} from '../common/constant';
 
 const DEFAULT_CONFIG = {
   testEnvironment: 'jsdom',
   moduleNameMapper: {
     '\\.(css|less|scss)$': JEST_STYLE_MOCK_FILE,
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': JEST_FILE_MOCK_FILE,
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      JEST_FILE_MOCK_FILE,
   },
   setupFilesAfterEnv: [JEST_SETUP_FILE],
   moduleFileExtensions: ['js', 'jsx', 'vue', 'ts', 'tsx'],

packages/vant-cli/cjs/jest.setup.cjs

@@ -0,0 +1 @@
+require('jest-canvas-mock');

packages/vant-cli/cjs/postcss.config.cjs

@@ -1,18 +1,16 @@
-import { existsSync } from 'fs-extra';
+const { join } = require('path');
-import { ROOT_POSTCSS_CONFIG_FILE } from '../common/constant';
+const { existsSync } = require('fs');
+const { ROOT } = require('./shared.cjs');
 
-type PostcssConfig = {
+function getRootPostcssConfig() {
-  plugins?: Record<string, unknown> | any[];
+  const ROOT_POSTCSS_CONFIG_FILE = join(ROOT, 'postcss.config.js');
-};
-
-export function getRootPostcssConfig(): PostcssConfig {
   if (existsSync(ROOT_POSTCSS_CONFIG_FILE)) {
     return require(ROOT_POSTCSS_CONFIG_FILE);
   }
   return { plugins: [] };
 }
 
-function getPostcssPlugins(rootConfig: PostcssConfig) {
+function getPostcssPlugins(rootConfig) {
   const plugins = rootConfig.plugins || [];
 
   if (Array.isArray(plugins)) {
@@ -23,6 +21,7 @@ function getPostcssPlugins(rootConfig: PostcssConfig) {
     if (hasPostcssPlugin) {
       return plugins;
     }
+
     return [require('autoprefixer'), ...plugins];
   }
 

packages/vant-cli/cjs/shared.cjs

@@ -0,0 +1,23 @@
+const { join, dirname } = require('path');
+const { existsSync } = require('fs');
+
+function findRootDir(dir) {
+  if (existsSync(join(dir, 'vant.config.js'))) {
+    return dir;
+  }
+
+  const parentDir = dirname(dir);
+  if (dir === parentDir) {
+    return dir;
+  }
+
+  return findRootDir(parentDir);
+}
+
+const CWD = process.cwd();
+const ROOT = findRootDir(CWD);
+
+module.exports = {
+  CWD,
+  ROOT,
+};

packages/vant-cli/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@vant/cli",
   "version": "4.0.0-rc.2",
+  "type": "module",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
   "bin": {
     "vant-cli": "./bin.js"
   },
   "engines": {
-    "node": ">=12"
+    "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
   },
   "publishConfig": {
     "access": "public",
@@ -20,10 +21,11 @@
   },
   "files": [
     "lib",
+    "cjs",
     "site",
     "template",
     "bin.js",
-    "preset.js"
+    "preset.cjs"
   ],
   "keywords": [
     "vant"
@@ -33,7 +35,7 @@
   "devDependencies": {
     "@types/fs-extra": "^9.0.13",
     "@types/less": "^3.0.3",
-    "@types/lodash": "^4.14.175",
+    "@types/lodash-es": "^4.14.175",
     "@types/markdown-it": "^12.2.3",
     "@types/postcss-load-config": "^3.0.1",
     "@vue/compiler-sfc": "^3.2.19",
@@ -71,7 +73,7 @@
     "jest-serializer-html": "^7.1.0",
     "less": "^4.1.2",
     "lint-staged": "^11.2.0",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "markdown-it": "^12.2.0",
     "markdown-it-anchor": "^8.3.1",
     "ora": "^5.4.1",

packages/vant-cli/preset.cjs

@@ -1,3 +1,3 @@
-const babelConfig = require('./lib/config/babel.config');
+const babelConfig = require('./cjs/babel.config.cjs');
 
 module.exports = (api, options) => babelConfig(api, options);

packages/vant-cli/src/cli.ts

@@ -11,7 +11,7 @@ import {
   buildSite,
   commitLint,
   cliVersion,
-} from '.';
+} from './index.js';
 
 const program = new Command();
 

packages/vant-cli/src/commands/build-site.ts

@@ -1,10 +1,10 @@
-import { emptyDir } from 'fs-extra';
+import fse from 'fs-extra';
-import { setNodeEnv } from '../common';
+import { setNodeEnv } from '../common/index.js';
-import { compileSite } from '../compiler/compile-site';
+import { compileSite } from '../compiler/compile-site.js';
-import { SITE_DIST_DIR } from '../common/constant';
+import { SITE_DIST_DIR } from '../common/constant.js';
 
 export async function buildSite() {
   setNodeEnv('production');
-  await emptyDir(SITE_DIST_DIR);
+  await fse.emptyDir(SITE_DIST_DIR);
   await compileSite(true);
 }

packages/vant-cli/src/commands/build.ts

@@ -1,20 +1,20 @@
 import execa from 'execa';
 import { join, relative } from 'path';
-import { remove, copy, readdir, existsSync } from 'fs-extra';
+import fse from 'fs-extra';
-import { clean } from './clean';
+import { clean } from './clean.js';
-import { CSS_LANG } from '../common/css';
+import { CSS_LANG } from '../common/css.js';
-import { ora, consola } from '../common/logger';
+import { ora, consola } from '../common/logger.js';
-import { installDependencies } from '../common/manager';
+import { installDependencies } from '../common/manager.js';
-import { compileSfc } from '../compiler/compile-sfc';
+import { compileSfc } from '../compiler/compile-sfc.js';
-import { compileStyle } from '../compiler/compile-style';
+import { compileStyle } from '../compiler/compile-style.js';
-import { compileScript } from '../compiler/compile-script';
+import { compileScript } from '../compiler/compile-script.js';
-import { compilePackage } from '../compiler/compile-package';
+import { compilePackage } from '../compiler/compile-package.js';
-import { genPackageEntry } from '../compiler/gen-package-entry';
+import { genPackageEntry } from '../compiler/gen-package-entry.js';
-import { genStyleDepsMap } from '../compiler/gen-style-deps-map';
+import { genStyleDepsMap } from '../compiler/gen-style-deps-map.js';
-import { genComponentStyle } from '../compiler/gen-component-style';
+import { genComponentStyle } from '../compiler/gen-component-style.js';
-import { SRC_DIR, LIB_DIR, ES_DIR } from '../common/constant';
+import { SRC_DIR, LIB_DIR, ES_DIR } from '../common/constant.js';
-import { genPackageStyle } from '../compiler/gen-package-style';
+import { genPackageStyle } from '../compiler/gen-package-style.js';
-import { genVeturConfig } from '../compiler/gen-vetur-config';
+import { genVeturConfig } from '../compiler/gen-vetur-config.js';
 import {
   isDir,
   isSfc,
@@ -26,7 +26,9 @@ import {
   setNodeEnv,
   setModuleEnv,
   setBuildTarget,
-} from '../common';
+} from '../common/index.js';
+
+const { remove, copy, readdir, existsSync } = fse;
 
 async function compileFile(filePath: string) {
   if (isScript(filePath)) {

packages/vant-cli/src/commands/changelog.ts

@@ -1,10 +1,12 @@
-import { join } from 'path';
+import { join, dirname } from 'path';
-import { ROOT } from '../common/constant';
+import { fileURLToPath } from 'url';
-import { ora, slimPath } from '../common/logger';
+import { ROOT } from '../common/constant.js';
-import { createWriteStream, readFileSync } from 'fs-extra';
+import { ora, slimPath } from '../common/logger.js';
+import { createWriteStream, readFileSync } from 'fs';
 import conventionalChangelog from 'conventional-changelog';
 
 const DIST_FILE = join(ROOT, './changelog.generated.md');
+const __dirname = dirname(fileURLToPath(import.meta.url));
 const MAIN_TEMPLATE = join(__dirname, '../../template/changelog-main.hbs');
 const HEADER_TEMPLATE = join(__dirname, '../../template/changelog-header.hbs');
 const COMMIT_TEMPLATE = join(__dirname, '../../template/changelog-commit.hbs');

packages/vant-cli/src/commands/clean.ts

@@ -1,11 +1,13 @@
-import { remove } from 'fs-extra';
+import fse from 'fs-extra';
 import {
   ES_DIR,
   LIB_DIR,
   DIST_DIR,
   VETUR_DIR,
   SITE_DIST_DIR,
-} from '../common/constant';
+} from '../common/constant.js';
+
+const { remove } = fse;
 
 export async function clean() {
   await Promise.all([

packages/vant-cli/src/commands/commit-lint.ts

@@ -1,7 +1,8 @@
-import { readFileSync } from 'fs-extra';
+import { readFileSync } from 'fs';
-import { consola } from '../common/logger';
+import { consola } from '../common/logger.js';
 
-const commitRE = /^(revert: )?(fix|feat|docs|perf|test|types|style|build|chore|release|refactor|breaking change)(\(.+\))?: .{1,50}/;
+const commitRE =
+  /^(revert: )?(fix|feat|docs|perf|test|types|style|build|chore|release|refactor|breaking change)(\(.+\))?: .{1,50}/;
 const mergeRE = /Merge /;
 
 export function commitLint(gitParams: string) {

packages/vant-cli/src/commands/dev.ts

@@ -1,5 +1,5 @@
-import { setNodeEnv } from '../common';
+import { setNodeEnv } from '../common/index.js';
-import { compileSite } from '../compiler/compile-site';
+import { compileSite } from '../compiler/compile-site.js';
 
 export async function dev() {
   setNodeEnv('development');

packages/vant-cli/src/commands/jest.ts

@@ -1,7 +1,11 @@
-import { runCLI } from 'jest';
+import jest from 'jest';
-import { setNodeEnv } from '../common';
+import { setNodeEnv } from '../common/index.js';
-import { genPackageEntry } from '../compiler/gen-package-entry';
+import { genPackageEntry } from '../compiler/gen-package-entry.js';
-import { ROOT, JEST_CONFIG_FILE, PACKAGE_ENTRY_FILE } from '../common/constant';
+import {
+  ROOT,
+  JEST_CONFIG_FILE,
+  PACKAGE_ENTRY_FILE,
+} from '../common/constant.js';
 
 export function test(command: any) {
   setNodeEnv('test');
@@ -13,18 +17,19 @@ export function test(command: any) {
   const config = {
     rootDir: ROOT,
     watch: command.watch,
+    debug: command.debug,
     config: JEST_CONFIG_FILE,
+    runInBand: command.runInBand,
     clearCache: command.clearCache,
     changedSince: command.changedSince,
     logHeapUsage: command.logHeapUsage,
-    runInBand: command.runInBand,
-    debug: command.debug,
     // make jest tests faster
     // see: https://ivantanev.com/make-jest-faster/
     maxWorkers: '50%',
   } as any;
 
-  runCLI(config, [ROOT])
+  jest
+    .runCLI(config, [ROOT])
     .then((response) => {
       if (!response.results.success && !command.watch) {
         process.exit(1);

packages/vant-cli/src/commands/lint.ts

@@ -1,6 +1,6 @@
 import execa from 'execa';
-import { consola, ora } from '../common/logger';
+import { consola, ora } from '../common/logger.js';
-import { SCRIPT_EXTS } from '../common/constant';
+import { SCRIPT_EXTS } from '../common/constant.js';
 
 type RunCommandMessages = {
   start: string;

packages/vant-cli/src/commands/release.ts

@@ -1,7 +1,9 @@
 /* eslint-disable no-template-curly-in-string */
 import releaseIt from 'release-it';
-import { join } from 'path';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
 
+const __dirname = dirname(fileURLToPath(import.meta.url));
 const PLUGIN_PATH = join(__dirname, '../compiler/vant-cli-release-plugin.js');
 
 export async function release(command: { tag?: string }) {

packages/vant-cli/src/common/constant.ts

@@ -1,5 +1,7 @@
-import { get } from 'lodash';
+import { get } from 'lodash-es';
-import { existsSync } from 'fs-extra';
+import { existsSync, readFileSync } from 'fs';
+import { createRequire } from 'module';
+import { fileURLToPath } from 'url';
 import { join, dirname, isAbsolute } from 'path';
 
 function findRootDir(dir: string): string {
@@ -25,12 +27,13 @@ export const VETUR_DIR = join(ROOT, 'vetur');
 export const SITE_DIST_DIR = join(ROOT, 'site-dist');
 export const VANT_CONFIG_FILE = join(ROOT, 'vant.config.js');
 export const PACKAGE_JSON_FILE = join(ROOT, 'package.json');
-export const ROOT_POSTCSS_CONFIG_FILE = join(ROOT, 'postcss.config.js');
 
 // Relative paths
-export const DIST_DIR = join(__dirname, '../../dist');
+const __dirname = dirname(fileURLToPath(import.meta.url));
-export const CONFIG_DIR = join(__dirname, '../config');
+export const CJS_DIR = join(__dirname, '..', '..', 'cjs');
-export const SITE_SRC_DIR = join(__dirname, '../../site');
+export const DIST_DIR = join(__dirname, '..', '..', 'dist');
+export const CONFIG_DIR = join(__dirname, '..', 'config');
+export const SITE_SRC_DIR = join(__dirname, '..', '..', 'site');
 
 // Dist files
 export const PACKAGE_ENTRY_FILE = join(DIST_DIR, 'package-entry.js');
@@ -43,23 +46,19 @@ export const SITE_DESKTOP_SHARED_FILE = join(
 export const STYLE_DEPS_JSON_FILE = join(DIST_DIR, 'style-deps.json');
 
 // Config files
-export const POSTCSS_CONFIG_FILE = join(CONFIG_DIR, 'postcss.config.js');
+export const POSTCSS_CONFIG_FILE = join(CJS_DIR, 'postcss.config.cjs');
-export const JEST_SETUP_FILE = join(CONFIG_DIR, 'jest.setup.js');
+export const JEST_CONFIG_FILE = join(CJS_DIR, 'jest.config.cjs');
-export const JEST_CONFIG_FILE = join(CONFIG_DIR, 'jest.config.js');
-export const JEST_TRANSFORM_FILE = join(CONFIG_DIR, 'jest.transform.js');
-export const JEST_FILE_MOCK_FILE = join(CONFIG_DIR, 'jest.file-mock.js');
-export const JEST_STYLE_MOCK_FILE = join(CONFIG_DIR, 'jest.style-mock.js');
 
 export const SCRIPT_EXTS = ['.js', '.jsx', '.vue', '.ts', '.tsx'];
 export const STYLE_EXTS = ['.css', '.less', '.scss'];
 
 export function getPackageJson() {
-  delete require.cache[PACKAGE_JSON_FILE];
+  const rawJson = readFileSync(PACKAGE_JSON_FILE, 'utf-8');
-
+  return JSON.parse(rawJson);
-  return require(PACKAGE_JSON_FILE);
 }
 
 export function getVantConfig() {
+  const require = createRequire(import.meta.url);
   delete require.cache[VANT_CONFIG_FILE];
 
   try {

packages/vant-cli/src/common/css.ts

@@ -1,8 +1,8 @@
-import { get } from 'lodash';
+import { get } from 'lodash-es';
 import { existsSync } from 'fs';
 import { join, isAbsolute } from 'path';
-import { getVantConfig } from '../common';
+import { getVantConfig } from '../common/index.js';
-import { STYLE_DIR, SRC_DIR } from './constant';
+import { STYLE_DIR, SRC_DIR } from './constant.js';
 
 type CSS_LANG = 'css' | 'less' | 'scss';
 

packages/vant-cli/src/common/index.ts

@@ -1,15 +1,12 @@
-import { get } from 'lodash';
+import fse from 'fs-extra';
+import { get } from 'lodash-es';
 import { sep, join } from 'path';
-import {
+import { SRC_DIR, getVantConfig } from './constant.js';
-  lstatSync,
-  existsSync,
-  readdirSync,
-  readFileSync,
-  outputFileSync,
-} from 'fs-extra';
-import { SRC_DIR, getVantConfig } from './constant';
 import type { InlineConfig } from 'vite';
 
+const { lstatSync, existsSync, readdirSync, readFileSync, outputFileSync } =
+  fse;
+
 export const EXT_REGEXP = /\.\w+$/;
 export const SFC_REGEXP = /\.(vue)$/;
 export const DEMO_REGEXP = new RegExp('\\' + sep + 'demo$');

packages/vant-cli/src/common/logger.ts

@@ -1,7 +1,7 @@
 import ora from 'ora';
 import chalk from 'chalk';
 import consola from 'consola';
-import { ROOT } from '../common/constant';
+import { ROOT } from '../common/constant.js';
 
 export function slimPath(path: string) {
   return chalk.yellow(path.replace(ROOT, ''));

packages/vant-cli/src/common/manager.ts

@@ -1,5 +1,5 @@
 import execa from 'execa';
-import { consola } from './logger';
+import { consola } from './logger.js';
 import { execSync } from 'child_process';
 
 let hasYarnCache: boolean;

packages/vant-cli/src/compiler/compile-css.ts

@@ -1,7 +1,7 @@
 import postcss from 'postcss';
 import postcssrc from 'postcss-load-config';
 import CleanCss from 'clean-css';
-import { POSTCSS_CONFIG_FILE } from '../common/constant';
+import { POSTCSS_CONFIG_FILE } from '../common/constant.js';
 
 const cleanCss = new CleanCss();
 

packages/vant-cli/src/compiler/compile-less.ts

@@ -1,11 +1,11 @@
+import less from 'less';
 import { join } from 'path';
-import { render } from 'less';
+import { readFileSync } from 'fs';
-import { readFileSync } from 'fs-extra';
+import { CWD } from '../common/constant.js';
-import { CWD } from '../common/constant';
 
 export async function compileLess(filePath: string) {
   const source = readFileSync(filePath, 'utf-8');
-  const { css } = await render(source, {
+  const { css } = await less.render(source, {
     filename: filePath,
     paths: [join(CWD, 'node_modules')],
   });

packages/vant-cli/src/compiler/compile-package.ts

@@ -1,6 +1,6 @@
 import { build } from 'vite';
-import { mergeCustomViteConfig } from '../common';
+import { mergeCustomViteConfig } from '../common/index.js';
-import { getViteConfigForPackage } from '../config/vite.package';
+import { getViteConfigForPackage } from '../config/vite.package.js';
 
 export async function compilePackage(minify: boolean) {
   const config = mergeCustomViteConfig(getViteConfigForPackage(minify));

packages/vant-cli/src/compiler/compile-sass.ts

@@ -1,3 +1,5 @@
+import { createRequire } from 'module';
+
 // allow to import from node_modules
 // @import "~package-name/var.scss"
 const tildeImporter = (url: string) => {
@@ -14,6 +16,7 @@ const tildeImporter = (url: string) => {
 };
 
 export async function compileSass(filePath: string) {
+  const require = createRequire(import.meta.url);
   const { renderSync } = require('sass');
   const { css } = renderSync({ file: filePath, importer: tildeImporter });
   return css;

packages/vant-cli/src/compiler/compile-script.ts

@@ -1,9 +1,11 @@
+import fse from 'fs-extra';
 import { sep } from 'path';
 import { transformAsync } from '@babel/core';
-import { readFileSync, removeSync, outputFileSync } from 'fs-extra';
+import { replaceExt } from '../common/index.js';
-import { replaceExt } from '../common';
+import { replaceCSSImportExt } from '../common/css.js';
-import { replaceCSSImportExt } from '../common/css';
+import { replaceScriptImportExt } from './get-deps.js';
-import { replaceScriptImportExt } from './get-deps';
+
+const { readFileSync, removeSync, outputFileSync } = fse;
 
 export async function compileScript(filePath: string): Promise<void> {
   return new Promise((resolve, reject) => {

packages/vant-cli/src/compiler/compile-sfc.ts

@@ -1,8 +1,10 @@
-import hash from 'hash-sum';
+import fse from 'fs-extra';
 import path from 'path';
+import hash from 'hash-sum';
 import { parse, SFCBlock, compileTemplate } from '@vue/compiler-sfc';
-import { remove, readFileSync, outputFile } from 'fs-extra';
+import { replaceExt } from '../common/index.js';
-import { replaceExt } from '../common';
+
+const { remove, readFileSync, outputFile } = fse;
 
 const RENDER_FN = '__vue_render__';
 const VUEIDS = '__vue_sfc__';

packages/vant-cli/src/compiler/compile-site.ts

@@ -1,17 +1,18 @@
 import chalk from 'chalk';
+import { createRequire } from 'module';
 import { createServer, build } from 'vite';
 import {
   getViteConfigForSiteDev,
   getViteConfigForSiteProd,
-} from '../config/vite.site';
+} from '../config/vite.site.js';
-import { mergeCustomViteConfig, replaceExt } from '../common';
+import { mergeCustomViteConfig, replaceExt } from '../common/index.js';
-import { CSS_LANG } from '../common/css';
+import { CSS_LANG } from '../common/css.js';
-import { genPackageEntry } from './gen-package-entry';
+import { genPackageEntry } from './gen-package-entry.js';
-import { genPackageStyle } from './gen-package-style';
+import { genPackageStyle } from './gen-package-style.js';
-import { genSiteMobileShared } from './gen-site-mobile-shared';
+import { genSiteMobileShared } from './gen-site-mobile-shared.js';
-import { genSiteDesktopShared } from './gen-site-desktop-shared';
+import { genSiteDesktopShared } from './gen-site-desktop-shared.js';
-import { genStyleDepsMap } from './gen-style-deps-map';
+import { genStyleDepsMap } from './gen-style-deps-map.js';
-import { PACKAGE_ENTRY_FILE, PACKAGE_STYLE_FILE } from '../common/constant';
+import { PACKAGE_ENTRY_FILE, PACKAGE_STYLE_FILE } from '../common/constant.js';
 
 export async function genSiteEntry(): Promise<void> {
   return new Promise((resolve, reject) => {
@@ -44,6 +45,7 @@ export async function compileSite(production = false) {
     const server = await createServer(config);
     await server.listen();
 
+    const require = createRequire(import.meta.url);
     const { version } = require('vite/package.json');
     const viteInfo = chalk.cyan(`vite v${version}`);
     console.log(`\n  ${viteInfo}` + chalk.green(` dev server running at:\n`));

packages/vant-cli/src/compiler/compile-style.ts

@@ -1,10 +1,10 @@
 import { parse } from 'path';
 import { readFileSync, writeFileSync } from 'fs';
-import { replaceExt } from '../common';
+import { replaceExt } from '../common/index.js';
-import { compileCss } from './compile-css';
+import { compileCss } from './compile-css.js';
-import { compileLess } from './compile-less';
+import { compileLess } from './compile-less.js';
-import { compileSass } from './compile-sass';
+import { compileSass } from './compile-sass.js';
-import { consola } from '../common/logger';
+import { consola } from '../common/logger.js';
 
 async function compileFile(filePath: string) {
   const parsedPath = parse(filePath);

packages/vant-cli/src/compiler/gen-component-style.ts

@@ -2,19 +2,21 @@
  * Build style entry of all components
  */
 
+import fse from 'fs-extra';
+import { createRequire } from 'module';
 import { sep, join, relative } from 'path';
-import { outputFileSync } from 'fs-extra';
+import { getComponents, replaceExt } from '../common/index.js';
-import { getComponents, replaceExt } from '../common';
+import { CSS_LANG, getCssBaseFile } from '../common/css.js';
-import { CSS_LANG, getCssBaseFile } from '../common/css';
+import { checkStyleExists } from './gen-style-deps-map.js';
-import { checkStyleExists } from './gen-style-deps-map';
 import {
   ES_DIR,
   SRC_DIR,
   LIB_DIR,
   STYLE_DEPS_JSON_FILE,
-} from '../common/constant';
+} from '../common/constant.js';
 
 function getDeps(component: string): string[] {
+  const require = createRequire(import.meta.url);
   const styleDepsJson = require(STYLE_DEPS_JSON_FILE);
 
   if (styleDepsJson.map[component]) {
@@ -73,7 +75,7 @@ function genEntry(params: {
 
     content += depsPath.map(template).join('\n');
     content = content.replace(new RegExp('\\' + sep, 'g'), '/');
-    outputFileSync(outputFile, content);
+    fse.outputFileSync(outputFile, content);
   });
 }
 
@@ -81,6 +83,7 @@ export function genComponentStyle(
   options: { cache: boolean } = { cache: true }
 ) {
   if (!options.cache) {
+    const require = createRequire(import.meta.url);
     delete require.cache[STYLE_DEPS_JSON_FILE];
   }
 

packages/vant-cli/src/compiler/gen-package-entry.ts

@@ -1,12 +1,12 @@
-import { get } from 'lodash';
+import { get } from 'lodash-es';
 import { join } from 'path';
 import {
   pascalize,
   getComponents,
   smartOutputFile,
   normalizePath,
-} from '../common';
+} from '../common/index.js';
-import { SRC_DIR, getPackageJson, getVantConfig } from '../common/constant';
+import { SRC_DIR, getPackageJson, getVantConfig } from '../common/constant.js';
 
 type PathResolver = (path: string) => string;
 

packages/vant-cli/src/compiler/gen-package-style.ts

@@ -1,8 +1,9 @@
 import { join } from 'path';
-import { existsSync } from 'fs-extra';
+import { existsSync } from 'fs';
-import { smartOutputFile, normalizePath } from '../common';
+import { createRequire } from 'module';
-import { CSS_LANG, getCssBaseFile } from '../common/css';
+import { smartOutputFile, normalizePath } from '../common/index.js';
-import { SRC_DIR, STYLE_DEPS_JSON_FILE } from '../common/constant';
+import { CSS_LANG, getCssBaseFile } from '../common/css.js';
+import { SRC_DIR, STYLE_DEPS_JSON_FILE } from '../common/constant.js';
 
 type Options = {
   outputPath: string;
@@ -10,6 +11,7 @@ type Options = {
 };
 
 export function genPackageStyle(options: Options) {
+  const require = createRequire(import.meta.url);
   const styleDepsJson = require(STYLE_DEPS_JSON_FILE);
   const ext = '.' + CSS_LANG;
 

packages/vant-cli/src/compiler/gen-site-desktop-shared.ts

@@ -1,20 +1,20 @@
 import glob from 'fast-glob';
 import { join, parse } from 'path';
-import { existsSync, readFileSync, readdirSync } from 'fs-extra';
+import { existsSync, readFileSync, readdirSync } from 'fs';
 import {
   pascalize,
   getVantConfig,
   smartOutputFile,
   normalizePath,
   isDev,
-} from '../common';
+} from '../common/index.js';
 import {
   SRC_DIR,
   DOCS_DIR,
   getPackageJson,
   VANT_CONFIG_FILE,
   SITE_DESKTOP_SHARED_FILE,
-} from '../common/constant';
+} from '../common/constant.js';
 
 type DocumentItem = {
   name: string;

packages/vant-cli/src/compiler/gen-site-mobile-shared.ts

@@ -1,6 +1,6 @@
 import { join } from 'path';
-import { existsSync, readdirSync } from 'fs-extra';
+import { existsSync, readdirSync } from 'fs';
-import { SRC_DIR, SITE_MOBILE_SHARED_FILE } from '../common/constant';
+import { SRC_DIR, SITE_MOBILE_SHARED_FILE } from '../common/constant.js';
 import {
   pascalize,
   removeExt,
@@ -8,8 +8,8 @@ import {
   getVantConfig,
   smartOutputFile,
   normalizePath,
-} from '../common';
+} from '../common/index.js';
-import { CSS_LANG } from '../common/css';
+import { CSS_LANG } from '../common/css.js';
 
 type DemoItem = {
   name: string;

packages/vant-cli/src/compiler/gen-style-deps-map.ts

@@ -1,9 +1,9 @@
 import { relative, sep, join } from 'path';
-import { CSS_LANG } from '../common/css';
+import { CSS_LANG } from '../common/css.js';
-import { existsSync } from 'fs-extra';
+import { existsSync } from 'fs';
-import { getDeps, clearDepsCache, fillExt } from './get-deps';
+import { getDeps, clearDepsCache, fillExt } from './get-deps.js';
-import { getComponents, smartOutputFile } from '../common';
+import { getComponents, smartOutputFile } from '../common/index.js';
-import { SRC_DIR, STYLE_DEPS_JSON_FILE } from '../common/constant';
+import { SRC_DIR, STYLE_DEPS_JSON_FILE } from '../common/constant.js';
 
 function matchPath(path: string, component: string): boolean {
   const p = relative(SRC_DIR, path);

packages/vant-cli/src/compiler/gen-vetur-config.ts

@@ -1,11 +1,11 @@
 import markdownVetur from '@vant/markdown-vetur';
-import { get } from 'lodash';
+import { get } from 'lodash-es';
 import {
   SRC_DIR,
   VETUR_DIR,
   getVantConfig,
   getPackageJson,
-} from '../common/constant';
+} from '../common/constant.js';
 
 // generate vetur tags & attributes
 export function genVeturConfig() {

packages/vant-cli/src/compiler/get-deps.ts

@@ -1,12 +1,13 @@
 import { join } from 'path';
-import { SCRIPT_EXTS } from '../common/constant';
+import { SCRIPT_EXTS } from '../common/constant.js';
-import { readFileSync, existsSync } from 'fs-extra';
+import { readFileSync, existsSync } from 'fs';
 
 let depsMap: Record<string, string[]> = {};
 let existsCache: Record<string, boolean> = {};
 
 // https://regexr.com/47jlq
-const IMPORT_RE = /import\s+?(?:(?:(?:[\w*\s{},]*)\s+from(\s+)?)|)(?:(?:".*?")|(?:'.*?'))[\s]*?(?:;|$|)/g;
+const IMPORT_RE =
+  /import\s+?(?:(?:(?:[\w*\s{},]*)\s+from(\s+)?)|)(?:(?:".*?")|(?:'.*?'))[\s]*?(?:;|$|)/g;
 
 function matchImports(code: string): string[] {
   const imports = code.match(IMPORT_RE) || [];

packages/vant-cli/src/compiler/vant-cli-release-plugin.ts

@@ -1,6 +1,6 @@
 import releaseIt from 'release-it';
-import { build } from '../commands/build';
+import { build } from '../commands/build.js';
-import { changelog } from '../commands/changelog';
+import { changelog } from '../commands/changelog.js';
 
 class VantCliReleasePlugin extends releaseIt.Plugin {
   async beforeRelease() {

packages/vant-cli/src/config/jest.setup.ts

@@ -1 +0,0 @@
-import 'jest-canvas-mock';

packages/vant-cli/src/config/vite.package.ts

@@ -1,7 +1,7 @@
 import { join } from 'path';
 import type { InlineConfig } from 'vite';
-import { setBuildTarget } from '../common';
+import { setBuildTarget } from '../common/index.js';
-import { CWD, ES_DIR, getVantConfig, LIB_DIR } from '../common/constant';
+import { CWD, ES_DIR, getVantConfig, LIB_DIR } from '../common/constant.js';
 
 export function getViteConfigForPackage(minify: boolean): InlineConfig {
   setBuildTarget('package');

packages/vant-cli/src/config/vite.site.ts

@@ -1,16 +1,17 @@
 import { join } from 'path';
-import { get } from 'lodash';
+import { get } from 'lodash-es';
+import { createRequire } from 'module';
 import hljs from 'highlight.js';
 import vitePluginMd from 'vite-plugin-md';
 import vitePluginVue from '@vitejs/plugin-vue';
 import vitePluginJsx from '@vitejs/plugin-vue-jsx';
-import { setBuildTarget, getVantConfig, isDev } from '../common';
+import { setBuildTarget, getVantConfig, isDev } from '../common/index.js';
 import {
   SITE_DIST_DIR,
   SITE_MOBILE_SHARED_FILE,
   SITE_DESKTOP_SHARED_FILE,
   SITE_SRC_DIR,
-} from '../common/constant';
+} from '../common/constant.js';
 import { injectHtml } from 'vite-plugin-html';
 import type { InlineConfig } from 'vite';
 import type MarkdownIt from 'markdown-it';
@@ -43,10 +44,7 @@ function markdownCardWrapper(htmlCode: string) {
 
 // add target="_blank" to all links
 function markdownLinkOpen(md: MarkdownIt) {
-  const defaultRender =
+  const defaultRender = md.renderer.rules.link_open;
-    md.renderer.rules.link_open ||
-    ((tokens, idx, options, env, self) =>
-      self.renderToken(tokens, idx, options));
 
   md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
     const aIndex = tokens[idx].attrIndex('target');
@@ -55,7 +53,11 @@ function markdownLinkOpen(md: MarkdownIt) {
       tokens[idx].attrPush(['target', '_blank']); // add new attribute
     }
 
-    return defaultRender(tokens, idx, options, env, self);
+    if (defaultRender) {
+      return defaultRender(tokens, idx, options, env, self);
+    }
+
+    return self.renderToken(tokens, idx, options);
   };
 }
 
@@ -117,6 +119,7 @@ export function getViteConfigForSiteDev(): InlineConfig {
           highlight: markdownHighlight,
         },
         markdownItSetup(md: MarkdownIt) {
+          const require = createRequire(import.meta.url);
           const { slugify } = require('transliteration');
           const markdownItAnchor = require('markdown-it-anchor');
 

packages/vant-cli/src/index.ts

@@ -1,15 +1,18 @@
 // @ts-ignore
-import packageJson from '../package.json';
+import fs from 'fs';
-import { dev } from './commands/dev';
+import { URL, fileURLToPath } from 'url';
-import { lint } from './commands/lint';
+import { dev } from './commands/dev.js';
-import { test } from './commands/jest';
+import { lint } from './commands/lint.js';
-import { clean } from './commands/clean';
+import { test } from './commands/jest.js';
-import { build } from './commands/build';
+import { clean } from './commands/clean.js';
-import { release } from './commands/release';
+import { build } from './commands/build.js';
-import { changelog } from './commands/changelog';
+import { release } from './commands/release.js';
-import { buildSite } from './commands/build-site';
+import { changelog } from './commands/changelog.js';
-import { commitLint } from './commands/commit-lint';
+import { buildSite } from './commands/build-site.js';
+import { commitLint } from './commands/commit-lint.js';
 
+const packagePath = fileURLToPath(new URL('../package.json', import.meta.url));
+const packageJson = JSON.parse(fs.readFileSync(packagePath, 'utf-8'));
 export const cliVersion: string = packageJson.version;
 
 process.env.VANT_CLI_VERSION = cliVersion;

packages/vant-cli/tsconfig.json

@@ -2,11 +2,12 @@
   "compilerOptions": {
     "target": "ES2019",
     "outDir": "./lib",
-    "module": "commonjs",
+    "module": "ESNext",
     "strict": true,
     "declaration": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
+    "moduleResolution":"Node",
     "lib": ["esnext", "dom"]
   },
   "include": ["src/**/*"]

packages/vant/babel.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   presets: [
     [
-      '@vant/cli/preset',
+      '@vant/cli/preset.cjs',
       {
         loose: process.env.BUILD_TARGET === 'package',
         enableObjectSlots: false,

yarn.lock

@@ -1604,10 +1604,17 @@
   resolved "https://registry.nlark.com/@types/linkify-it/download/@types/linkify-it-3.0.2.tgz#fd2cd2edbaa7eaac7e7f3c1748b52a19143846c9"
   integrity sha1-/SzS7bqn6qx+fzwXSLUqGRQ4Rsk=
 
-"@types/lodash@^4.14.175":
+"@types/lodash-es@^4.14.175":
-  version "4.14.175"
+  version "4.17.5"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.175.tgz#b78dfa959192b01fae0ad90e166478769b215f45"
+  resolved "https://registry.nlark.com/@types/lodash-es/download/@types/lodash-es-4.17.5.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Flodash-es%2Fdownload%2F%40types%2Flodash-es-4.17.5.tgz#1c3fdd16849d84aea43890b1c60da379fb501353"
-  integrity sha512-XmdEOrKQ8a1Y/yxQFOMbC47G/V2VDO1GvMRnl4O75M4GW/abC5tnfzadQYkqEveqRM1dEJGFFegfPNA2vvx2iw==
+  integrity sha1-HD/dFoSdhK6kOJCxxg2jeftQE1M=
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.176"
+  resolved "https://registry.npmmirror.com/@types/lodash/download/@types/lodash-4.14.176.tgz?cache=0&sync_timestamp=1634771944515&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Flodash%2Fdownload%2F%40types%2Flodash-4.14.176.tgz#641150fc1cda36fbfa329de603bbb175d7ee20c0"
+  integrity sha1-ZBFQ/BzaNvv6Mp3mA7uxddfuIMA=
 
 "@types/markdown-it@^12.2.3":
   version "12.2.3"
@@ -5594,6 +5601,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.npm.taobao.org/lodash-es/download/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha1-Q+YmxG5lkbd1C+srUBFzkMYJ4+4=
+
 lodash.clonedeep@^4.5.0:
   version "4.5.0"
   resolved "https://registry.npm.taobao.org/lodash.clonedeep/download/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"