@modern-js/module-tools 1.0.0-alpha.3

package/dist/js/modern/tasks/build-watch-style.js

@@ -0,0 +1,213 @@
+/* eslint-disable max-statements */
+import * as path from 'path';
+import { fs, watch, WatchChangeType, Import } from '@modern-js/utils';
+const logger = Import.lazy('../features/build/logger', require);
+const cssConfig = Import.lazy('@modern-js/css-config', require);
+const hooks = Import.lazy('@modern-js/module-tools-hooks', require);
+const core = Import.lazy('@modern-js/core', require);
+const pluginNode = Import.lazy('@modern-js/plugin/node', require);
+const compiler = Import.lazy('@modern-js/style-compiler', require);
+const glob = Import.lazy('glob', require);
+const STYLE_DIRS = 'styles';
+const SRC_STYLE_DIRS = 'src';
+
+const checkStylesDirExist = option => {
+  const {
+    appDirectory
+  } = option;
+  return fs.existsSync(path.join(appDirectory, STYLE_DIRS));
+};
+
+const generatorFileAndReturnLog = (result, successMessage = '') => {
+  if (result.code === 0) {
+    for (const file of result.dists) {
+      fs.ensureFileSync(file.filename);
+      fs.writeFileSync(file.filename, file.content);
+    }
+
+    return successMessage;
+  } else {
+    return result.errors.join('\n');
+  }
+};
+
+const getPostcssOption = (appDirectory, modernConfig) => {
+  var _postcssOption$postcs;
+
+  const postcssOption = cssConfig.getPostcssConfig(appDirectory, modernConfig, false);
+  return {
+    plugins: (postcssOption === null || postcssOption === void 0 ? void 0 : (_postcssOption$postcs = postcssOption.postcssOptions) === null || _postcssOption$postcs === void 0 ? void 0 : _postcssOption$postcs.plugins) || [],
+    enableSourceMap: (postcssOption === null || postcssOption === void 0 ? void 0 : postcssOption.sourceMap) || false,
+    options: {}
+  };
+};
+
+const copyOriginStyleFiles = ({
+  targetDir,
+  outputDir
+}) => {
+  const styleFiles = glob.sync(`${targetDir}/**/*.{css,sass,scss,less}`);
+
+  if (styleFiles.length > 0) {
+    fs.ensureDirSync(outputDir);
+  }
+
+  for (const styleFile of styleFiles) {
+    const file = path.relative(targetDir, styleFile);
+    fs.copyFileSync(styleFile, path.join(outputDir, file));
+  }
+};
+
+const logCompilerMessage = compilerMessage => {
+  console.info(logger.clearFlag);
+  console.info(compilerMessage.src);
+  console.info(compilerMessage.styles);
+};
+
+const taskMain = async ({
+  modernConfig,
+  appContext
+}) => {
+  const {
+    assetsPath = 'styles',
+    path: outputPath = 'dist',
+    jsPath = 'js',
+    importStyle
+  } = modernConfig.output;
+  const {
+    appDirectory
+  } = appContext;
+  const lessOption = await core.mountHook().moduleLessConfig({
+    modernConfig
+  }, // eslint-disable-next-line @typescript-eslint/require-await
+  {
+    onLast: async _ => null
+  });
+  const sassOption = await core.mountHook().moduleSassConfig({
+    modernConfig
+  }, // eslint-disable-next-line @typescript-eslint/require-await
+  {
+    onLast: async _ => null
+  });
+  const postcssOption = getPostcssOption(appDirectory, modernConfig);
+  const existStylesDir = checkStylesDirExist({
+    appDirectory
+  });
+  const compilerMessage = {
+    src: '',
+    styles: ''
+  }; // 编译 styles 目录样式
+
+  let styleEmitter = null;
+
+  if (existStylesDir) {
+    styleEmitter = compiler.styleCompiler({
+      watch: true,
+      projectDir: appDirectory,
+      stylesDir: path.resolve(appDirectory, STYLE_DIRS),
+      outDir: path.join(appDirectory, outputPath, assetsPath),
+      enableVirtualDist: true,
+      compilerOption: {
+        less: lessOption,
+        sass: sassOption,
+        postcss: postcssOption
+      }
+    });
+    styleEmitter.on(compiler.BuildWatchEvent.firstCompiler, styleResult => {
+      compilerMessage.styles = generatorFileAndReturnLog(styleResult, `[Style Compiler] Successfully for 'styles' dir`);
+      logCompilerMessage(compilerMessage);
+    });
+    styleEmitter.on(compiler.BuildWatchEvent.compilering, () => {
+      compilerMessage.styles = `[${assetsPath}] Compiling...`;
+      logCompilerMessage(compilerMessage);
+    });
+    styleEmitter.on(compiler.BuildWatchEvent.watchingCompiler, styleResult => {
+      compilerMessage.styles = generatorFileAndReturnLog(styleResult, `[Style Compiler] Successfully for 'styles' dir`);
+      logCompilerMessage(compilerMessage);
+    }); // await styleEmitter.watch();
+  } // 编译 src 内的样式代码
+
+
+  const srcDir = path.resolve(appDirectory, SRC_STYLE_DIRS);
+  const outputDirToSrc = path.join(appDirectory, outputPath, jsPath, assetsPath);
+
+  if (importStyle === 'compiled-code') {
+    compilerMessage.src = `[src] Compiling`;
+    const srcStyleEmitter = compiler.styleCompiler({
+      watch: true,
+      projectDir: appDirectory,
+      stylesDir: srcDir,
+      outDir: outputDirToSrc,
+      enableVirtualDist: true,
+      compilerOption: {
+        less: lessOption,
+        sass: sassOption,
+        postcss: postcssOption
+      }
+    });
+    srcStyleEmitter.on(compiler.BuildWatchEvent.firstCompiler, srcStyleResult => {
+      compilerMessage.src = generatorFileAndReturnLog(srcStyleResult, `[Style Compiler] Successfully for 'src' dir`);
+      logCompilerMessage(compilerMessage);
+    });
+    srcStyleEmitter.on(compiler.BuildWatchEvent.compilering, () => {
+      compilerMessage.src = `[src] Compiling`;
+      logCompilerMessage(compilerMessage);
+    });
+    srcStyleEmitter.on(compiler.BuildWatchEvent.watchingCompiler, srcStyleResult => {
+      compilerMessage.src = generatorFileAndReturnLog(srcStyleResult, `[Style Compiler] Successfully for 'src' dir`);
+      logCompilerMessage(compilerMessage);
+    });
+    styleEmitter && (await styleEmitter.watch());
+    await srcStyleEmitter.watch();
+  } else {
+    compilerMessage.src = `['src' dir] Copying in progress`;
+    styleEmitter && (await styleEmitter.watch());
+    logCompilerMessage(compilerMessage);
+    copyOriginStyleFiles({
+      targetDir: srcDir,
+      outputDir: outputDirToSrc
+    });
+    compilerMessage.src = `[Style Compiler] Successfully for 'src' dir`;
+    logCompilerMessage(compilerMessage);
+    watch(`${srcDir}/**/*.{css,less,sass,scss}`, ({
+      changeType,
+      changedFilePath
+    }) => {
+      compilerMessage.src = `['src' dir] Copying in progress`;
+      logCompilerMessage(compilerMessage);
+
+      if (changeType === WatchChangeType.UNLINK) {
+        const removeFile = path.normalize(`${outputDirToSrc}/${path.relative(srcDir, changedFilePath)}`);
+        fs.removeSync(removeFile);
+      } else {
+        copyOriginStyleFiles({
+          targetDir: srcDir,
+          outputDir: outputDirToSrc
+        });
+      }
+
+      compilerMessage.src = `[Style Compiler] Successfully for 'src' dir`;
+      logCompilerMessage(compilerMessage);
+    });
+  }
+};
+
+(async () => {
+  pluginNode.enable();
+  hooks.buildLifeCycle();
+  const {
+    resolved: modernConfig,
+    appContext
+  } = await core.cli.init();
+  await core.manager.run(async () => {
+    try {
+      await taskMain({
+        modernConfig,
+        appContext
+      });
+    } catch (e) {
+      console.error(e.message);
+    }
+  });
+})();
+/* eslint-enable max-statements */

