hw-weapp-compiler 1.0.0 → 1.0.1

package/build/config/constants.js

@@ -0,0 +1,37 @@
+const path = require('path');
+
+const ENV = {
+  DEV: 'development',
+  PROD: 'production',
+  SIMULATION: 'simulation',
+  UNKNOWN: 'unknown',
+};
+
+const PATTERNS = {
+  NODE_MODULES: /node_modules/,
+  JS_EXT: /\.js$/,
+  WXSS_EXT: /\.wxss$/,
+  WXML_EXT: /\.wxml$/,
+  WXS_EXT: /\.wxs$/,
+  LESS_EXT: /\.less$/,
+  CSS_EXT: /\.css$/,
+  JSON_EXT: /\.json$/,
+  STYLE_EXTS: /\.(less|wxss|css)$/i,
+  PLUGIN_PATH: /^(plugin:|plugin-private:|weui-miniprogram)/,
+  ABSOLUTE_PATH: /^\//,
+};
+
+const ASSET_EXT_PATTERN = /\.(png|jpg|gif|jpeg|svg|ttf|woff|eot|woff2|otf|mp3|mp4|wav|html)$/i;
+
+const SRC_DIR = path.resolve(process.cwd(), 'src');
+const DIST_DIR = path.resolve(process.cwd(), 'dist');
+const ASSETS_DIR = 'assets';
+
+module.exports = {
+  ENV,
+  PATTERNS,
+  ASSET_EXT_PATTERN,
+  SRC_DIR,
+  DIST_DIR,
+  ASSETS_DIR,
+};

package/build/config/getAppConfig.js

@@ -1,11 +1,16 @@
 const path = require('path');
 const fse = require('fs-extra');
-const getContext = require('./getContext');
+const { SRC_DIR } = require('./constants');
 
-const appConfig = fse.readJSONSync(path.resolve(getContext(), 'app.json'));
+let _appConfig = null;
 
 function getAppConfig() {
-  return appConfig;
+  if (!_appConfig) {
+    _appConfig = fse.readJSONSync(path.resolve(SRC_DIR, 'app.json'));
+  }
+  return _appConfig;
 }
 
-module.exports = getAppConfig;
+module.exports = {
+  getAppConfig,
+};

package/build/config/getConfig.js

@@ -70,4 +70,6 @@ function getConfig() {
   };
 }
 
-module.exports = getConfig;
+module.exports = {
+  getConfig,
+};

package/build/config/{getEntrys.js → getEntries.js}

@@ -1,24 +1,22 @@
 const path = require('path');
 const fse = require('fs-extra');
-const getContext = require('./getContext');
 const { addNodeModulesUsingComponent } = require('../utils/isNodeModulesUsingComponent');
-const compatiblePath = require('../utils/compatiblePath');
-const traverseDir = require('../utils/traverseDir');
-const getAppConfig = require('./getAppConfig');
-
-const context = getContext();
+const { compatiblePath } = require('../utils/compatiblePath');
+const { traverseDir } = require('../utils/traverseDir');
+const { getAppConfig } = require('./getAppConfig');
+const { PATTERNS, SRC_DIR } = require('./constants');
 const appConfig = getAppConfig();
 
