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

package/src/locale/index.ts

@@ -0,0 +1,15 @@
+import { Import } from '@modern-js/utils';
+
+import { ZH_LOCALE } from './zh';
+import { EN_LOCALE } from './en';
+
+const i18nPlugin: typeof import('@modern-js/plugin-i18n') = Import.lazy(
+  '@modern-js/plugin-i18n',
+  require,
+);
+
+const i18n = new i18nPlugin.I18n();
+
+const localeKeys = i18n.init('zh', { zh: ZH_LOCALE, en: EN_LOCALE });
+
+export { i18n, localeKeys };

package/src/locale/zh.ts

@@ -0,0 +1,21 @@
+export const ZH_LOCALE = {
+  command: {
+    build: {
+      describe: '构建模块命令',
+      watch: '使用 Watch 模式构建模块',
+      tsconfig: '指定 tsconfig.json 文件的路径',
+      style_only: '只构建样式文件',
+      platform: '构建其他平台产物',
+      no_tsc: '关闭 tsc 编译',
+      no_clear: '不清理产物目录',
+    },
+    dev: { describe: '本地开发命令' },
+    new: {
+      describe: '模块化工程方案中执行生成器',
+      debug: '开启 Debug 模式，打印调试日志信息',
+      config: '生成器运行默认配置(JSON 字符串)',
+      distTag: '生成器使用特殊的 npm Tag 版本',
+      registry: '生成器运行过程中定制 npm Registry',
+    },
+  },
+};

package/src/schema/index.ts

@@ -0,0 +1,4 @@
+import { sourceSchema } from './source';
+import { outputSchema } from './output';
+
+export const addSchema = () => [...sourceSchema, ...outputSchema];

package/src/schema/output.ts

@@ -0,0 +1,34 @@
+const PACKAGE_MODE_LIST = [
+  'universal-js',
+  'universal-js-lite',
+  'browser-js',
+  'browser-js-lite',
+  'node-js',
+];
+
+export const outputSchema = [
+  {
+    target: 'output.packageMode',
+    schema: { enum: PACKAGE_MODE_LIST },
+  },
+  {
+    target: 'output.packageFields',
+    schema: { typeof: 'object' },
+  },
+  {
+    target: 'output.disableTsChecker',
+    schema: { typeof: 'boolean' },
+  },
+  {
+    target: 'output.enableSourceMap',
+    schema: { typeof: 'boolean' },
+  },
+  {
+    target: 'output.importStyle',
+    schema: {
+      enum: ['compiled-code', 'source-code'],
+      // TODO: 目前default是无效的
+      default: 'source-code',
+    },
+  },
+];

package/src/schema/schema.d.ts

@@ -0,0 +1,13 @@
+// import '@modern-js/core';
+// import { PackageModeType, IPackageFields } from '../types';
+
+// declare module '@modern-js/core' {
+//   interface OutputConfig {
+//     packageMode: PackageModeType;
+//     packageFields: IPackageFields;
+//   }
+//   interface NormalizedSourceConfig {
+//     enableBlockRuntime: boolean;
+//     jsxTransformRuntime: 'classic' | 'automatic';
+//   }
+// }

package/src/schema/source.ts

@@ -0,0 +1,16 @@
+export const sourceSchema = [
+  // 启动区块运行时
+  {
+    target: 'source.enableBlockRuntime',
+    schema: { type: 'boolean' },
+  },
+  {
+    target: 'source.jsxTransformRuntime',
+    schema: {
+      // https://babeljs.io/docs/en/babel-preset-react#runtime
+      enum: ['classic', 'automatic'],
+      // TODO: 目前default是无效的
+      default: 'automatic',
+    },
+  },
+];

package/src/tasks/build-source-code.ts

