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

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

@@ -0,0 +1,185 @@
+import { Import, fs } from '@modern-js/utils';
+import type { NormalizedConfig } from '@modern-js/core';
+import type { ICompilerResult, 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 logger: typeof import('../features/build/logger') = Import.lazy(
+  '../features/build/logger',
+  require,
+);
+const ts: typeof import('../utils/tsconfig') = Import.lazy(
+  '../utils/tsconfig',
+  require,
+);
+const babel: typeof import('../utils/babel') = Import.lazy(
+  '../utils/babel',
+  require,
+);
+const core: typeof import('@modern-js/core') = Import.lazy(
+  '@modern-js/core',
+  require,
+);
+const pluginNode: typeof import('@modern-js/plugin/node') = Import.lazy(
+  '@modern-js/plugin/node',
+  require,
+);
+const argv: typeof import('process.argv').default = Import.lazy(
+  'process.argv',
+  require,
+);
+
+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);
+    }
+  }
+};
+
+const runBabelCompiler = async (
+  config: ITaskConfig,
+  modernConfig: NormalizedConfig,
+) => {
+  const { tsconfigPath } = config;
+  const babelConfig = babel.resolveBabelConfig(
+    config.appDirectory,
+    modernConfig,
+    {
+      sourceAbsDir: config.srcRootDir,
+      tsconfigPath,
+      syntax: config.syntax,
+      type: config.type,
+    },
+  );
+  const tsconfig = ts.readTsConfig<ITsconfig>(tsconfigPath || '', {});
+  const isTs = Boolean(tsconfig);
+
+  const getExts = (isTsProject: boolean) => {
+    // TODO: 是否受控tsconfig.json 里的jsx配置
+    let exts = [];
+    if (isTsProject) {
+      exts = tsconfig?.compilerOptions?.allowJs
+        ? ['.ts', '.tsx', '.js', '.jsx']
+        : ['.ts', '.tsx'];
+    } else {
+      exts = ['.js', '.jsx'];
+    }
+
+    return exts;
+  };
+  const emitter = await babelCompiler.compiler(
+    {
+      enableVirtualDist: true,
+      quiet: true,
+      enableWatch: true,
+      rootDir: config.srcRootDir,
+      distDir: config.distDir,
+      watchDir: config.srcRootDir,
+      extensions: getExts(isTs),
+    },
+    babelConfig,
+  );
+  emitter.on(babelCompiler.BuildWatchEvent.compiling, () => {
+    console.info(logger.clearFlag, `Compiling...`);
+  });
+  emitter.on(
+    babelCompiler.BuildWatchEvent.firstCompiler,
+    (result: ICompilerResult) => {
+      if (result.code === 1) {
+        console.error(logger.clearFlag);
+        console.error(result.message);
+        for (const detail of result.messageDetails || []) {
+          console.error(detail.content);
+        }
+      } else {
+        generatorRealFiles(result.virtualDists!);
+        console.info(logger.clearFlag, '[Babel Compiler]: Successfully');
+      }
+    },
+  );
+
+  emitter.on(
+    babelCompiler.BuildWatchEvent.watchingCompiler,
+    (result: ICompilerResult) => {
+      if (result.code === 1) {
+        console.error(logger.clearFlag);
+        console.error(result.message);
+        for (const detail of result.messageDetails || []) {
+          console.error(detail.content);
+        }
+        if (
+          Array.isArray(result.virtualDists) &&
+          result.virtualDists?.length > 0
+        ) {
+          generatorRealFiles(result.virtualDists);
+        }
+      } else {
+        generatorRealFiles(result.virtualDists!);
+        console.info(result.message);
+      }
+    },
+  );
+  await emitter.watch();
+};
+
+const buildSourceCode = async (
+  config: ITaskConfig,
+  modernConfig: NormalizedConfig,
+) => {
+  const { compiler } = config;
+  if (compiler === 'babel') {
+    await runBabelCompiler(config, modernConfig);
+  }
+};
+
+interface ITaskConfig {
+  srcRootDir: string; // 源码的根目录
+  distDir: string;
+  appDirectory: string;
+  sourceMaps: boolean;
+  syntax: 'es5' | 'es6+';
+  type: 'module' | 'commonjs';
+  tsconfigPath: string;
+  copyDirs?: string;
+  compiler?: 'babel' | 'esbuild' | 'swc';
+}
+
+const taskMain = async ({
+  modernConfig,
+}: {
+  modernConfig: NormalizedConfig;
+}) => {
+  const processArgv = argv(process.argv.slice(2));
+  const config = processArgv<ITaskConfig>({
+    srcRootDir: `${process.cwd()}/src`,
+    distDir: '',
+    compiler: 'babel',
+    appDirectory: '',
+    sourceMaps: false,
+    tsconfigPath: '',
+    syntax: 'es5',
+    type: 'module',
+  });
+
+  await buildSourceCode(config, modernConfig);
+};
+
+(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-watch-style.ts

@@ -0,0 +1,260 @@
+/* eslint-disable max-statements */
+import * as path from 'path';
+import type { NormalizedConfig, IAppContext } from '@modern-js/core';
+import type { ICompilerResult, PostcssOption } from '@modern-js/style-compiler';
+import { fs, watch, WatchChangeType, Import } from '@modern-js/utils';
+import type { ModuleToolsOutput } from '../types';
+
+const logger: typeof import('../features/build/logger') = Import.lazy(
+  '../features/build/logger',
+  require,
+);
+const cssConfig: typeof import('@modern-js/css-config') = Import.lazy(
+  '@modern-js/css-config',
+  require,
+);
+const hooks: typeof import('@modern-js/module-tools-hooks') = Import.lazy(
+  '@modern-js/module-tools-hooks',
+  require,
+);
+const core: typeof import('@modern-js/core') = Import.lazy(
+  '@modern-js/core',
+  require,
+);
+const pluginNode: typeof import('@modern-js/plugin/node') = Import.lazy(
+  '@modern-js/plugin/node',
+  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 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 generatorFileAndReturnLog = (
+  result: ICompilerResult,
+  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: 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 logCompilerMessage = (compilerMessage: {
+  src: string;
+  styles: string;
+}) => {
+  console.info(logger.clearFlag);
+  console.info(compilerMessage.src);
+  console.info(compilerMessage.styles);
+};
+
+const taskMain = async ({
+  modernConfig,
+  appContext,
+}: {
+  modernConfig: NormalizedConfig;
+  appContext: IAppContext;
+}) => {
+  const {
+    assetsPath = 'styles',
+    path: outputPath = 'dist',
+    jsPath = 'js',
+    importStyle,
+  } = 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 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: ICompilerResult) => {
+        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: ICompilerResult) => {
+        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: ICompilerResult) => {
+        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: ICompilerResult) => {
+        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: any) {
+      console.error(e.message);
+    }
+  });
+})();
+/* eslint-enable max-statements */

