@modern-js/app-tools 1.21.2 → 2.0.0-beta.0

package/dist/js/modern/builder/createOutputConfig.js

@@ -0,0 +1,67 @@
+import { createCopyPattern } from "./share";
+export function createOutputConfig(normalizedConfig, appContext) {
+  // TODO: add `externals` options in Modern.
+  const {
+    assetPrefix,
+    copy,
+    cssModuleLocalIdentName,
+    cssPath,
+    jsPath,
+    htmlPath,
+    mediaPath,
+    path,
+    disableInlineRuntimeChunk,
+    disableMinimize,
+    disableSourceMap,
+    enableCssModuleTSDeclaration,
+    enableInlineScripts,
+    enableInlineStyles,
+    polyfill,
+    dataUriLimit,
+    disableAssetsCache,
+    enableLatestDecorators,
+    disableCssModuleExtension
+  } = normalizedConfig.output;
+  const defaultCopyPattern = createCopyPattern(appContext, normalizedConfig, 'upload');
+  const builderCopy = copy ? [...copy, defaultCopyPattern] : [defaultCopyPattern];
+  return {
+    assetPrefix,
+    copy: builderCopy,
+    distPath: {
+      root: path,
+      css: cssPath,
+      js: jsPath,
+      html: htmlPath,
+      // `@modern-js/webpack` output all media files to `dist/media` by default
+      svg: mediaPath || 'midia',
+      image: mediaPath || 'midia',
+      font: mediaPath || 'midia',
+      media: mediaPath || 'midia'
+    },
+    dataUriLimit: {
+      svg: dataUriLimit,
+      image: dataUriLimit,
+      font: dataUriLimit,
+      media: dataUriLimit
+    },
+    disableCssModuleExtension,
+    disableInlineRuntimeChunk,
+    disableMinimize,
+    disableSourceMap,
+    enableCssModuleTSDeclaration,
+    enableInlineScripts,
+    enableInlineStyles,
+    polyfill,
+    // We need to do this in the app-tools prepare hook because some files will be generated into the dist directory in the analyze process
+    cleanDistPath: false,
+    disableFilenameHash: disableAssetsCache,
+    enableLatestDecorators,
+    filename: {
+      css: cssModuleLocalIdentName
+    },
+    // `@modern-js/webpack` used to generate asset manifest by default
+    enableAssetManifest: true,
+    // compatible the modern-js with fallback behavior
+    enableAssetFallback: true
+  };
+}

package/dist/js/modern/builder/createSourceConfig.js

@@ -0,0 +1,85 @@
+import { dirname, isAbsolute, posix, sep } from 'path';
+import { globby, mergeAlias, findMonorepoRoot, isModernjsMonorepo } from '@modern-js/utils';
+export function createSourceConfig(normalizedConfig, appContext) {
+  const {
+    alias,
+    envVars,
+    globalVars,
+    include,
+    moduleScopes,
+    preEntry
+  } = normalizedConfig.source;
+  const builderGlobalVars = globalVars || {};
+
+  for (const envVar of envVars || []) {
+    const envVarValue = process.env[envVar];
+    envVarValue && (builderGlobalVars[`process.env.${envVar}`] = envVarValue);
+  }
+
+  const builderModuleScope = createBuilderModuleScope(moduleScopes);
+  const builderInclude = createBuilderInclude(include, appContext);
+  return {
+    alias: mergeAlias(alias),
+    moduleScopes: builderModuleScope,
+    globalVars: builderGlobalVars,
+    include: builderInclude,
+    preEntry,
+    // ensure resolve.extensions same as before
+    resolveExtensionPrefix: '.web'
+  };
+}
+export function createBuilderInclude(include, appContext) {
+  const defaultInclude = [appContext.internalDirectory];
+  const transformInclude = (include || []).map(include => {
+    if (typeof include === 'string') {
+      if (isAbsolute(include)) {
+        return include;
+      }
+
+      return new RegExp(include);
+    }
+
+    return include;
+  }).concat(defaultInclude); // concat default Include
+
+  const root = findMonorepoRoot(appContext.appDirectory);
+
+  if (!root) {
+    return transformInclude;
+  }
+
+  const modernjsMonorepo = isModernjsMonorepo(root);
+
+  if (modernjsMonorepo) {
+    const paths = globby.sync(posix.join(root, 'features', '**', 'package.json'), {
+      ignore: ['**/node_modules/**/*']
+    }).map(pathname => dirname(pathname) + sep);
+    return [...paths, ...transformInclude];
+  }
+
+  return transformInclude;
+}
+export function createBuilderModuleScope(moduleScopes) {
+  if (moduleScopes) {
+    let builderModuleScope = [];
+    const DEFAULT_SCOPES = ['./src', './shared', /node_modules/];
+
+    if (Array.isArray(moduleScopes)) {
+      if (isPrimitiveScope(moduleScopes)) {
+        builderModuleScope = DEFAULT_SCOPES.concat(moduleScopes);
+      } else {
+        builderModuleScope = [DEFAULT_SCOPES, ...moduleScopes];
+      }
+    } else {
+      builderModuleScope = [DEFAULT_SCOPES, moduleScopes];
+    }
+
+    return builderModuleScope;
+  } else {
+    return undefined;
+  }
+
+  function isPrimitiveScope(items) {
+    return items.every(item => typeof item === 'string' || Object.prototype.toString.call(item) === '[object RegExp]');
+  }
+}