@@ -0,0 +1,245 @@
+import { Import, fs } from '@modern-js/utils';
+import type { NormalizedConfig } from '@modern-js/core';
+import type { BabelOptions, IVirtualDist } from '@modern-js/babel-compiler';
+import type { ITsconfig } from '../types';
+
+const babelCompiler: typeof import('@modern-js/babel-compiler') = Import.lazy(
+  '@modern-js/babel-compiler',
+  require,
+);
+const glob: typeof import('glob') = Import.lazy('glob', require);
+const argv: typeof import('process.argv').default = Import.lazy(
+  'process.argv',
+  require,
+);
+const pluginNode: typeof import('@modern-js/plugin/node') = Import.lazy(
+  '@modern-js/plugin/node',
+  require,
+);
+const core: typeof import('@modern-js/core') = Import.lazy(
+  '@modern-js/core',
+  require,
+);
+const bc: typeof import('../utils/babel') = Import.lazy(
+  '../utils/babel',
+  require,
+);
+const ts: typeof import('../utils/tsconfig') = Import.lazy(
+  '../utils/tsconfig',
+  require,
+);
+
+export enum Compiler {
+  babel,
+  esbuild,
+  swc,
+}
+
+interface IBuildSourceCodeConfig {
+  babelConfig: BabelOptions;
+  srcRootDir: string;
+  willCompilerDirOrFile: string;
+  distDir: string;
+  compiler: Compiler;
+  projectData: {
+    appDirectory: string;
+  };
+  sourceMaps?: boolean;
+  tsconfigPath: string;
+}
+
+const runBabelCompiler = async (
+  willCompilerFiles: string[],
+  config: IBuildSourceCodeConfig,
+  babelConfig: BabelOptions = {},
+) => {
+  const { srcRootDir, distDir } = config;
+  // TODO: 判断lynx模式下，修改distFileExtMap: {'js': 'js', 'jsx': 'jsx', 'ts': 'js', 'tsx': 'jsx'}
+  return babelCompiler.compiler(
+    {
+      quiet: true,
+      enableVirtualDist: true,
+      rootDir: srcRootDir,
+      filenames: willCompilerFiles,
+      distDir,
+    },
+    babelConfig,
+  );
+};
+
+export const getWillCompilerCode = (
+  srcDirOrFile: string,
+  option: { tsconfig: ITsconfig | null; isTsProject: boolean },
+) => {
+  const { tsconfig, isTsProject } = option;
+  // 如果是一个文件路径，则直接返回
+  if (fs.existsSync(srcDirOrFile) && fs.lstatSync(srcDirOrFile).isFile()) {
+    return [srcDirOrFile];
+  }
+
+  const getExts = (isTs: boolean) => {
+    // TODO: 是否受控tsconfig.json 里的jsx配置
+    let exts = [];
+    if (isTs) {
+      exts = tsconfig?.compilerOptions?.allowJs
+        ? ['.ts', '.tsx', '.js', '.jsx']
+        : ['.ts', '.tsx'];
+    } else {
+      exts = ['.js', '.jsx'];
+    }
+
+    return exts;
+  };
+
+  const exts = getExts(isTsProject);
+  const globPattern = `${srcDirOrFile}/**/*{${exts.join(',')}}`;
+  const files = glob.sync(globPattern, {
+    ignore: [`${srcDirOrFile}/**/*.d.ts`],
+  });
+
+  return files;
+};
+
+export const buildSourceCode = async (config: IBuildSourceCodeConfig) => {
+  const {
+    compiler,
+    willCompilerDirOrFile,
+    tsconfigPath,
+    sourceMaps,
+    babelConfig,
+  } = config;
+  const tsconfig = ts.readTsConfig(tsconfigPath);
+  const willCompilerFiles = getWillCompilerCode(willCompilerDirOrFile, {
+    tsconfig,
+    isTsProject: Boolean(tsconfig),
+  });
+
+  let distSet = null;
+  if (compiler === Compiler.babel) {
+    distSet = await runBabelCompiler(willCompilerFiles, config, {
+      ...babelConfig,
+      sourceMaps,
+    });
+  } else {
+    distSet = {
+      code: 1,
+      message: 'no compiler',
+    };
+  }
+
+  return distSet;
+};
+
+const generatorRealFiles = (virtualDists: IVirtualDist[]) => {
+  for (const virtualDist of virtualDists) {
+    const { distPath, code, sourcemap, sourceMapPath } = virtualDist;
+    fs.ensureFileSync(distPath);
+    fs.writeFileSync(distPath, code);
+    if (sourcemap.length > 0) {
+      fs.ensureFileSync(sourceMapPath);
+      fs.writeFileSync(sourceMapPath, sourcemap);
+    }
+  }
+};
+
+export const initEnv = ({ syntax, type }: ITaskConfig) => {
+  if (syntax === 'es6+' && type === 'commonjs') {
+    return 'nodejs';
+  } else if (syntax === 'es6+' && type === 'module') {
+    return 'modern';
+  } else if (syntax === 'es5' && type === 'module') {
+    return 'legacy-browser';
+  }
+
+  return '';
+};
+
+interface ITaskConfig {
+  srcRootDir: string; // 源码的根目录
+  willCompilerDirOrFile: string; // 用于编译的源码文件或者源码目录
+  distDir: string;
+  appDirectory: string;
+  sourceMaps: boolean;
+  syntax: 'es5' | 'es6+';
+  type: 'module' | 'commonjs';
+  tsconfigPath: string;
+  copyDirs?: string;
+  compiler?: 'babel' | 'esbuild' | 'swc';
+  watch: boolean;
+}
+const defaultConfig: ITaskConfig = {
+  srcRootDir: `${process.cwd()}/src`,
+  willCompilerDirOrFile: `${process.cwd()}/src`,
+  distDir: './dist/js/temp',
+  compiler: 'babel',
+  appDirectory: '',
+  sourceMaps: false,
+  tsconfigPath: '',
+  syntax: 'es5',
+  type: 'module',
+  watch: false,
+};
+const taskMain = async ({
+  modernConfig,
+}: {
+  modernConfig: NormalizedConfig;
+}) => {
+  // 执行脚本的参数处理和相关需要配置的获取
+  const processArgv = argv(process.argv.slice(2));
+  const config = processArgv<ITaskConfig>(defaultConfig);
+  // process.env.BUILD_MODE = initEnv(config);
+  const compiler = Compiler.babel; // 目前暂时只支持 babel
+  const babelConfig = bc.resolveBabelConfig(config.appDirectory, modernConfig, {
+    sourceAbsDir: config.srcRootDir,
+    tsconfigPath: config.tsconfigPath,
+    syntax: config.syntax,
+    type: config.type,
+  });
+
+  const {
+    code,
+    message,
+    messageDetails,
+    virtualDists = [],
+  } = await buildSourceCode({
+    distDir: config.distDir,
+    srcRootDir: config.srcRootDir,
+    willCompilerDirOrFile: config.willCompilerDirOrFile,
+    sourceMaps: config.sourceMaps,
+    compiler,
+    projectData: { appDirectory: config.appDirectory },
+    tsconfigPath: config.tsconfigPath,
+    babelConfig,
+  });
+
+  if (code === 0) {
+    generatorRealFiles(virtualDists);
+    // 执行成功log使用 console.info
+    console.info('[Babel Compiler]: Successfully');
+  } else if (messageDetails && messageDetails.length > 0) {
+    console.error(message);
+    for (const detail of messageDetails || []) {
+      console.error(detail.content);
+    }
+  }
+
+  if (code === 0 && config.copyDirs) {
+    const copyList = config.copyDirs.split(',');
+    for (const copyDir of copyList) {
+      fs.ensureDirSync(copyDir);
+      fs.copySync(config.distDir, copyDir);
+    }
+  }
+};
+
+(async () => {
+  pluginNode.enable();
+  const { resolved } = await core.cli.init();
+  await core.manager.run(async () => {
+    try {
+      await taskMain({ modernConfig: resolved });
+    } catch (e) {
+      console.error(e);
+    }
+  });
+})();