-const entrys = {
-  app: path.resolve(context, 'app'),
+const entries = {
+  app: path.resolve(SRC_DIR, 'app'),
 };
 const addUsingComponents = (components, parent) => {
   Object.keys(components).forEach((key) => {
     let filePath = components[key];
 
-    if (!/^(plugin:|plugin-private:|weui-miniprogram)/g.test(filePath)) {
-      if (/^\//g.test(filePath)) {
-        filePath = path.resolve(context, filePath.replace(/^\//g, ''));
+    if (!PATTERNS.PLUGIN_PATH.test(filePath)) {
+      if (PATTERNS.ABSOLUTE_PATH.test(filePath)) {
+        filePath = path.resolve(SRC_DIR, filePath.replace(PATTERNS.ABSOLUTE_PATH, ''));
       }
 
       if (fse.existsSync(`${path.resolve(parent, filePath)}.js`)) {
@@ -26,7 +24,7 @@ const addUsingComponents = (components, parent) => {
       } else {
         try {
           filePath = require.resolve(filePath);
-          filePath = filePath.replace(/(\.js)$/g, '');
+          filePath = filePath.replace(PATTERNS.JS_EXT, '');
         } catch (error) {
           console.error(error);
           return;
@@ -40,18 +38,17 @@ const addUsingComponents = (components, parent) => {
 
       let entryKey = filePath;
 
-      if (/\/node_modules\//g.test(filePath) || /\\node_modules\\/g.test(filePath)) {
-        // eslint-disable-next-line
+      if (PATTERNS.NODE_MODULES.test(filePath)) {
         entryKey = compatiblePath(filePath).split('/node_modules/')[1];
 
         addNodeModulesUsingComponent(entryKey);
       } else {
-        entryKey = path.relative(context, filePath);
+        entryKey = path.relative(SRC_DIR, filePath);
       }
 
       entryKey = compatiblePath(entryKey);
 
-      entrys[entryKey] = filePath;
+      entries[entryKey] = filePath;
     }
   });
 };
@@ -65,26 +62,32 @@ const readUsingComponents = (file) => {
 
 // pages
 (appConfig.pages || []).forEach((page) => {
-  entrys[page] = path.resolve(context, page);
+  entries[page] = path.resolve(SRC_DIR, page);
 });
 
 // tabbar
-if (fse.existsSync(path.resolve(context, 'custom-tab-bar/index.js'))) {
-  entrys['custom-tab-bar/index'] = path.resolve(context, 'custom-tab-bar/index');
+if (fse.existsSync(path.resolve(SRC_DIR, 'custom-tab-bar/index.js'))) {
+  entries['custom-tab-bar/index'] = path.resolve(SRC_DIR, 'custom-tab-bar/index');
 }
 
 // subpackages
 (appConfig.subpackages || []).forEach((pkg) => {
   (pkg.pages || []).forEach((page) => {
-    entrys[compatiblePath(path.join(pkg.root, page))] = path.resolve(context, pkg.root, page);
+    entries[compatiblePath(path.join(pkg.root, page))] = path.resolve(SRC_DIR, pkg.root, page);
   });
 });
 
 // usingComponents
-traverseDir(context).forEach((item) => {
-  if (/(\.json)$/g.test(item)) {
+traverseDir(SRC_DIR).forEach((item) => {
+  if (PATTERNS.JSON_EXT.test(item)) {
     readUsingComponents(item);
   }
 });
 
-module.exports = () => entrys;
+function getEntries() {
+  return entries;
+}
+
+module.exports = {
+  getEntries,
+};

package/build/dev.js

@@ -1,7 +1,7 @@
-const chalk = require('chalk');
 const webpack = require('webpack');
-const ENV = require('./config/env');
+const { ENV } = require('./config/constants');
 const webpackConfig = require('./webpack.config');
+const { createCompilerHandler } = require('./utils/createCompilerHandler');
 
 module.exports = (opts) => {
   const compiler = webpack(
@@ -14,21 +14,5 @@ module.exports = (opts) => {
     ),
   );
 
-  compiler.watch({}, (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.watch({}, createCompilerHandler('dev'));
 };

package/build/loader/js-loader.js

@@ -1,9 +1,15 @@
+/**
+ * js-loader - 微信小程序 JS 加载器
+ *
+ * 为页面/组件入口 JS 自动注入同名的样式文件 import 和依赖模块，
+ * 确保小程序运行时能正确加载关联资源。
+ */
 const path = require('path');
 const fse = require('fs-extra');
-const getEntrys = require('../config/getEntrys');
-const loadModule = require('../utils/loadModule');
+const { getEntries } = require('../config/getEntries');
+const { loadModule } = require('../utils/loadModule');
 
-const entrys = getEntrys();
+const entries = getEntries();
 
 module.exports = async function loader(source) {
   this.cacheable(true);
@@ -14,7 +20,7 @@ module.exports = async function loader(source) {
 
   const imports = [sourceStr];
 
-  if (Object.values(entrys).indexOf(path.resolve(fileInfo.dir, fileInfo.name)) !== -1) {
+  if (Object.values(entries).indexOf(path.resolve(fileInfo.dir, fileInfo.name)) !== -1) {
     const exts = ['.less', '.wxss', '.css', '.json', '.wxml'];
 
     for (let index = 0; index < exts.length; index += 1) {

package/build/loader/wxml-loader.js

@@ -1,5 +1,11 @@
-const getWxmlAssets = require('../utils/getWxmlAssets');
-const loadModule = require('../utils/loadModule');
+/**
+ * wxml-loader - 微信小程序 wxml 模板加载器
+ *
+ * 解析 wxml 文件中的资源引用（图片等）和 wxml/wxs 引用，
+ * 将资源路径替换为构建产物路径，并将引用的 wxml/wxs 模块加入依赖。
+ */
+const { getWxmlAssets } = require('../utils/getWxmlAssets');
+const { loadModule } = require('../utils/loadModule');
 
 module.exports = async function loader(source) {
   this.cacheable(true);

package/build/loader/wxs-loader.js

@@ -1,5 +1,11 @@
+/**
+ * wxs-loader - 微信小程序 wxs 脚本加载器
+ *
+ * 解析 wxs 文件中的 require 调用，将被引用的模块加入 webpack 依赖图，
+ * 确保构建时 wxs 的依赖被正确追踪。
+ */
 const path = require('path');
-const loadModule = require('../utils/loadModule');
+const { loadModule } = require('../utils/loadModule');
 
 module.exports = async function loader(source) {
   this.cacheable(true);

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,177 +228,26 @@ 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];
+            .map(([name, source]) => ({ name, source }))
+            .filter((item) => PATTERNS.JS_EXT.test(item.name) || PATTERNS.WXSS_EXT.test(item.name));
 
-            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);
-              }
-            }
-          }
+          const { flags, subpackages } = detectCommonModules(items);
 
           for (let index = 0; index < items.length; index += 1) {
             const asset = items[index];
-
             const assetName = compatiblePath(asset.name);
-            const isJs = /(\.(js))$/g.test(assetName);
-            const { source } = asset;
-            let content = source.source();
+            const isJs = PATTERNS.JS_EXT.test(assetName);
+            let content = asset.source.source();
 
             if (content.toString) {
               content = content.toString();
             }
 
-            // 注入全局引用模块
-            if (isJs) {
-              if (!/(var self = global;)/g.test(content)) {
-                content = `var self = global; \n${content}`;
-              }
-            }
+            content = injectGlobalModules(content, assetName, flags);
+            content = injectSubpackageRequires(content, assetName, subpackages);
+            content = minifyCommonModules(content, assetName, isJs, compiler.options.mode === ENV.DEV);
 
-            // 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 (!/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));
           }
         },