package/src/tasks/constants.ts

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

package/src/tasks/copy-assets.ts

@@ -0,0 +1,117 @@
+import * as path from 'path';
+import { fs, watch, WatchChangeType, Import } from '@modern-js/utils';
+import type { NormalizedConfig, IAppContext } from '@modern-js/core';
+import type { ModuleToolsOutput } from '../types';
+
+const argv: typeof import('process.argv').default = Import.lazy(
+  'process.argv',
+  require,
+);
+const glob: typeof import('glob') = Import.lazy('glob', require);
+const core: typeof import('@modern-js/core') = Import.lazy(
+  '@modern-js/core',
+  require,
+);
+const pluginNode: typeof import('@modern-js/plugin/node') = Import.lazy(
+  '@modern-js/plugin/node',
+  require,
+);
+const copyUtils: typeof import('../utils/copy') = Import.lazy(
+  '../utils/copy',
+  require,
+);
+
+const STYLE_DIRS = 'styles';
+const SRC_DIRS = 'src';
+
+const copyAssets = ({
+  targetDir,
+  outputDir,
+}: {
+  targetDir: string;
+  outputDir: string;
+}) => {
+  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,
+}: {
+  targetDir: string;
+  outputDir: string;
+}) => {
+  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,
+}: {
+  modernConfig: NormalizedConfig;
+  appContext: IAppContext;
+}) => {
+  const processArgv = argv(process.argv.slice(2));
+  const config = processArgv<{ watch?: boolean }>({});
+  const { appDirectory } = appContext;
+  const {
+    jsPath = 'js',
+    assetsPath = 'styles',
+    path: outputPath = 'dist',
+  } = modernConfig.output as ModuleToolsOutput;
+  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: any) {
+      console.error(e.message);
+    }
+  });
+})();