package/dist/js/modern/builder/createToolsConfig.js

@@ -0,0 +1,94 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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 { applyOptionsChain } from '@modern-js/utils';
+export function createToolsConfig(normalizedConfig) {
+  const {
+    disableCssExtract,
+    enableTsLoader
+  } = normalizedConfig.output;
+  const {
+    autoprefixer,
+    babel,
+    minifyCss,
+    terser,
+    webpack,
+    webpackChain,
+    tsLoader,
+    styledComponents,
+    sass,
+    postcss,
+    less,
+    htmlPlugin,
+    // TODO: remove modernjs tools.lodash config
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    lodash
+  } = normalizedConfig.tools;
+  const builderTsLoader = createBuilderTsLoader(tsLoader, enableTsLoader);
+  const builderTsChecker = createBuilderTsChecker(normalizedConfig.output);
+  return {
+    tsChecker: builderTsChecker,
+    styleLoader: disableCssExtract ? {} : undefined,
+    cssExtract: disableCssExtract ? false : undefined,
+    autoprefixer,
+    babel,
+    minifyCss,
+    terser,
+    webpack,
+    webpackChain: webpackChain,
+    tsLoader: builderTsLoader,
+    styledComponents: styledComponents,
+    sass: sass,
+    postcss: postcss,
+    less: less,
+    // can't remove comment in html minify.
+    // some html template insert by using those comments.
+    htmlPlugin: [config => _objectSpread(_objectSpread({}, config), {}, {
+      minify: typeof config.minify === 'object' ? _objectSpread(_objectSpread({}, config.minify), {}, {
+        removeComments: false
+      }) : config.minify
+    }), // eslint-disable-next-line no-nested-ternary
+    ...(Array.isArray(htmlPlugin) ? htmlPlugin : htmlPlugin ? [htmlPlugin] : [])]
+  };
+}
+
+function createBuilderTsLoader(tsLoader, enableTsLoader) {
+  const useTsLoader = Boolean(enableTsLoader);
+
+  if (!useTsLoader) {
+    return undefined;
+  }
+
+  const defaultTsLoader = {
+    compilerOptions: {
+      target: 'es5',
+      module: 'ESNext'
+    },
+    transpileOnly: false,
+    allowTsInNodeModules: true
+  };
+  return (_, utils) => applyOptionsChain(defaultTsLoader, tsLoader, utils);
+}
+
+export function createBuilderTsChecker(output) {
+  if (output.enableTsLoader || output.disableTsChecker) {
+    return false;
+  }
+
+  const defaultTsChecker = {
+    issue: {
+      include: [{
+        file: '**/src/**/*'
+      }],
+      exclude: [{
+        file: '**/*.(spec|test).ts'
+      }, {
+        file: '**/node_modules/**/*'
+      }]
+    }
+  };
+  return defaultTsChecker;
+}

package/dist/js/modern/builder/index.js