package/dist/js/modern/tasks/constants.js

@@ -0,0 +1 @@
+export const tempTsconfigName = './tsconfig.temp.json';

package/dist/js/modern/tasks/copy-assets.js

@@ -0,0 +1,108 @@
+import * as path from 'path';
+import { fs, watch, WatchChangeType, Import } from '@modern-js/utils';
+const argv = Import.lazy('process.argv', require);
+const glob = Import.lazy('glob', require);
+const core = Import.lazy('@modern-js/core', require);
+const pluginNode = Import.lazy('@modern-js/plugin/node', require);
+const copyUtils = Import.lazy('../utils/copy', require);
+const STYLE_DIRS = 'styles';
+const SRC_DIRS = 'src';
+
+const copyAssets = ({
+  targetDir,
+  outputDir
+}) => {
+  const assetsFiles = glob.sync(`${targetDir}/**/*.*`, {
+    ignore: ['**/*.{js,jsx,ts,tsx,d.ts,scss,less,css,sass}']
+  });
+
+  if (assetsFiles.length > 0) {
+    fs.ensureDirSync(outputDir);
+  }
+
+  for (const resource of assetsFiles) {
+    const file = path.relative(targetDir, resource);
+    fs.ensureDirSync(path.dirname(path.resolve(outputDir, file)));
+    fs.copyFileSync(resource, path.resolve(outputDir, file));
+  }
+};
+
+const watchAssets = ({
+  targetDir,
+  outputDir
+}) => {
+  watch(`${targetDir}/**/*.*`, ({
+    changeType,
+    changedFilePath
+  }) => {
+    if (changeType === WatchChangeType.UNLINK) {
+      const removeFile = path.normalize(`${outputDir}/${path.relative(targetDir, changedFilePath)}`);
+      fs.removeSync(removeFile);
+      return;
+    }
+
+    const file = path.relative(targetDir, changedFilePath);
+    fs.copyFileSync(changedFilePath, path.resolve(outputDir, file));
+  }, ['**/*.{js,jsx,ts,tsx,d.ts,scss,less,css,sass}']);
+};
+
+const taskMain = ({
+  modernConfig,
+  appContext
+}) => {
+  const processArgv = argv(process.argv.slice(2));
+  const config = processArgv({});
+  const {
+    appDirectory
+  } = appContext;
+  const {
+    jsPath = 'js',
+    assetsPath = 'styles',
+    path: outputPath = 'dist'
+  } = modernConfig.output;
+  const srcDir = path.join(appDirectory, SRC_DIRS);
+  const outputDirToSrc = path.join(appDirectory, outputPath, jsPath, assetsPath);
+  const styleDir = path.join(appDirectory, STYLE_DIRS);
+  const outputDirToStyle = path.join(appDirectory, outputPath, assetsPath);
+  copyAssets({
+    targetDir: srcDir,
+    outputDir: outputDirToSrc
+  });
+  copyAssets({
+    targetDir: styleDir,
+    outputDir: outputDirToStyle
+  });
+  copyUtils.copyTask({
+    modernConfig,
+    appContext
+  });
+
+  if (config.watch) {
+    watchAssets({
+      targetDir: srcDir,
+      outputDir: outputDirToSrc
+    });
+    watchAssets({
+      targetDir: styleDir,
+      outputDir: outputDirToStyle
+    });
+  }
+};
+
+(async () => {
+  pluginNode.enable();
+  const {
+    resolved: modernConfig,
+    appContext
+  } = await core.cli.init();
+  core.manager.run(() => {
+    try {
+      taskMain({
+        modernConfig,
+        appContext
+      });
+    } catch (e) {
+      console.error(e.message);
+    }
+  });
+})();

