hw-weapp-compiler 1.0.17 → 1.0.18

package/README.md

@@ -1,76 +1,117 @@
-# weapp-compiler
+# hw-weapp-compiler
 
+基于 webpack 5 的原生微信小程序构建工具，支持 JavaScript、Less、WXML、WXS、分包、npm 组件和可选的 OBS/OSS 静态资源上传。
 
-## 版本改动
+## 环境要求
 
-1. **OpenSSL 3.0 兼容**: Node.js >= 17 时自动注入 `--openssl-legacy-provider`
-2. **wxml-loader 空值守卫**: `loadModule` 失败时不再崩溃
+- Node.js 18～24
+- 项目源码位于 `src/`
+- 必须存在 `src/app.json` 和 `src/app.js`
 
 ## 安装
 
 ```bash
-npm i weapp-compiler@2.x -D
+npm install hw-weapp-compiler@1 -D
+```
+
+在业务项目的 `package.json` 中添加：
+
+```json
+{
+  "scripts": {
+    "dev": "hw-weapp dev",
+    "build": "hw-weapp build"
+  }
+}
 ```
 
 ## 使用
 
 ```bash
-# 开发调试
-npm run dev        # 测试环境
-npm run dev -s     # 预发环境
-npm run dev -p     # 生产环境
-
-# 生产发布
-npm run build -d   # 测试环境
-npm run build -s   # 预发环境
-npm run build      # 生产环境
+# 开发监听，默认 development
+npm run dev
+
+# 指定预发或生产业务环境
+npm run dev -- --simulation
+npm run dev -- --production
+
+# 生产构建，默认 production
+npm run build
+npm run build -- --development
+npm run build -- --simulation
 ```
 
+可用选项：
+
+- `-d, --development`：测试环境
+- `-s, --simulation`：预发环境
+- `-p, --production`：生产环境
+- `-a, --analyzer`：打开 webpack bundle analyzer
+- `-q, --quiet`：关闭 webpack 进度输出
+
+最终环境会通过 `process.env.BUILD_ENV` 注入代码，并记录到 `dist/weapp.env.json`。
+
 ## 配置
 
-项目根目录下创建 `.weapp.js`：
+在项目根目录创建 `.weapp.js`，最小配置为：
+
+```js
+module.exports = {};
+```
+
+完整示例：
 
 ```js
 const path = require('path');
 
 module.exports = {
-  // 路径别名
   alias: {
     '@utils': path.resolve(__dirname, 'src/utils'),
-    '@config': path.resolve(__dirname, 'src/config'),
   },
-  // 资源公共路径
   publicPath: 'https://cdn.example.com/weapp/',
-  // 要同步的目录
-  copyFiles: [{
-    from: 'images',
-    to: 'images',
-  }],
-  // OBS 或 OSS 配置（二选一）
-  obsConfig: {
-    access_key_id: 'XXX',
-    secret_access_key: 'XXX',
-    server: 'XXX',
-    bucket: 'XXX',
-    dir: 'weapp',
-  },
-  ossConfig: {
-    region: '<Your region>',
-    accessKeyId: '<Your AccessKeyId>',
-    accessKeySecret: '<Your AccessKeySecret>',
-    bucket: '<Your Bucket>',
-    dir: 'weapp',
-  },
+  copyFiles: [
+    { from: 'images', to: 'images' },
+  ],
+};
+```
+
+## 静态资源上传
+
+上传是可选功能，只能配置 OBS 或 OSS 中的一种。生产构建会等待上传完成，任何上传失败都会让构建失败；编译失败时不会上传半成品。
+
+建议从环境变量读取凭据，避免把密钥提交到仓库：
+
+```js
+module.exports = {
+  obsConfig: process.env.OBS_ACCESS_KEY_ID
+    ? {
+        access_key_id: process.env.OBS_ACCESS_KEY_ID,
+        secret_access_key: process.env.OBS_SECRET_ACCESS_KEY,
+        server: process.env.OBS_SERVER,
+        bucket: process.env.OBS_BUCKET,
+        dir: 'weapp',
+      }
+    : undefined,
 };
 ```
 