@@ -0,0 +1,106 @@
+import { createBuilder } from '@modern-js/builder';
+import { builderWebpackProvider } from '@modern-js/builder-webpack-provider';
+import { applyOptionsChain } from '@modern-js/utils';
+import { PluginCompatModern } from "./builderPlugins/compatModern";
+import { createHtmlConfig } from "./createHtmlConfig";
+import { createOutputConfig } from "./createOutputConfig";
+import { createSourceConfig } from "./createSourceConfig";
+import { createToolsConfig } from "./createToolsConfig";
+export default (async ({
+  target: _target = 'web',
+  normalizedConfig,
+  appContext,
+  compatPluginConfig
+}) => {
+  const targets = Array.isArray(_target) ? _target : [_target];
+
+  if (normalizedConfig.output.enableModernMode && !targets.includes('modern-web')) {
+    targets.push('modern-web');
+  }
+
+  const builderConfig = createBuilderProviderConfig(normalizedConfig, appContext); // create webpack provider
+
+  const webpackProvider = builderWebpackProvider({
+    builderConfig
+  });
+  const builderOptions = createBuilderOptions(_target, appContext);
+  const builder = await createBuilder(webpackProvider, builderOptions);
+  await applyBuilderPlugins(builder, normalizedConfig, appContext, compatPluginConfig);
+  return builder;
+});
+
+function createBuilderProviderConfig(normalizedConfig, appContext) {
+  const source = createSourceConfig(normalizedConfig, appContext);
+  const html = createHtmlConfig(normalizedConfig, appContext);
+  const output = createOutputConfig(normalizedConfig, appContext);
+  const tools = createToolsConfig(normalizedConfig);
+  return {
+    source,
+    html,
+    output,
+    tools,
+    performance: {
+      // `@modern-js/webpack` used to remove moment locale by default
+      removeMomentLocale: true
+    }
+  };
+}
+
+export function createBuilderOptions(target, appContext) {
+  // create entries
+  const entries = {};
+  const {
+    entrypoints = [],
+    checkedEntries
+  } = appContext;
+
+  for (const {
+    entryName,
+    entry
+  } of entrypoints) {
+    if (checkedEntries && !checkedEntries.includes(entryName)) {
+      continue;
+    }
+
+    if (entryName in entries) {
+      entries[entryName].push(entry);
+    } else {
+      entries[entryName] = [entry];
+    }
+  }
+
+  return {
+    cwd: appContext.appDirectory,
+    target,
+    configPath: appContext.configFile || undefined,
+    entry: entries,
+    framework: appContext.metaName
+  };
+}
+/**
+ * register builder Plugin by condition
+ */
+
+async function applyBuilderPlugins(builder, normalizedConfig, appContext, compatPluginConfig) {
+  if (!normalizedConfig.output.disableNodePolyfill) {
+    const {
+      PluginNodePolyfill
+    } = await import('@modern-js/builder-plugin-node-polyfill');
+    builder.addPlugins([PluginNodePolyfill()]);
+  }
+
+  if (normalizedConfig.tools.esbuild) {
+    const {
+      esbuild: esbuildOptions
+    } = normalizedConfig.tools;
+    const {
+      PluginEsbuild
+    } = await import('@modern-js/builder-plugin-esbuild');
+    builder.addPlugins([PluginEsbuild({
+      loader: false,
+      minimize: applyOptionsChain({}, esbuildOptions)
+    })]);
+  }
+
+  builder.addPlugins([PluginCompatModern(appContext, normalizedConfig, compatPluginConfig)]);
+}

package/dist/js/modern/builder/share.js

@@ -0,0 +1,48 @@
+import path from 'path';
+import { template as lodashTemplate } from '@modern-js/utils/lodash';
+import { removeTailSlash } from '@modern-js/utils';
+export function createCopyPattern(appContext, config, patternsType, chain) {
+  const configDir = path.resolve(appContext.appDirectory, config.source.configDir);
+  const uploadDir = path.posix.join(configDir.replace(/\\/g, '/'), 'upload');
+  const publicDir = path.posix.join(configDir.replace(/\\/g, '/'), 'public');
+  const minifiedJsRexExp = /\.min\.js/;
+
+  const info = file => ({
+    // If the file name ends with `.min.js`, we assume it's a compressed file.
+    // So we don't want copy-webpack-plugin to minify it.
+    // ref: https://github.com/webpack-contrib/copy-webpack-plugin#info
+    minimized: minifiedJsRexExp.test(file.sourceFilename)
+  });
+
+  if (patternsType === 'public') {
+    if (!chain) {
+      throw new Error("expect get a webpackChain, but receive 'undefined'");
+    }
+
+    return {
+      info,
+      from: '**/*',
+      to: 'public',
+      context: publicDir,
+      noErrorOnMissing: true,
+      // eslint-disable-next-line node/prefer-global/buffer
+      transform: (content, absoluteFrom) => {
+        if (!/\.html?$/.test(absoluteFrom)) {
+          return content;
+        }
+
+        return lodashTemplate(content.toString('utf8'))({
+          assetPrefix: removeTailSlash(chain.output.get('publicPath'))
+        });
+      }
+    };
+  } else {
+    return {
+      info,
+      from: '**/*',
+      to: 'upload',
+      context: uploadDir,
+      noErrorOnMissing: true
+    };
+  }
+}

