hw-weapp-compiler 1.0.0 → 1.0.2

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,9 +1,23 @@
-const chalk = require('chalk');
+const path = require('path');
+const fse = require('fs-extra');
 const webpack = require('webpack');
-const ENV = require('./config/env');
+const { ENV, DIST_DIR } = require('./config/constants');
 const webpackConfig = require('./webpack.config');
+const { createCompilerHandler } = require('./utils/createCompilerHandler');
 
 module.exports = (opts) => {
+  // 开发模式启动时清理一次 dist 目录
+  if (fse.existsSync(DIST_DIR)) {
+    const files = fse.readdirSync(DIST_DIR);
+    files.forEach((item) => {
+      if (!/project\.config\.json/.test(item)) {
+        fse.removeSync(path.resolve(DIST_DIR, item));
+      }
+    });
+  } else {
+    fse.mkdirSync(DIST_DIR);
+  }
+
   const compiler = webpack(
     webpackConfig(
       {
@@ -14,21 +28,12 @@ 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(
+    {
+      aggregateTimeout: 300,
+      poll: false,
+      ignored: /node_modules/,
+    },
+    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,21 +20,30 @@ 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) {
-      const ext = exts[index];
-      const otherFilePath = path.resolve(fileInfo.dir, fileInfo.name + ext);
-
-      if (await fse.pathExists(otherFilePath)) {
+    const checks = await Promise.all(
+      exts.map(async (ext) => {
+        const otherFilePath = path.resolve(fileInfo.dir, fileInfo.name + ext);
+        const exists = await fse.pathExists(otherFilePath);
+        return { ext, otherFilePath, exists };
+      }),
+    );
+    const existing = checks.filter((r) => r.exists);
+    const loadResults = await Promise.all(
+      existing.map(async ({ ext, otherFilePath }) => {
         if (['.less', '.wxss', '.css'].indexOf(ext) !== -1) {
-          imports.unshift(`import './${fileInfo.name}${ext}'\n`);
-        } else {
-          await loadModule.call(this, otherFilePath);
+          return { type: 'style', ext, path: otherFilePath };
         }
+        await loadModule.call(this, otherFilePath);
+        return { type: 'module', ext, path: otherFilePath };
+      }),
+    );
+    loadResults.forEach((result) => {
+      if (result.type === 'style') {
+        imports.unshift(`import './${fileInfo.name}${result.ext}'\n`);
       }
-    }
+    });
   }
 
   callback(null, imports.join(''));

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);
@@ -22,22 +28,23 @@ module.exports = async function loader(source) {
 
   const [assets, wxmls] = await getWxmlAssets.call(this, filePath, content);
 
-  // 资源文件
-  for (let index = 0; index < assets.length; index += 1) {
-    const [attr, file] = assets[index];
-    const src = await loadModule.call(this, file);
-
-    if (src) {
-      content = content.replace(attr, withPublicPath(src, publicPath));
+  // 资源文件 - 并行 loadModule
+  const assetResults = await Promise.all(
+    assets.map(async ([attr, file]) => {
+      const src = await loadModule.call(this, file);
+      return src ? [attr, src] : null;
+    }),
+  );
+  for (let index = 0; index < assetResults.length; index += 1) {
+    const result = assetResults[index];
+    if (result) {
+      const [attr, src] = result;
+      content = content.replace(attr, withPublicPath(src));
     }
   }
 
-  // wxml文件
-  for (let index = 0; index < wxmls.length; index += 1) {
-    const [, file] = wxmls[index];
-
-    await loadModule.call(this, file);
-  }
+  // wxml文件 - 并行 loadModule
+  await Promise.all(wxmls.map(([, file]) => loadModule.call(this, file)));
 
   callback(null, content);
 };

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);
@@ -10,15 +16,15 @@ module.exports = async function loader(source) {
 
   const requires = content.match(/require\(("|').*("|')\)/g) || [];
 
-  for (let index = 0; index < requires.length; index += 1) {
-    const item = requires[index];
-
-    const file = path.resolve(
-      fileInfo.dir,
-      item.replace(/^((require\(')|(require\("))/g, '').replace(/(('\))|("\)))$/g, ''),
-    );
-    await loadModule.bind(this)(file);
-  }
+  await Promise.all(
+    requires.map(async (item) => {
+      const file = path.resolve(
+        fileInfo.dir,
+        item.replace(/^((require\(')|(require\("))/g, '').replace(/(('\))|("\)))$/g, ''),
+      );
+      await loadModule.call(this, file);
+    }),
+  );
 
   callback(null, content);
 };