-在 `project.config.json` 中忽略构建产物：
+OSS 配置字段为 `region`、`accessKeyId`、`accessKeySecret`、`bucket` 和 `dir`。
+
+## 开发监听限制
+
+修改已有文件可以正常增量构建。开发监听期间新增页面、组件、分包，或后创建同名 `.less`、`.wxss`、`.wxml`、`.json` 文件后，需要重新启动 `dev`。生产 `build` 每次都会重新读取完整项目配置。
+
+## 微信开发者工具配置
+
+如果资源使用 CDN 上传，可以在 `src/project.config.json` 中忽略本地产物：
 
 ```json
-"packOptions": {
-  "ignore": [
-    { "type": "folder", "value": "assets" },
-    { "type": "regexp", "value": "\\.map$" }
-  ]
+{
+  "packOptions": {
+    "ignore": [
+      { "type": "folder", "value": "assets" },
+      { "type": "regexp", "value": "\\.map$" }
+    ]
+  }
 }
 ```

package/build/config/getConfig.js

@@ -56,6 +56,9 @@ ossConfig: {
 `),
   );
 }
+if (config.obsConfig && config.ossConfig) {
+  throw new TypeError('.weapp.js 不能同时配置 obsConfig 和 ossConfig');
+}
 const alias = {
   ...(config.alias || {}),
 };

package/build/plugin/index.js

@@ -9,10 +9,25 @@ const { RawSource } = require('webpack-sources');
 
 const { addToUploadQueue } = require('../utils/upload');
 const { compatiblePath } = require('../utils/compatiblePath');
-const { PATTERNS, ASSET_EXT_PATTERN, ASSETS_DIR } = require('../config/constants');
+const { ENV, PATTERNS, ASSET_EXT_PATTERN, ASSETS_DIR } = require('../config/constants');
 
 const pluginName = 'WeappCompilerPlugin';
 
+async function uploadCompilationAssets(stats, compiler, assets, upload = addToUploadQueue) {
+  if (stats.hasErrors() || assets.length === 0) {
+    return;
+  }
+
+  try {
+    await upload(assets);
+  } catch (error) {
+    if (compiler.options.mode === ENV.PROD) {
+      throw error;
+    }
+    compiler.getInfrastructureLogger(pluginName).error(error);
+  }
+}
+
 /**
  * 检测产物中存在哪些公共模块和分包模块
  */
@@ -76,13 +91,19 @@ function injectGlobalModules(content, assetName, flags) {
 
   // runtime 暴露到全局
   if (assetName === 'runtime.js') {
+    const runtimeCachePattern = /\b(var|let|const)\s+__webpack_module_cache__\s*=\s*\{\};/;
+    if (!runtimeCachePattern.test(result)) {
+      throw new Error(
+        '无法注入微信小程序 runtime：当前 webpack 产物中缺少 module cache 标记，请检查 webpack 版本',
+      );
+    }
     result = result.replace(
-      'var __webpack_module_cache__ = {};',
-      `
+      runtimeCachePattern,
+      (statement, declaration) => `
         if (!global.__webpack_module_cache__) {
           global.__webpack_module_cache__ = {};
         }
-        var __webpack_module_cache__ = global.__webpack_module_cache__;
+        ${declaration} __webpack_module_cache__ = global.__webpack_module_cache__;
         global.__webpack_require__ = __webpack_require__;
       `,
     );