package/dist/js/modern/builder/webpackPlugins/htmlAsyncChunkPlugin.js

@@ -0,0 +1,37 @@
+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; }
+
+export class HtmlAsyncChunkPlugin {
+  constructor(htmlWebpackPlugin) {
+    _defineProperty(this, "name", void 0);
+
+    _defineProperty(this, "htmlWebpackPlugin", void 0);
+
+    this.name = 'HtmlAsyncChunkPlugin';
+    this.htmlWebpackPlugin = htmlWebpackPlugin;
+  }
+
+  apply(compiler) {
+    compiler.hooks.compilation.tap(this.name, compilation => {
+      const hooks = this.htmlWebpackPlugin.getHooks(compilation);
+      hooks.alterAssetTagGroups.tap(this.name, assets => {
+        const tags = [...assets.headTags, ...assets.bodyTags];
+
+        for (const tag of tags) {
+          if (tag.tagName === 'script') {
+            const {
+              attributes
+            } = tag;
+
+            if (attributes && attributes.defer === true) {
+              attributes.async = true;
+              delete attributes.defer;
+            }
+          }
+        }
+
+        return assets;
+      });
+    });
+  }
+
+}

package/dist/js/modern/builder/webpackPlugins/htmlBottomTemplate.js

@@ -0,0 +1,44 @@
+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; }
+
+export class BottomTemplatePlugin {
+  constructor(htmlWebpackPlugin) {
+    _defineProperty(this, "htmlWebpackPlugin", void 0);
+
+    _defineProperty(this, "bottomTemplateReg", /<!--<\?-\s*bottomTemplate\s*\?>-->/);
+
+    _defineProperty(this, "bodyRegExp", /(<\/\s*body\s*>)/i);
+
+    _defineProperty(this, "name", void 0);
+
+    this.htmlWebpackPlugin = htmlWebpackPlugin;
+    this.name = 'bottom-template';
+  }
+
+  apply(compiler) {
+    compiler.hooks.compilation.tap(this.name, compilation => {
+      this.htmlWebpackPlugin.getHooks(compilation).beforeEmit.tap(this.name, data => {
+        var _data$plugin$options;
+
+        if (!((_data$plugin$options = data.plugin.options) !== null && _data$plugin$options !== void 0 && _data$plugin$options.__internal__)) {
+          return data;
+        } // 含有 <!--<?- bottomTemplate ?>--> 占位符时才需要注入 bottom.html
+
+
+        if (this.bottomTemplateReg.test(data.html)) {
+          // 清空占位符
+          data.html = data.html.replace(this.bottomTemplateReg, '');
+          const {
+            bottomTemplate
+          } = data.plugin.options;
+
+          if (bottomTemplate) {
+            data.html = data.html.replace(this.bodyRegExp, match => `\n${bottomTemplate}\n${match}`);
+          }
+        }
+
+        return data;
+      });
+    });
+  }
+
+}

package/dist/js/modern/commands/build.js

@@ -4,14 +4,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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 { webpack, getWebpackConfig, WebpackConfigTarget } from '@modern-js/webpack';
 import { ResolvedConfigContext } from '@modern-js/core';
-import { formatWebpackMessages, measureFileSizesBeforeBuild, printFileSizesAfterBuild, printBuildError, logger, isUseSSRBundle, emptyDir } from '@modern-js/utils';
+import { logger, isUseSSRBundle, printBuildError } from '@modern-js/utils';
 import { generateRoutes } from "../utils/routes";
 import { buildServerConfig, emitResolvedConfig } from "../utils/config";