package/dist/js/modern/tasks/generator-dts.js

@@ -0,0 +1,220 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import * as path from 'path';
+import * as os from 'os';
+import { Import, fs } from '@modern-js/utils';
+const tsPathsTransform = Import.lazy('../utils/tspaths-transform', require);
+const babel = Import.lazy('../utils/babel', require);
+const constants = Import.lazy('./constants', require);
+const core = Import.lazy('@modern-js/core', require);
+const pluginNode = Import.lazy('@modern-js/plugin/node', require);
+const execa = Import.lazy('execa', require);
+const JSON5 = Import.lazy('json5', require);
+const argv = Import.lazy('process.argv', require);
+const deepMerge = Import.lazy('lodash.merge', require);
+const glob = Import.lazy('glob', require);
+let removeTsconfigPath = '';
+
+const generatorTsConfig = (projectTsconfig, {
+  appDirectory,
+  distDir,
+  sourceDir: _sourceDir = 'src'
+}) => {
+  var _projectTsconfig$comp, _projectTsconfig$comp2, _projectTsconfig$incl, _projectTsconfig$excl;
+
+  const tempPath = path.resolve(appDirectory, './node_modules');
+  const resolvePath = path.relative(tempPath, appDirectory); // const rootDir = projectTsconfig.compilerOptions?.rootDir
+  //   ? path.join(resolvePath, projectTsconfig.compilerOptions?.rootDir)
+  //   : resolvePath;
+  // 目前限制 rootDir 的路径为 sourceDir
+
+  const rootDir = path.join(resolvePath, _sourceDir);
+  const baseUrl = (_projectTsconfig$comp = projectTsconfig.compilerOptions) !== null && _projectTsconfig$comp !== void 0 && _projectTsconfig$comp.baseUrl ? path.join(appDirectory, (_projectTsconfig$comp2 = projectTsconfig.compilerOptions) === null || _projectTsconfig$comp2 === void 0 ? void 0 : _projectTsconfig$comp2.baseUrl) : appDirectory; // if include = ['src'], final include should be ['../src']
+
+  const include = (_projectTsconfig$incl = projectTsconfig.include) === null || _projectTsconfig$incl === void 0 ? void 0 : _projectTsconfig$incl.map(includePath => path.join(resolvePath, includePath));
+  const exclude = (_projectTsconfig$excl = projectTsconfig.exclude) === null || _projectTsconfig$excl === void 0 ? void 0 : _projectTsconfig$excl.map(excludePath => path.join(resolvePath, excludePath));
+  const resetConfig = {
+    compilerOptions: {
+      rootDir,
+      baseUrl,
+      // Ensure that .d.ts files are created by tsc, but not .js files
+      declaration: true,
+      emitDeclarationOnly: true,
+      outDir: distDir
+    },
+    include,
+    exclude
+  };
+  const recommendOption = {
+    // Ensure that Babel can safely transpile files in the TypeScript project
+    compilerOptions: {
+      isolatedModules: true
+    }
+  };
+  const tempTsconfigPath = path.join(tempPath, constants.tempTsconfigName);
+  fs.ensureFileSync(tempTsconfigPath);
+  fs.writeJSONSync(tempTsconfigPath, deepMerge(recommendOption, projectTsconfig, // 此处是必须要覆盖用户默认配置
+  resetConfig));
+  return tempTsconfigPath;
+};
+
+const getProjectTsconfig = tsconfigPath => {
+  if (!tsconfigPath || !fs.existsSync(tsconfigPath)) {
+    return {};
+  }
+
+  return JSON5.parse(fs.readFileSync(tsconfigPath, 'utf-8'));
+};
+
+const resolveLog = (childProgress, {
+  tsCheck: _tsCheck = false,
+  watch: _watch = false
+} = {}) => {
+  var _childProgress$stdout, _childProgress$stdout2, _childProgress$stderr;
+
+  /**
+   * tsc 所有的log信息都是从stdout data 事件中获取
+   * 正常模式下，如果有报错信息，交给 resolveLog 后面的逻辑来处理
+   * watch 模式下，则使用这里的信息
+   */
+  (_childProgress$stdout = childProgress.stdout) === null || _childProgress$stdout === void 0 ? void 0 : _childProgress$stdout.on('data', data => {
+    if (!_tsCheck) {
+      return;
+    }
+
+    if (_watch) {
+      console.info(data.toString());
+    }
+  }); // 正常以下内容都不会触发，因为tsc 不会产生以下类型的log信息，不过防止意外情况
+
+  (_childProgress$stdout2 = childProgress.stdout) === null || _childProgress$stdout2 === void 0 ? void 0 : _childProgress$stdout2.on('error', error => {
+    console.error(error.message);
+  });
+  (_childProgress$stderr = childProgress.stderr) === null || _childProgress$stderr === void 0 ? void 0 : _childProgress$stderr.on('data', chunk => {
+    console.error(chunk.toString());
+  });
+};
+
+const generatorDts = async (_, config) => {
+  const {
+    tsconfigPath,
+    distDir,
+    sourceDirName = 'src',
+    projectData: {
+      appDirectory
+    },
+    tsCheck = false,
+    watch = false
+  } = config;
+  const userTsconfig = getProjectTsconfig(tsconfigPath);
+  const willDeleteTsconfigPath = generatorTsConfig(userTsconfig, {
+    appDirectory,
+    distDir,
+    sourceDir: sourceDirName
+  });
+  removeTsconfigPath = willDeleteTsconfigPath;
+  const tscBinFile = path.join(appDirectory, './node_modules/.bin/tsc');
+  const watchParams = watch ? ['-w'] : [];
+  const childProgress = execa(tscBinFile, ['-p', willDeleteTsconfigPath, ...watchParams], {
+    stdio: 'pipe',
+    cwd: appDirectory
+  });
+  resolveLog(childProgress, {
+    tsCheck,
+    watch
+  });
+
+  try {
+    await childProgress;
+    console.info('[Tsc Compiler]: Successfully');
+  } catch (e) {
+    if (!tsCheck) {
+      console.warn(`There are some type issues, which can be checked by configuring 'source.enableTsChecker = true' ${os.EOL} in modern.config.js`);
+    } else {
+      const isRecord = input => typeof input === 'object'; // 通过使用 execa，可以将tsc 的 data 类型的报错信息变为异常错误信息
+
+
+      if (isRecord(e)) {
+        console.error(e.stdout);
+      }
+    }
+  }
+
+  fs.removeSync(willDeleteTsconfigPath);
+};
+
+const resolveAlias = (modernConfig, config, watchFilenames = []) => {
+  const {
+    output
+  } = modernConfig;
+  const defaultPaths = {
+    '@': ['./src']
+  };
+  const dtsDistPath = `${config.distDir}/**/*.d.ts`;
+  const dtsFilenames = watchFilenames.length > 0 ? watchFilenames : glob.sync(dtsDistPath, {
+    absolute: true
+  });
+  const alias = babel.getFinalAlias(modernConfig, {
+    appDirectory: config.projectData.appDirectory,
+    tsconfigPath: config.tsconfigPath || path.join(config.projectData.appDirectory, './tsconfig.json'),
+    sourceAbsDir: config.distDir
+  });
+  const mergedPaths = alias.isTsPath ? alias.paths || {} : _objectSpread(_objectSpread({}, defaultPaths), alias.paths || {});
+  const result = tsPathsTransform.transformDtsAlias({
+    filenames: dtsFilenames,
+    baseUrl: path.join(config.projectData.appDirectory, output.path || 'dist'),
+    paths: mergedPaths
+  });
+
+  for (const r of result) {
+    fs.writeFileSync(r.path, r.content);
+  }
+};
+
+const taskMain = async ({
+  modernConfig
+}) => {
+  const processArgv = argv(process.argv.slice(2));
+  const config = processArgv({
+    appDirectory: process.cwd(),
+    srcDir: 'src',
+    distDir: 'dist/types',
+    tsconfigPath: './tsconfig.json',
+    sourceDirName: 'src'
+  });
+  const option = {
+    srcDir: config.srcDir,
+    distDir: config.distDir,
+    projectData: {
+      appDirectory: config.appDirectory
+    },
+    tsconfigPath: config.tsconfigPath,
+    watch: config.watch,
+    tsCheck: config.tsCheck,
+    sourceDirName: config.sourceDirName
+  };
+  await generatorDts(modernConfig, option); // TODO: watch 模式下无法转换
+
+  resolveAlias(modernConfig, option);
+};
+
+(async () => {
+  pluginNode.enable();
+  const {
+    resolved
+  } = await core.cli.init();
+  await core.manager.run(async () => {
+    try {
+      await taskMain({
+        modernConfig: resolved
+      });
+    } catch (e) {
+      console.error(e.message);
+      fs.removeSync(removeTsconfigPath);
+    }
+  });
+})();