@@ -167,9 +188,10 @@ class WeappPlugin {
   apply(compiler) {
     let obsAssets = [];
 
-    compiler.hooks.done.tap(pluginName, () => {
-      addToUploadQueue([...obsAssets]);
+    compiler.hooks.done.tapPromise(pluginName, async (stats) => {
+      const assets = Array.from(new Set(obsAssets));
       obsAssets = [];
+      await uploadCompilationAssets(stats, compiler, assets);
     });
 
     compiler.hooks.compilation.tap(pluginName, (compilation) => {
@@ -228,3 +250,7 @@ class WeappPlugin {
 }
 
 module.exports = WeappPlugin;
+module.exports._internals = {
+  injectGlobalModules,
+  uploadCompilationAssets,
+};

package/build/utils/getWxmlAssets.js

@@ -3,6 +3,21 @@ const path = require('path');
 const fse = require('fs-extra');
 const { ASSET_EXT_PATTERN, PATTERNS, SRC_DIR } = require('../config/constants');
 
+function extractStyleUrls(style) {
+  const urls = [];
+  const urlPattern = /url\(\s*(?:(['"])(.*?)\1|([^)]*?))\s*\)/gi;
+  let match;
+
+  // eslint-disable-next-line no-cond-assign
+  while ((match = urlPattern.exec(style)) !== null) {
+    const value = (match[2] !== undefined ? match[2] : match[3]).trim();
+    if (value) {
+      urls.push(value);
+    }
+  }
+  return urls;
+}
+
 function getWxmlAssets(filePath, content) {
   const resolvePath = (attr, dir) => {
     return new Promise((resolve) => {
@@ -32,7 +47,6 @@ function getWxmlAssets(filePath, content) {
     let allAttrs = [];
     const parser = new htmlparser2.Parser({
       onopentag: async (name, attributes) => {
-        const reg = /url\(.*\)/g;
         const { style } = attributes;
 
         allAttrs = allAttrs.concat(
@@ -43,18 +57,7 @@ function getWxmlAssets(filePath, content) {
         );
 
         if (style) {
-          const styles = attributes.style.split(';');
-          styles.forEach((styleItem) => {
-            (styleItem.match(reg) || []).forEach((item) => {
-              allAttrs.push(
-                item
-                  .replace(/^(url\(”)/g, '')
-                  .replace(/^(url\(')/g, '')
-                  .replace(/^(url\()/g, '')
-                  .replace(/(“\)|'\)|\))$/g, ''),
-              );
-            });
-          });
+          allAttrs = allAttrs.concat(extractStyleUrls(style));
         }
       },
       onerror: (err) => {
@@ -64,7 +67,7 @@ function getWxmlAssets(filePath, content) {
         const filteredAttrs = allAttrs
           .filter((item) => !!item)
           .map((item) => item.split('?')[0])
-          .filter((item) => !/^(http:|https:)/.test(item))
+          .filter((item) => !/^(?:https?:)?\/\//i.test(item))
           .filter((item) => !/{{.*}}/.test(item))
           .filter((item) => !/\+.*\+/.test(item));
 
@@ -106,4 +109,5 @@ function getWxmlAssets(filePath, content) {
 
 module.exports = {
   getWxmlAssets,
+  extractStyleUrls,
 };

package/build/utils/upload.js

@@ -18,8 +18,6 @@ const { obsConfig, ossConfig } = getConfig();
 
 let obsClient;
 let ossClient;
-let progress;
-let uploadQueue = {};
 
 function getObsClient() {
   if (!obsClient) {
@@ -110,77 +108,61 @@ function doUpload(file) {
   return doObsUpload(file);
 }
 
-function updateProgress() {
-  const completed =
-    Object.entries(uploadQueue).filter((item) => item[1] === 'completed').length + 1;
-  const total = Object.keys(uploadQueue).length;
-
-  if (!progress) {
-    progress = new Progress('uploading assets [:bar] :current/:total', {
-      total,
-      width: 40,
-      clear: true,
-    });
-  }
-
-  progress.tick();
-
-  if (completed === total) {
-    progress.tick({
-      current: total,
-    });
-    progress = null;
-    uploadQueue = {};
+async function uploadFile(file) {
+  try {
+    await getStat(file);
+  } catch (error) {
+    await doUpload(file);
   }
-
-  return `[${completed}/${total}]`;
+  setStorage(file, true);
 }
 
-async function checkUpload() {
-  const files = Object.entries(uploadQueue)
-    .filter((item) => item[1] === false)
-    .splice(0, 10);
+async function uploadFiles(files, task = uploadFile) {
+  const failures = [];
+  const progress = new Progress('uploading assets [:bar] :current/:total', {
+    total: files.length,
+    width: 40,
+    clear: true,
+  });
 
-  if (files && files.length) {
+  for (let index = 0; index < files.length; index += 10) {
+    const batch = files.slice(index, index + 10);
     await Promise.all(
-      files.map(async (file) => {
-        uploadQueue[file[0]] = 'uploading';
+      batch.map(async (file) => {
         try {
-          await getStat(file[0]);
-          setStorage(file[0], true);
-          updateProgress();
+          await task(file);
         } catch (error) {
-          try {
-            await doUpload(file[0]);
-            setStorage(file[0], true);
-          } catch (uploadError) {
-            console.error(`Failed to upload ${file[0]}:`, uploadError);
-          }
-          updateProgress();
+          failures.push({ file, error });
+        } finally {
+          progress.tick();
         }
-        uploadQueue[file[0]] = 'completed';
       }),
     );
+  }
 
-    checkUpload();
+  if (failures.length > 0) {
+    const details = failures
+      .map(({ file, error }) => `${file}: ${error && error.message ? error.message : error}`)
+      .join('\n');
+    const error = new Error(`Failed to upload ${failures.length} asset(s):\n${details}`);
+    error.failures = failures;
+    throw error;
   }
 }
 
-function addToUploadQueue(assets) {
-  if (!obsConfig && !ossConfig) {
-    console.warn('请配置obsConfig 或 ossConfig，否则无法上传文件到obs 或 oss');
+async function addToUploadQueue(assets) {
+  if ((!obsConfig && !ossConfig) || assets.length === 0) {
     return;
   }
 
-  assets.forEach((asset) => {
-    const file = path.resolve(DIST_DIR, asset);
-    if (uploadQueue[file] === undefined) {
-      uploadQueue[file] = false;
-    }
-  });
-  checkUpload();
+  const files = Array.from(new Set(assets.map((asset) => path.resolve(DIST_DIR, asset))));
+  await uploadFiles(files);
 }
 
 module.exports = {
   addToUploadQueue,
+  _internals: {
+    uploadFile,
+    uploadFiles,
+  },
 };

package/build/webpack.config.js

@@ -180,13 +180,13 @@ module.exports = async (options, { analyzer, quiet } = {}) => {
         loader: MiniCssExtractPlugin.loader,
       },
       {
-        loader: 'css-loader',
+        loader: require.resolve('css-loader'),
         options: {
           importLoaders: use.length + 1,
         },
       },
       {
-        loader: 'postcss-loader',
+        loader: require.resolve('postcss-loader'),
         options: {
           postcssOptions: {
             plugins: [
@@ -239,14 +239,16 @@ module.exports = async (options, { analyzer, quiet } = {}) => {
     });
   });
 
-  plugins.push(
-    new CopyPlugin({
-      patterns,
-      options: {
-        concurrency: 100,
-      },
-    }),
-  );
+  if (patterns.length > 0) {
+    plugins.push(
+      new CopyPlugin({
+        patterns,
+        options: {
+          concurrency: 100,
+        },
+      }),
+    );
+  }
 
   return merge(
     {
@@ -275,12 +277,12 @@ module.exports = async (options, { analyzer, quiet } = {}) => {
             test: ASSET_EXT_PATTERN,
             use: [
               {
-                loader: 'url-loader',
+                loader: require.resolve('url-loader'),
                 options: {
                   limit: 0,
                   esModule: false,
                   fallback: {
-                    loader: 'file-loader',
+                    loader: require.resolve('file-loader'),
                     options: {
                       name: `${ASSETS_DIR}/[name].[hash].[ext]`,
                     },
@@ -301,7 +303,7 @@ module.exports = async (options, { analyzer, quiet } = {}) => {
               ...getCssLoader({
                 use: [
                   {
-                    loader: 'less-loader',
+                    loader: require.resolve('less-loader'),
                     options: {
                       lessOptions() {
                         return {
@@ -319,7 +321,7 @@ module.exports = async (options, { analyzer, quiet } = {}) => {
             type: 'javascript/auto',
             use: [
               {
-                loader: 'file-loader',
+                loader: require.resolve('file-loader'),
                 options: {
                   name: assetsName,
                 },
@@ -331,7 +333,7 @@ module.exports = async (options, { analyzer, quiet } = {}) => {
             type: 'javascript/auto',
             use: [
               {
-                loader: 'file-loader',
+                loader: require.resolve('file-loader'),
                 options: {
                   name: assetsName,
                 },
@@ -345,7 +347,7 @@ module.exports = async (options, { analyzer, quiet } = {}) => {
             test: /\.(wxml)$/i,
             use: [
               {
-                loader: 'file-loader',
+                loader: require.resolve('file-loader'),
                 options: {
                   name: assetsName,
                 },

package/index.js

@@ -1,27 +1,14 @@
 #!/usr/bin/env node
 
-// 高版本 Node.js (>=17) 兼容 OpenSSL 3.0
-const nodeMajor = process.versions.node.split('.')[0];
-if (nodeMajor >= 17) {
-  process.env.NODE_OPTIONS = `${process.env.NODE_OPTIONS || ''} --openssl-legacy-provider`.trim();
-}
-
 const { program } = require('commander');
 const path = require('path');
 const fs = require('fs');
-const dev = require('./build/dev');
-const prod = require('./build/prod');
 const { setBuildEnv } = require('./build/utils/buildEnv');
 const { ENV } = require('./build/config/constants');
 
 const { version } = JSON.parse(
   fs.readFileSync(path.resolve(__dirname, './package.json')).toString(),
 );
-const compiler = {
-  dev,
-  prod,
-};
-
 program.version(version);
 program.option('-a, --analyzer', 'webpack-bundle-analyzer');
 program.option('-s, --simulation', 'process.env.BUILD_ENV = simulation');
@@ -29,25 +16,27 @@ program.option('-d, --development', 'process.env.BUILD_ENV = development');
 program.option('-p, --production', 'process.env.BUILD_ENV = production');
 program.option('-q, --quiet', '安静模式，打印减少');
 
-program.command('dev').action(() => {
+program.command('dev').action(async () => {
   setBuildEnv({
     mode: ENV.DEV,
     ...program.opts(),
   });
-  compiler.dev(program.opts()).catch((err) => {
-    console.error(err);
-    process.exitCode = 1;
-  });
+  // 延迟加载构建模块，保证 --help/--version 不依赖业务项目配置。
+  // eslint-disable-next-line global-require
+  const dev = require('./build/dev');
+  await dev(program.opts());
 });
-program.command('build').action(() => {
+program.command('build').action(async () => {
   setBuildEnv({
     mode: ENV.PROD,
     ...program.opts(),
   });
-  compiler.prod(program.opts()).catch((err) => {
-    console.error(err);
-    process.exitCode = 1;
-  });
+  // eslint-disable-next-line global-require
+  const prod = require('./build/prod');
+  await prod(program.opts());
 });
 
-program.parse(process.argv);
+program.parseAsync(process.argv).catch((err) => {
+  console.error(err);
+  process.exitCode = 1;
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hw-weapp-compiler",
-  "version": "1.0.17",
-  "description": "基于 webpack5 的小程序构建工具，兼容 Node.js 14~24",
+  "version": "1.0.18",
+  "description": "基于 webpack5 的小程序构建工具，兼容 Node.js 18~24",
   "main": "index.js",
   "bin": {
     "hw-weapp": "index.js"
@@ -12,7 +12,7 @@
     "registry": "https://registry.npmjs.org"
   },
   "engines": {
-    "node": ">=14.17.1"
+    "node": ">=18"
   },
   "dependencies": {
     "@swc/core": "^1.15.43",
@@ -30,7 +30,7 @@
     "file-loader": "^6.2.0",
     "fs-extra": "^9.1.0",
     "htmlparser2": "^6.0.1",
-    "less": "^4.1.1",
+    "less": "4.6.7",
     "less-loader": "^8.0.0",
     "loader-utils": "^2.0.0",
     "mini-css-extract-plugin": "^1.6.0",
@@ -41,7 +41,7 @@
     "terser-webpack-plugin": "^5.6.1",
     "throttle-debounce": "^3.0.1",
     "url-loader": "^4.1.1",
-    "webpack": "^5.61.0",
+    "webpack": "5.108.4",
     "webpack-bundle-analyzer": "^4.4.0",
     "webpack-merge": "^5.7.3",
     "webpack-sources": "^2.2.0"
@@ -52,6 +52,7 @@
   "scripts": {
     "build": "node ./index.js build",
     "dev": "nodemon --inspect --trace-deprecation --watch build ./index.js dev",
-    "simulation": "node ./index.js build -s"
+    "simulation": "node ./index.js build -s",
+    "test": "node --test"
   }
 }