-// These sizes are pretty large. We'll warn for bundles exceeding them.
-const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
-const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
+import createBuilder from "../builder";
 export const build = async (api, options) => {
   let resolvedConfig = api.useResolvedConfigContext();
   const appContext = api.useAppContext();
@@ -26,9 +23,9 @@ export const build = async (api, options) => {
       distDirectory,
       serverConfigFile
     } = appContext;
-    await emptyDir(distDirectory);
     await hookRunners.beforeBuild({
-      webpackConfigs: []
+      // "null" bundlerConfigs
+      bundlerConfigs: undefined
     });
     await buildServerConfig({
       appDirectory,
@@ -36,61 +33,13 @@ export const build = async (api, options) => {
       configFile: serverConfigFile
     });
     await generateRoutes(appContext);
-    await hookRunners.afterBuild();
+    await hookRunners.afterBuild({
+      // "null" stats
+      stats: undefined
+    });
     return;
   }
 
-  const webpackBuild = async (webpackConfig, type) => {
-    const compiler = webpack(webpackConfig);
-    return new Promise((resolve, reject) => {
-      let label = process.env.NODE_ENV || '';
-
-      if (type && type !== 'legacy') {
-        label += ` ${type}`;
-      }
-
-      logger.info(`Creating a ${label} build...`);
-      compiler.run((err, stats) => {
-        let messages;
-
-        if (!err) {
-          messages = formatWebpackMessages(stats.toJson({
-            all: false,
-            warnings: true,
-            errors: true
-          }));
-
-          if (messages.errors.length === 0) {
-            logger.info(`File sizes after ${label} build:\n`);
-            printFileSizesAfterBuild(stats, previousFileSizes, distDirectory, WARN_AFTER_BUNDLE_GZIP_SIZE, WARN_AFTER_CHUNK_GZIP_SIZE);
-            logger.log();
-          }
-        } // When using run or watch, call close and wait for it to finish before calling run or watch again.
-        // Concurrent compilations will corrupt the output files.
-
-
-        compiler.close(closeErr => {
-          if (closeErr) {
-            logger.error(closeErr);
-          }
-
-          if (err) {
-            reject(err);
-          } else {
-            if (messages.errors.length) {
-              reject(new Error(messages.errors.join('\n\n')));
-              return;
-            }
-
-            resolve({
-              warnings: messages.warnings
-            });
-          }
-        });
-      });
-    });
-  };
-
   resolvedConfig = _objectSpread(_objectSpread({}, resolvedConfig), {}, {
     cliOptions: options
   });
@@ -100,55 +49,52 @@ export const build = async (api, options) => {
     appDirectory,
     serverConfigFile
   } = appContext;
-  const previousFileSizes = await measureFileSizesBeforeBuild(distDirectory);
-  await emptyDir(distDirectory);
   await buildServerConfig({
     appDirectory,
     distDirectory,
     configFile: serverConfigFile
   });
-  const buildConfigs = [];
-  buildConfigs.push({
-    type: 'legacy',
-    config: getWebpackConfig(WebpackConfigTarget.CLIENT, appContext, resolvedConfig)
-  });
+  const targets = ['web'];
 
   if (resolvedConfig.output.enableModernMode) {
-    buildConfigs.push({
-      type: 'modern',
-      config: getWebpackConfig(WebpackConfigTarget.MODERN, appContext, resolvedConfig)
-    });
+    targets.push('modern-web');
   }
 
   if (isUseSSRBundle(resolvedConfig)) {
-    buildConfigs.push({
-      type: 'ssr',
-      config: getWebpackConfig(WebpackConfigTarget.NODE, appContext, resolvedConfig)
-    });
+    targets.push('node');
   }
 
-  await hookRunners.beforeBuild({
-    webpackConfigs: buildConfigs.map(({
-      config
-    }) => config)
-  });
-
-  for (const buildConfig of buildConfigs) {
-    const {
-      type: buildType,
-      config
-    } = buildConfig;
+  try {
+    const builder = await createBuilder({
+      target: targets,
+      appContext,
+      normalizedConfig: resolvedConfig,
+      compatPluginConfig: {
+        async onBeforeBuild({
+          bundlerConfigs
+        }) {
+          await generateRoutes(appContext);
+          await hookRunners.beforeBuild({
+            bundlerConfigs
+          });
+        },
+
+        async onAfterBuild({
+          stats
+        }) {
+          await hookRunners.afterBuild({
+            stats
+          });
+          await emitResolvedConfig(appDirectory, resolvedConfig);
+        }
 
-    try {
-      await webpackBuild(config, buildType);
-    } catch (error) {
-      printBuildError(error); // eslint-disable-next-line no-process-exit
+      }
+    });
+    logger.info('Create a production build...\n');
+    await builder.build();
+  } catch (error) {
+    printBuildError(error); // eslint-disable-next-line no-process-exit
 
-      process.exit(1);
-    }
+    process.exit(1);
   }
-
-  await generateRoutes(appContext);
-  await hookRunners.afterBuild();
-  await emitResolvedConfig(appDirectory, resolvedConfig);
 };