package/src/tasks/build-style.ts

@@ -0,0 +1,175 @@
+import * as path from 'path';
+import { fs, Import } from '@modern-js/utils';
+import type { NormalizedConfig, IAppContext } from '@modern-js/core';
+import type { ICompilerResult, PostcssOption } from '@modern-js/style-compiler';
+import type { ModuleToolsOutput } from '../types';
+
+const cssConfig: typeof import('@modern-js/css-config') = Import.lazy(
+  '@modern-js/css-config',
+  require,
+);
+const core: typeof import('@modern-js/core') = Import.lazy(
+  '@modern-js/core',
+  require,
+);
+const compiler: typeof import('@modern-js/style-compiler') = Import.lazy(
+  '@modern-js/style-compiler',
+  require,
+);
+const glob: typeof import('glob') = Import.lazy('glob', require);
+const hooks: typeof import('@modern-js/module-tools-hooks') = Import.lazy(
+  '@modern-js/module-tools-hooks',
+  require,
+);
+const pluginNode: typeof import('@modern-js/plugin/node') = Import.lazy(
+  '@modern-js/plugin/node',
+  require,
+);
+
+const STYLE_DIRS = 'styles';
+const SRC_STYLE_DIRS = 'src';
+
+const checkStylesDirExist = (option: { appDirectory: string }) => {
+  const { appDirectory } = option;
+  return fs.existsSync(path.join(appDirectory, STYLE_DIRS));
+};
+
+const generatorFileOrLogError = (
+  result: ICompilerResult,
+  successMessage = '',
+) => {
+  if (result.code === 0 && result.dists.length > 0) {
+    for (const file of result.dists) {
+      fs.ensureFileSync(file.filename);
+      fs.writeFileSync(file.filename, file.content);
+    }
+    if (successMessage) {
+      console.info(successMessage);
+    }
+  } else {
+    for (const file of result.errors) {
+      console.error(file.error);
+    }
+  }
+};
+
+const getPostcssOption = (
+  appDirectory: string,
+  modernConfig: NormalizedConfig,
+): PostcssOption => {
+  const postcssOption = cssConfig.getPostcssConfig(
+    appDirectory,
+    modernConfig,
+    false,
+  );
+  return {
+    plugins: postcssOption?.postcssOptions?.plugins || [],
+    enableSourceMap: (postcssOption as any)?.sourceMap || false,
+    options: {},
+  } as any;
+};
+
+const copyOriginStyleFiles = ({
+  targetDir,
+  outputDir,
+}: {
+  targetDir: string;
+  outputDir: string;
+}) => {
+  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 taskMain = async ({
+  modernConfig,
+  appContext,
+}: {
+  modernConfig: NormalizedConfig;
+  appContext: IAppContext;
+}) => {
+  const {
+    assetsPath = 'styles',
+    path: outputPath = 'dist',
+    jsPath = 'js',
+  } = modernConfig.output as ModuleToolsOutput;
+  const { appDirectory } = appContext;
+
+  const lessOption = await (core.mountHook() as any).moduleLessConfig(
+    { modernConfig },
+    // eslint-disable-next-line @typescript-eslint/require-await
+    { onLast: async (_: any) => null as any },
+  );
+  const sassOption = await (core.mountHook() as any).moduleSassConfig(
+    { modernConfig },
+    // eslint-disable-next-line @typescript-eslint/require-await
+    { onLast: async (_: any) => null as any },
+  );
+  const postcssOption = getPostcssOption(appDirectory, modernConfig);
+  const { importStyle } = modernConfig.output as ModuleToolsOutput;
+  const existStylesDir = checkStylesDirExist({ appDirectory });
+  // 编译 styles 目录样式
+  if (existStylesDir) {
+    const styleResult = await compiler.styleCompiler({
+      projectDir: appDirectory,
+      stylesDir: path.resolve(appDirectory, STYLE_DIRS),
+      outDir: path.join(appDirectory, outputPath, assetsPath),
+      enableVirtualDist: true,
+      compilerOption: {
+        less: lessOption,
+        sass: sassOption,
+        postcss: postcssOption,
+      },
+    });
+    generatorFileOrLogError(
+      styleResult!,
+      `[Style Compiler] Successfully for 'styles' dir`,
+    );
+  }
+
+  // 编译 src 内的样式代码
+  const srcDir = path.resolve(appDirectory, SRC_STYLE_DIRS);
+  const outputDirtoSrc = path.join(
+    appDirectory,
+    outputPath,
+    jsPath,
+    assetsPath,
+  );
+  if (importStyle === 'compiled-code') {
+    const srcStyleResult = await compiler.styleCompiler({
+      projectDir: appDirectory,
+      stylesDir: srcDir,
+      outDir: outputDirtoSrc,
+      enableVirtualDist: true,
+      compilerOption: {
+        less: lessOption,
+        sass: sassOption,
+        postcss: postcssOption,
+      },
+    });
+    generatorFileOrLogError(
+      srcStyleResult!,
+      `[Style Compiler] Successfully for 'src' dir`,
+    );
+  } else {
+    copyOriginStyleFiles({ targetDir: srcDir, outputDir: outputDirtoSrc });
+  }
+};
+
+(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: any) {
+      console.error(e.toString());
+    }
+  });
+})();