fix(cli-plugin-service): clear asset dir

LeapFE · Apr 27, 2021 · 5979ee7 · 5979ee7
1 parent 63018a6
commit 5979ee7
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 35 deletions.
diff --git a/packages/@luban/cli-plugin-service/src/commands/build.ts b/packages/@luban/cli-plugin-service/src/commands/build.ts
@@ -5,7 +5,7 @@ import chalk from "chalk";
 
 import { formatStats, logStatsErrorsAndWarnings } from "../utils/formatStats";
 import { delay } from "../utils/serverRender";
-import { cleanDest } from "../utils/clean";
+import { cleanDest } from "../utils/cleanDest";
 import { buildServerSideDeployFIle } from "../utils/buildServerSideDeployFile";
 
 import { CommandPluginAPI } from "../lib/PluginAPI";
@@ -52,14 +52,16 @@ class Build {
       webpack(webpackConfig, (err, stats) => {
         // Fatal webpack errors (wrong configuration, etc)
         if (err) {
-          return reject(err);
+          reject(err);
+          return;
         }
 
         logStatsErrorsAndWarnings(stats);
 
         // Compilation errors (missing modules, syntax errors, eslint-errors. etc)
         if (stats.hasErrors()) {
-          return reject("Build failed with some Compilation errors occurred.");
+          reject("Build failed with some Compilation errors occurred.");
+          return;
         }
 
         const targetDirShort = path.relative(this.api.getContext(), this.outputDir);
@@ -88,20 +90,18 @@ class Build {
       }
 
       webpack(webpackConfig, (err, stats) => {
-        if (err || stats.hasErrors()) {
-          reject();
+        if (err) {
+          reject(err);
           return;
         }
 
-        const targetDirShort = path.relative(this.api.getContext(), this.outputDir);
+        if (stats.hasErrors()) {
+          reject("Build failed with some Compilation errors occurred.");
+          return;
+        }
 
-        log(formatStats(stats, targetDirShort, this.api));
         console.log();
-        done(
-          `Server Build complete. The file ${chalk.cyan(
-            `${targetDirShort}/server.js`,
-          )} is ready to be deployed.`,
-        );
+        done("Server side Build complete");
         console.log();
 
         resolve();
@@ -112,8 +112,6 @@ class Build {
   public async start() {
     const ctx = this.api.getContext();
 
-    info(`clean dest files...`);
-
     await cleanDest(ctx, this.outputDir);
 
     await delay(1000);
@@ -135,7 +133,7 @@ class Build {
     }
 
     console.log();
-    info("Done 🎉");
+    done("Build Done 🎉");
 
     ["SIGINT", "SIGTERM"].forEach((signal) => {
       process.on(signal, () => {

diff --git a/packages/@luban/cli-plugin-service/src/commands/serve.ts b/packages/@luban/cli-plugin-service/src/commands/serve.ts
@@ -36,7 +36,7 @@ import {
   getTemplate,
   generateInjectedTag,
 } from "../utils/serverRender";
-import { cleanDest } from "../utils/clean";
+import { cleanDest } from "../utils/cleanDest";
 import { getCertificate } from "../utils/getCertificate";
 
 type ServerSideHttpsOptions = { key?: Buffer; cert?: Buffer; spdy: { protocols: string[] } };
@@ -477,8 +477,6 @@ class Serve {
   public async start() {
     const context = this.pluginApi.getContext();
 
-    info(`clean dest files...`);
-
     await cleanDest(context, this.pluginApi.resolve(this.projectConfig.outputDir));
 
     await this.init();

diff --git a/packages/@luban/cli-plugin-service/src/config/module.ts b/packages/@luban/cli-plugin-service/src/config/module.ts
@@ -6,6 +6,7 @@ import {
   UrlLoaderOptions,
   WebpackConfigName,
 } from "../definitions";
+import { cleanAssetPath } from "../utils/cleanAssetPath";
 
 class Module implements ConfigPluginInstance {
   apply(args: ConfigPluginApplyCallbackArgs) {
@@ -26,7 +27,7 @@ class Module implements ConfigPluginInstance {
           loader: "file-loader",
           options: {
             publicPath: projectConfig.publicPath,
-            name: `${dir}/[name].[hash:8].[ext]`,
+            name: cleanAssetPath(`${dir}/[name].[hash:8].[ext]`),
             context: api.getContext(),
           },
         },

diff --git a/packages/@luban/cli-plugin-service/src/config/output.ts b/packages/@luban/cli-plugin-service/src/config/output.ts
@@ -1,27 +1,23 @@
 import { ConfigPluginInstance, ConfigPluginApplyCallbackArgs } from "../definitions";
-
-function getScriptsDir(dir: string = ""): string {
-  const adaptedDir = dir.replace(/^\/|\/$|\s+/g, "");
-  if (adaptedDir === "") {
-    return "";
-  }
-
-  return `${adaptedDir}/`;
-}
+import { cleanAssetPath } from "../utils/cleanAssetPath";
 
 class Output implements ConfigPluginInstance {
   apply(args: ConfigPluginApplyCallbackArgs) {
     const { api, commandName, projectConfig } = args;
 
     const outputDir = api.resolve(projectConfig.outputDir);
 
-    const scriptsDir = getScriptsDir(projectConfig.assetsDir.scripts);
+    const scriptsDir = projectConfig.assetsDir.scripts;
 
     const baseFilename = "[name]-[hash:8].js";
-    const filename = commandName === "build" ? `${scriptsDir}${baseFilename}` : baseFilename;
+    const filename =
+      commandName === "build" ? cleanAssetPath(`${scriptsDir}/${baseFilename}`) : baseFilename;
+
     const baseChunkFilename = "[name]-[hash:8].chunk.js";
     const chunkFilename =
-      commandName === "build" ? `${scriptsDir}${baseChunkFilename}` : baseChunkFilename;
+      commandName === "build"
+        ? cleanAssetPath(`${scriptsDir}/${baseChunkFilename}`)
+        : baseChunkFilename;
 
     api.chainWebpack("server", (webpackConfig) => {
       webpackConfig.output

diff --git a/packages/@luban/cli-plugin-service/src/config/performance.ts b/packages/@luban/cli-plugin-service/src/config/performance.ts
@@ -0,0 +1,21 @@
+import { ConfigPluginInstance, ConfigPluginApplyCallbackArgs } from "../definitions";
+
+class Performance implements ConfigPluginInstance {
+  apply(args: ConfigPluginApplyCallbackArgs) {
+    const { api } = args;
+
+    const isProduction = process.env.NODE_ENV === "production";
+
+    api.chainWebpack("client", (webpackConfig) => {
+      webpackConfig.performance
+        .hints(isProduction ? "warning" : false)
+        // max entry point size 1M
+        .maxEntrypointSize(1048576)
+        // max asset size 256kb
+        .maxAssetSize(262144)
+        .end();
+    });
+  }
+}
+
+export default Performance;
diff --git a/packages/@luban/cli-plugin-service/src/config/plugin.ts b/packages/@luban/cli-plugin-service/src/config/plugin.ts
@@ -21,6 +21,7 @@ import {
   BuildCliArgs,
   ParsedArgs,
 } from "../definitions";
+import { cleanAssetPath } from "../utils/cleanAssetPath";
 
 class Plugin implements ConfigPluginInstance {
   apply(params: ConfigPluginApplyCallbackArgs) {
@@ -37,8 +38,8 @@ class Plugin implements ConfigPluginInstance {
     }.css`;
 
     const extractOptions = {
-      filename,
-      chunkFilename,
+      filename: cleanAssetPath(filename),
+      chunkFilename: cleanAssetPath(chunkFilename),
     };
 
     const outputDir = api.resolve(projectConfig.outputDir);

diff --git a/packages/@luban/cli-plugin-service/src/utils/buildServerSideDeployFile.ts b/packages/@luban/cli-plugin-service/src/utils/buildServerSideDeployFile.ts
@@ -36,7 +36,7 @@ function buildDeployFile(outputDir: string) {
 }
 
 export async function buildServerSideDeployFIle(outputDir: string) {
-  info("generate server side deploy file");
+  info("Building server side deploy file...");
 
   const template = fs.readFileSync(outputDir + "/server.ejs", { encoding: "utf-8" });
 

diff --git a/packages/@luban/cli-plugin-service/src/utils/cleanAssetPath.ts b/packages/@luban/cli-plugin-service/src/utils/cleanAssetPath.ts
@@ -0,0 +1,7 @@
+export function cleanAssetPath(path: string) {
+  return path.replace(/(\/{2,})/g, "/").replace(/^\/|\/$/g, "");
+}
+
+export function removeSlash(path: string) {
+  return path.replace(/^\/|\/$/g, "");
+}
diff --git a/...ban/cli-plugin-service/src/utils/clean.ts → ...cli-plugin-service/src/utils/cleanDest.ts b/...ban/cli-plugin-service/src/utils/clean.ts → ...cli-plugin-service/src/utils/cleanDest.ts
@@ -1,8 +1,10 @@
 import fs from "fs-extra";
 import path from "path";
-import { error } from "@luban-cli/cli-shared-utils";
+import { error, info } from "@luban-cli/cli-shared-utils";
 
 export async function cleanDest(context: string, outputDir: string) {
+  info(`clean dest files...`);
+
   const _path = path.resolve(context, outputDir);
 
   try {