hw-weapp-compiler 1.0.0 → 1.0.2

package/build/plugin/index.js

@@ -1,27 +1,206 @@
+/**
+ * WeappPlugin - 微信小程序 webpack 构建插件
+ *
+ * 负责在构建产物中注入公共模块引用、runtime 全局暴露、分包公共模块引用，
+ * 以及在开发模式下压缩公共模块代码。
+ */
 const path = require('path');
 const UglifyJS = require('uglify-js');
 const hasha = require('hasha');
 const { RawSource } = require('webpack-sources');
 
 const { isNodeModulesUsingComponent } = require('../utils/isNodeModulesUsingComponent');
-const getAssets = require('../config/getAssets');
 const { addToUploadQueue } = require('../utils/upload');
-const getResourceAccept = require('../config/getResourceAccept');
-const compatiblePath = require('../utils/compatiblePath');
-const ENV = require('../config/env');
+const { compatiblePath } = require('../utils/compatiblePath');
+const { ENV, PATTERNS, ASSET_EXT_PATTERN, ASSETS_DIR } = require('../config/constants');
 
-const assetsDir = getAssets();
 const pluginName = 'WeappCompilerPlugin';
 const contentCache = {};
 
+/**
+ * 检测产物中存在哪些公共模块和分包模块
+ */
+function detectCommonModules(items) {
+  const flags = {
+    hasCommonWxss: false,
+    hasVendorWxss: false,
+    hasCommonJs: false,
+    hasVendorJs: false,
+    hasRuntimeJs: false,
+  };
+  const subpackages = {};
+
+  for (let index = 0; index < items.length; index += 1) {
+    const item = items[index];
+
+    if (!flags.hasCommonWxss && item.name === 'commons.wxss') {
+      flags.hasCommonWxss = true;
+    }
+    if (!flags.hasVendorWxss && item.name === 'vendors_wxss.wxss') {
+      flags.hasVendorWxss = true;
+    }
+    if (!flags.hasCommonJs && item.name === 'commons.js') {
+      flags.hasCommonJs = true;
+    }
+    if (!flags.hasVendorJs && item.name === 'vendors.js') {
+      flags.hasVendorJs = true;
+    }
+    if (!flags.hasRuntimeJs && item.name === 'runtime.js') {
+      flags.hasRuntimeJs = true;
+    }
+    if (/subpackage_common/.test(item.name)) {
+      const pathInfo = path.parse(item.name);
+      const dir = compatiblePath(pathInfo.dir);
+
+      if (!subpackages[dir]) {
+        subpackages[dir] = { js: '', wxss: '' };
+      }
+      if (PATTERNS.JS_EXT.test(item.name)) {
+        subpackages[dir].js = compatiblePath(item.name);
+      }
+      if (PATTERNS.WXSS_EXT.test(item.name)) {
+        subpackages[dir].wxss = compatiblePath(item.name);
+      }
+    }
+  }
+
+  return { flags, subpackages };
+}
+
+/**
+ * 注入全局引用模块和公共模块到各个 JS/WXSS 文件
+ */
+function injectGlobalModules(content, assetName, flags) {
+  let result = content;
+
+  // 注入全局 var self = global
+  if (PATTERNS.JS_EXT.test(assetName) && !/(var self = global;)/.test(result)) {
+    result = `var self = global; \n${result}`;
+  }
+
+  // runtime 暴露到全局
+  if (assetName === 'runtime.js') {
+    result = result.replace(
+      'var __webpack_module_cache__ = {};',
+      `
+        if (!global.__webpack_module_cache__) {
+          global.__webpack_module_cache__ = {};
+        }
+        var __webpack_module_cache__ = global.__webpack_module_cache__;
+        global.__webpack_require__ = __webpack_require__;
+      `,
+    );
+  }
+
+  // 注入公共模块 js
+  if (assetName === 'app.js') {
+    // sdk2.17.3 window 下没有 regeneratorRuntime
+    result = result.replace(
+      'Function("r", "regeneratorRuntime = r")(runtime);',
+      'global.regeneratorRuntime = runtime',
+    );
+    if (!/require('\.\/commons\.js')/.test(result) && flags.hasCommonJs) {
+      result = `require('./commons.js');\n${result}`;
+    }
+    if (!/require('\.\/vendors\.js')/.test(result) && flags.hasVendorJs) {
+      result = `require('./vendors.js');\n${result}`;
+    }
+    if (!/require('\.\/runtime\.js')/.test(result) && flags.hasRuntimeJs) {
+      result = `require('./runtime.js');\n${result}`;
+    }
+  }
+
+  // 注入公共模块 css
+  if (assetName === 'app.wxss') {
+    if (!/@import '\.\/commons\.wxss'/.test(result) && flags.hasCommonWxss) {
+      result = `@import './commons.wxss';\n${result}`;
+    }
+    if (!/@import '\.\/vendors_wxss\.wxss'/.test(result) && flags.hasVendorWxss) {
+      result = `@import './vendors_wxss.wxss';\n${result}`;
+    }
+  }
+
+  return result;
+}
+
+/**
+ * 注入分包公共模块引用
+ */
+function injectSubpackageRequires(content, assetName, subpackages) {
+  let result = content;
+
+  Object.keys(subpackages).forEach((subpackage) => {
+    const res = subpackages[subpackage];
+
+    if (
+      assetName.startsWith(subpackage) &&
+      !/(subpackage_common\.(js|wxss))$/.test(assetName)
+    ) {
+      if (
+        res.js &&
+        PATTERNS.JS_EXT.test(assetName) &&
+        !/'subpackage_common\.js'\);/.test(result)
+      ) {
+        result = `require('${compatiblePath(
+          path.relative(path.parse(assetName).dir, res.js),
+        )}');\n${result}`;
+      }
+      if (
+        res.wxss &&
+        PATTERNS.WXSS_EXT.test(assetName) &&
+        !/'subpackage_common\.wxss';/.test(result)
+      ) {
+        result = `@import '${compatiblePath(
+          path.relative(path.parse(assetName).dir, res.wxss),
+        )}';\n${result}`;
+      }
+    }
+  });
+
+  return result;
+}
+
+/**
+ * 在开发模式下压缩公共模块代码
+ */
+function minifyCommonModules(content, assetName, isJs, isDev) {
+  if (!isDev) {
+    return content;
+  }
+
+  const isCommon = assetName === 'commons.js' || assetName === 'vendors.js';
+  const isNodeModule = isNodeModulesUsingComponent(assetName);
+
+  if (!isCommon && !isNodeModule) {
+    return content;
+  }
+
+  if (!isJs) {
+    return content;
+  }
+
+  const hash = hasha(content);
+  if (contentCache[assetName] && contentCache[assetName].hash === hash) {
+    return contentCache[assetName].content;
+  }
+
+  const result = UglifyJS.minify(content, {
+    mangle: false,
+    compress: {
+      drop_console: false,
+      drop_debugger: false,
+    },
+    sourceMap: false,
+  }).code;
+
+  contentCache[assetName] = { hash, content: result };
+  return result;
+}
+
 class WeappPlugin {
-  // eslint-disable-next-line
   constructor() {}
 
-  // eslint-disable-next-line
   apply(compiler) {
-    // const { RawSource } = compiler.webpack.sources;
-
     let obsAssets = [];
 
     compiler.hooks.done.tap(pluginName, () => {
@@ -37,7 +216,7 @@ class WeappPlugin {
         (assets) => {
           obsAssets = obsAssets.concat(
             Object.keys(assets).filter((key) => {
-              return getResourceAccept().test(key) && new RegExp(`${assetsDir}/`, 'g').test(key);
+              return ASSET_EXT_PATTERN.test(key) && key.includes(`${ASSETS_DIR}/`);
             }),
           );
         },
@@ -49,179 +228,29 @@ class WeappPlugin {
           stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
         },
         async (assets) => {
-          // this callback will run against assets added later by plugins.
           const items = Object.entries(assets)
-            .map(([name, source]) => {
-              return {
-                name,
-                source,
-              };
-            })
-            .filter((item) => {
-              return /(\.(js|wxss))$/g.test(item.name);
-            });
-
-          let hasCommonWxss = false;
-          let hasVendorWxss = false;
-          let hasCommonJs = false;
-          let hasRuntimeJs = false;
-          let hasVendorJs = false;
-          const subpackages = {};
-
-          // 检测公共模块
-          for (let index = 0; index < items.length; index += 1) {
-            const item = items[index];
-
-            if (hasCommonWxss === false && item.name === 'commons.wxss') {
-              hasCommonWxss = true;
-            }
-            if (hasVendorWxss === false && item.name === 'vendors_wxss.wxss') {
-              hasVendorWxss = true;
-            }
-            if (hasCommonJs === false && item.name === 'commons.js') {
-              hasCommonJs = true;
-            }
-            if (hasVendorJs === false && item.name === 'vendors.js') {
-              hasVendorJs = true;
-            }
-            if (hasRuntimeJs === false && item.name === 'runtime.js') {
-              hasRuntimeJs = true;
-            }
-            if (/subpackage_common/g.test(item.name)) {
-              const pathInfo = path.parse(item.name);
-
-              if (!subpackages[compatiblePath(pathInfo.dir)]) {
-                subpackages[compatiblePath(pathInfo.dir)] = {
-                  js: '',
-                  wxss: '',
-                };
-              }
-              if (/(\.js)$/g.test(item.name)) {
-                subpackages[compatiblePath(pathInfo.dir)].js = compatiblePath(item.name);
-              }
-              if (/(\.wxss)$/g.test(item.name)) {
-                subpackages[compatiblePath(pathInfo.dir)].wxss = compatiblePath(item.name);
-              }
-            }
-          }
-
-          for (let index = 0; index < items.length; index += 1) {
-            const asset = items[index];
+            .map(([name, source]) => ({ name, source }))
+            .filter((item) => PATTERNS.JS_EXT.test(item.name) || PATTERNS.WXSS_EXT.test(item.name));
 
-            const assetName = compatiblePath(asset.name);
-            const isJs = /(\.(js))$/g.test(assetName);
-            const { source } = asset;
-            let content = source.source();
+          const { flags, subpackages } = detectCommonModules(items);
 
-            if (content.toString) {
-              content = content.toString();
-            }
+          await Promise.all(
+            items.map(async (asset) => {
+              const assetName = compatiblePath(asset.name);
+              const isJs = PATTERNS.JS_EXT.test(assetName);
+              let content = asset.source.source();
 
-            // 注入全局引用模块
-            if (isJs) {
-              if (!/(var self = global;)/g.test(content)) {
-                content = `var self = global; \n${content}`;
-              }
-            }
-
-            // runtime 暴露到全局
-            if (assetName === 'runtime.js') {
-              content = content.replace(
-                'var __webpack_module_cache__ = {};',
-                `
-                  if (!global.__webpack_module_cache__) {
-                    global.__webpack_module_cache__ = {};
-                  }
-                  var __webpack_module_cache__ = global.__webpack_module_cache__;
-                  global.__webpack_require__ = __webpack_require__;
-                `,
-              );
-            }
-
-            // 注入公共模块 js
-            if (assetName === 'app.js') {
-              // sdk2.17.3 window 下没有 regeneratorRuntime
-              content = content.replace(
-                'Function("r", "regeneratorRuntime = r")(runtime);',
-                'global.regeneratorRuntime = runtime',
-              );
-              if (!/require('\.\/commons\.js')/g.test(content) && hasCommonJs) {
-                content = `require('./commons.js');\n${content}`;
+              if (content.toString) {
+                content = content.toString();
               }
-              if (!/require('\.\/vendors\.js')/g.test(content) && hasVendorJs) {
-                content = `require('./vendors.js');\n${content}`;
-              }
-              if (!/require('\.\/runtime\.js')/g.test(content) && hasRuntimeJs) {
-                content = `require('./runtime.js');\n${content}`;
-              }
-            }
 
-            // 注入公共模块 css
-            if (assetName === 'app.wxss') {
-              if (!/@import '\.\/commons\.wxss'/g.test(content) && hasCommonWxss) {
-                content = `@import './commons.wxss';\n${content}`;
-              }
-              if (!/@import '\.\/vendors_wxss\.wxss'/g.test(content) && hasVendorWxss) {
-                content = `@import './vendors_wxss.wxss';\n${content}`;
-              }
-            }
-
-            // 分包注入公共模块
-            Object.keys(subpackages).forEach((subpackage) => {
-              const res = subpackages[subpackage];
-
-              if (
-                assetName.startsWith(subpackage) &&
-                !/(subpackage_common\.(js|wxss))$/g.test(assetName)
-              ) {
-                if (
-                  res.js &&
-                  /(\.js)$/g.test(assetName) &&
-                  !/'subpackage_common\.js'\);/g.test(content)
-                ) {
-                  content = `require('${compatiblePath(
-                    path.relative(path.parse(assetName).dir, res.js),
-                  )}');\n${content}`;
-                }
-                if (
-                  res.wxss &&
-                  /(\.wxss)$/g.test(assetName) &&
-                  !/'subpackage_common\.wxss';/g.test(content)
-                ) {
-                  content = `@import '${compatiblePath(
-                    path.relative(path.parse(assetName).dir, res.wxss),
-                  )}';\n${content}`;
-                }
-              }
-            });
-
-            // 压缩 公共模块
-            if (
-              (assetName === 'commons.js' ||
-                assetName === 'vendors.js' ||
-                isNodeModulesUsingComponent(asset.name)) &&
-              compiler.options.mode === ENV.DEV
-            ) {
-              const hash = hasha(content);
-              if (contentCache[assetName] && contentCache[assetName].hash === hash) {
-                content = contentCache[assetName].content;
-              } else if (isJs) {
-                content = UglifyJS.minify(content, {
-                  mangle: false,
-                  compress: {
-                    drop_console: false,
-                    drop_debugger: false,
-                  },
-                  sourceMap: false,
-                }).code;
-                contentCache[assetName] = {
-                  hash,
-                  content,
-                };
-              }
-            }
-            compilation.updateAsset(asset.name, new RawSource(content));
-          }
+              content = injectGlobalModules(content, assetName, flags);
+              content = injectSubpackageRequires(content, assetName, subpackages);
+              content = minifyCommonModules(content, assetName, isJs, compiler.options.mode === ENV.DEV);
+
+              compilation.updateAsset(asset.name, new RawSource(content));
+            }),
+          );
         },
       );
     });

package/build/prod.js

@@ -1,34 +1,43 @@
-const chalk = require('chalk');
+const path = require('path');
 const webpack = require('webpack');
-const ENV = require('./config/env');
+const TerserPlugin = require('terser-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const { ENV } = require('./config/constants');
 const webpackConfig = require('./webpack.config');
+const { createCompilerHandler } = require('./utils/createCompilerHandler');
+const { getBuildEnv } = require('./utils/buildEnv');
 
 module.exports = (opts) => {
   const compiler = webpack(
     webpackConfig(
       {
         mode: ENV.PROD,
-        devtool: 'cheap-module-source-map',
+        devtool: false,
+        output: {
+          clean: {
+            keep: /project\.config\.json/,
+          },
+        },
+        optimization: {
+          minimizer: [
+            new TerserPlugin({
+              extractComments: false,
+            }),
+            new CssMinimizerPlugin(),
+          ],
+        },
+        cache: {
+          type: 'filesystem',
+          cacheDirectory: path.resolve(process.cwd(), 'node_modules/.cache/webpack'),
+          buildDependencies: {
+            config: [path.resolve(__dirname, 'webpack.config.js')],
+          },
+          name: `${getBuildEnv()}-${process.version.slice(0, 6)}`,
+        },
       },
       opts || {},
     ),
   );
 
-  compiler.run((err, stats) => {
-    if (err) {
-      console.error(err);
-      return;
-    }
-
-    if (stats.hasErrors()) {
-      console.log(
-        stats.toString({
-          chunks: false, // Makes the build much quieter
-          colors: true, // Shows colors in the console
-        }),
-      );
-    }
-
-    console.log(chalk.green(`completed in ${(stats.endTime - stats.startTime) / 1000} seconds`));
-  });
+  compiler.run(createCompilerHandler('build'));
 };

package/build/utils/buildEnv.js

@@ -1,8 +1,16 @@
-const ENV = require('../config/env');
-const recordEnv = require('./recordEnv');
+const fs = require('fs-extra');
+const path = require('path');
+const { ENV, DIST_DIR } = require('../config/constants');
 
 let env = '';
 
+function recordEnv(config) {
+  fs.writeJSONSync(path.join(DIST_DIR, 'weapp.env.json'), {
+    env: ENV.DEV,
+    ...config,
+  });
+}
+
 function setBuildEnv({ mode, development, simulation, production }) {
   env = mode;
 

package/build/utils/compatiblePath.js

@@ -10,4 +10,6 @@ function compatiblePath(str) {
   return str;
 }
 
-module.exports = compatiblePath;
+module.exports = {
+  compatiblePath,
+};

package/build/utils/createCompilerHandler.js

@@ -0,0 +1,29 @@
+const chalk = require('chalk');
+
+/**
+ * 创建 webpack 编译结果回调处理器
+ * @param {string} label - 构建阶段标签，如 'dev' 或 'build'
+ */
+function createCompilerHandler(label) {
+  return (err, stats) => {
+    if (err) {
+      console.error(err);
+      return;
+    }
+
+    if (stats.hasErrors()) {
+      console.log(
+        stats.toString({
+          chunks: false,
+          colors: true,
+        }),
+      );
+    }
+
+    console.log(chalk.green(`${label} completed in ${(stats.endTime - stats.startTime) / 1000} seconds`));
+  };
+}
+
+module.exports = {
+  createCompilerHandler,
+};

package/build/utils/getWxmlAssets.js

@@ -1,29 +1,19 @@
 const htmlparser2 = require('htmlparser2');
 const path = require('path');
 const fse = require('fs-extra');
-const getResourceAccept = require('../config/getResourceAccept');
-const getContext = require('../config/getContext');
-
-const context = getContext();
+const { ASSET_EXT_PATTERN, PATTERNS, SRC_DIR } = require('../config/constants');
 
 function getWxmlAssets(filePath, content) {
   const resolvePath = (attr, dir) => {
-    // console.log('-------------');
-    // console.log(attr, dir);
-    // console.log('-------------');
     return new Promise((resolve) => {
-      this.resolve(context, attr, async (err, result) => {
+      this.resolve(SRC_DIR, attr, async (err, result) => {
         let res = result;
         if (err) {
           if (await fse.pathExists(path.resolve(dir, attr))) {
             res = path.resolve(dir, attr);
             resolve(res);
           } else {
-            // console.log('-------------');
-            // console.log(attr);
             this.emitError(err);
-            // this.emitWarning(err);
-            // reject(err);
             resolve(res);
           }
         } else {
@@ -69,31 +59,35 @@ function getWxmlAssets(filePath, content) {
           .filter((item) => !!item)
           .map((item) => item.split('?')[0])
           .filter((item) => !/^(http:|https:)/.test(item))
-          .filter((item) => !/{{.*}}/g.test(item))
-          .filter((item) => !/\+.*\+/g.test(item));
+          .filter((item) => !/{{.*}}/.test(item))
+          .filter((item) => !/\+.*\+/.test(item));
 
-        const assets = filteredAttrs.filter((item) => getResourceAccept().test(item));
-        const wxmls = allAttrs.filter((item) => /\.(wxs|wxml)$/g.test(item));
+        const assets = filteredAttrs.filter((item) => ASSET_EXT_PATTERN.test(item));
+        const wxmls = allAttrs.filter((item) => PATTERNS.WXS_EXT.test(item) || PATTERNS.WXML_EXT.test(item));
 
         const assetsImports = [];
         const wxmlsImports = [];
 
-        for (let index = 0; index < wxmls.length; index += 1) {
-          const attr = wxmls[index];
-          const result = await resolvePath(attr, path.parse(filePath).dir);
-
-          if (result) {
-            wxmlsImports.push([attr, result]);
-          }
+        // 并行解析 wxml 路径
+        const wxmlResults = await Promise.all(
+          wxmls.map(async (attr) => {
+            const result = await resolvePath(attr, path.parse(filePath).dir);
+            return result ? [attr, result] : null;
+          }),
+        );
+        for (let index = 0; index < wxmlResults.length; index += 1) {
+          if (wxmlResults[index]) wxmlsImports.push(wxmlResults[index]);
         }
 
-        for (let index = 0; index < assets.length; index += 1) {
-          const attr = assets[index];
-          const result = await resolvePath(attr, path.parse(filePath).dir);
-
-          if (result) {
-            assetsImports.push([attr, result]);
-          }
+        // 并行解析 asset 路径
+        const assetResults = await Promise.all(
+          assets.map(async (attr) => {
+            const result = await resolvePath(attr, path.parse(filePath).dir);
+            return result ? [attr, result] : null;
+          }),
+        );
+        for (let index = 0; index < assetResults.length; index += 1) {
+          if (assetResults[index]) assetsImports.push(assetResults[index]);
         }
 
         resolve([assetsImports, wxmlsImports]);
@@ -104,4 +98,6 @@ function getWxmlAssets(filePath, content) {
   });
 }
 
-module.exports = getWxmlAssets;
+module.exports = {
+  getWxmlAssets,
+};

package/build/utils/isSubpackage.js

@@ -1,5 +1,5 @@
-const compatiblePath = require('./compatiblePath');
-const getAppConfig = require('../config/getAppConfig');
+const { compatiblePath } = require('./compatiblePath');
+const { getAppConfig } = require('../config/getAppConfig');
 
 const appConfig = getAppConfig();
 
@@ -9,7 +9,7 @@ function isSubpackage(file) {
   (appConfig.subpackages || []).forEach((pkg) => {
     let { root } = pkg;
 
-    if (!/\/$/g.test(root)) {
+    if (!/\/$/.test(root)) {
       root = `${root}/`;
     }
 
@@ -19,4 +19,6 @@ function isSubpackage(file) {
   });
   return isSub;
 }
-module.exports = isSubpackage;
+module.exports = {
+  isSubpackage,
+};

package/build/utils/loadModule.js

@@ -3,17 +3,14 @@ function loadModule(file) {
     this.addDependency(file);
     this.loadModule(file, (err, src) => {
       if (err) {
-        // console.log();
-        // console.log(file, this.resourcePath);
-        // console.log();
         this.emitError(err);
-        // this.emitWarning(err);
-        // reject(err);
-        resolve(src);
+        resolve(null);
       } else {
         resolve(src);
       }
     });
   });
 }
-module.exports = loadModule;
+module.exports = {
+  loadModule,
+};