package/dist/js/modern/utils/babel.js

@@ -0,0 +1,85 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { getBabelConfig, getModuleBabelChain } from '@modern-js/babel-preset-module';
+import { applyOptionsChain, getAlias } from '@modern-js/utils';
+export const getFinalAlias = (modernConfig, option) => {
+  const aliasConfig = getAlias(modernConfig.source.alias, option); // 排除内部别名，因为不需要处理
+
+  const finalPaths = {};
+  const internalAliasPrefix = '@modern-js/runtime';
+
+  if (aliasConfig.paths && typeof aliasConfig.paths === 'object') {
+    const pathsKey = Object.keys(aliasConfig.paths);
+
+    for (const key of pathsKey) {
+      if (!key.includes(internalAliasPrefix)) {
+        finalPaths[key] = aliasConfig.paths[key];
+      }
+    }
+  }
+
+  aliasConfig.paths = finalPaths;
+  return aliasConfig;
+};
+export const resolveBabelConfig = (appDirectory, modernConfig, option) => {
+  const {
+    source: {
+      envVars,
+      globalVars,
+      jsxTransformRuntime = 'automatic'
+    },
+    output: {
+      importStyle
+    },
+    tools: {
+      lodash: userLodashOption
+    }
+  } = modernConfig; // alias config
+
+  const aliasConfig = getFinalAlias(modernConfig, _objectSpread({
+    appDirectory
+  }, option)); // lodash config
+
+  const lodashOptions = applyOptionsChain({
+    id: ['lodash', 'ramda']
+  }, // TODO: 需要处理类型问题
+  userLodashOption); // babel config
+
+  const internalBabelConfig = getBabelConfig({
+    appDirectory,
+    enableReactPreset: true,
+    enableTypescriptPreset: true,
+    alias: aliasConfig,
+    envVars,
+    globalVars,
+    lodashOptions,
+    jsxTransformRuntime,
+    importStyle
+  }, {
+    type: option.type,
+    syntax: option.syntax
+  });
+  const babelChain = getModuleBabelChain({
+    appDirectory,
+    enableReactPreset: true,
+    enableTypescriptPreset: true,
+    alias: aliasConfig,
+    envVars,
+    globalVars,
+    lodashOptions,
+    jsxTransformRuntime,
+    importStyle
+  }, {
+    type: option.type,
+    syntax: option.syntax
+  });
+  const userBabelConfig = modernConfig.tools.babel;
+  return applyOptionsChain(internalBabelConfig, // TODO: 感觉 userBabelConfig 的类型应该是TransformOptions
+  userBabelConfig, {
+    chain: babelChain
+  });
+};

package/dist/js/modern/utils/color.js

@@ -0,0 +1,2 @@
+import { chalk } from '@modern-js/utils';
+export const devMenuTitle = chalk.rgb(255, 153, 0);