hw-weapp-compiler 1.0.0

package/README.md

@@ -0,0 +1,76 @@
+# weapp-compiler
+
+
+## 版本改动
+
+1. **OpenSSL 3.0 兼容**: Node.js >= 17 时自动注入 `--openssl-legacy-provider`
+2. **wxml-loader 空值守卫**: `loadModule` 失败时不再崩溃
+
+## 安装
+
+```bash
+npm i weapp-compiler@2.x -D
+```
+
+## 使用
+
+```bash
+# 开发调试
+npm run dev           # 测试环境
+npm run dev -s        # 预发环境
+npm run dev -p        # 生产环境
+
+# 生产发布
+npm run build -d      # 测试环境
+npm run build -s      # 预发环境
+npm run build         # 生产环境
+```
+
+## 配置
+
+项目根目录下创建 `.weapp.js`：
+
+```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',
+  },
+};
+```
+
+在 `project.config.json` 中忽略构建产物：
+
+```json
+"packOptions": {
+  "ignore": [
+    { "type": "folder", "value": "assets" },
+    { "type": "regexp", "value": "\\.map$" }
+  ]
+}
+```

package/build/config/env.js

@@ -0,0 +1,7 @@
+const ENV = {
+  DEV: 'development',
+  PROD: 'production',
+  SIMULATION: 'simulation',
+  UNKOWN: 'unkown',
+};
+module.exports = ENV;

package/build/config/getAppConfig.js

@@ -0,0 +1,11 @@
+const path = require('path');
+const fse = require('fs-extra');
+const getContext = require('./getContext');
+
+const appConfig = fse.readJSONSync(path.resolve(getContext(), 'app.json'));
+
+function getAppConfig() {
+  return appConfig;
+}
+
+module.exports = getAppConfig;

package/build/config/getAssets.js

@@ -0,0 +1 @@
+module.exports = () => 'assets';

package/build/config/getConfig.js

@@ -0,0 +1,73 @@
+const chalk = require('chalk');
+const fse = require('fs-extra');
+const path = require('path');
+
+const weapp = path.resolve(process.cwd(), '.weapp.js');
+
+let config = {};
+
+if (fse.existsSync(weapp)) {
+  // eslint-disable-next-line
+  config = require(weapp);
+} else {
+  throw Error(
+    chalk.green(`
+请在项目根目录新建 .weapp.js 配置文件
+
+内容如下：
+
+const path = require('path');
+
+module.exports = {
+// 路径别名
+alias: {
+  '@utils': path.resolve(__dirname, 'src/utils'),
+  '@config': path.resolve(__dirname, 'src/config'),
+  '@template': path.resolve(__dirname, 'src/template'),
+  '@images': path.resolve(__dirname, 'src/images'),
+  '@obsimage': path.resolve(__dirname, 'src/wxs_fila/images'),
+  '@obs': path.resolve(__dirname, 'src/wxs_fila'),
+  '@obsjson': path.resolve(__dirname, 'src/wxs_fila/json'),
+},
+// 资源公共路径
+publicPath: 'https://img.test.com/weapp-compiler-test/',
+// 要同步的目录
+copyFiles: [{
+  from: 'images',
+  to: 'images',
+}],
+// 华为OBS配置
+obsConfig: {
+  access_key_id: 'XXXXXXXX',
+  secret_access_key: 'XXXXXXXX',
+  server: 'XXXXXXXX',
+  bucket: 'XXXXXXXX',
+  dir: 'weapp-compiler-test',
+},
+// 阿里OSS配置
+ossConfig: {
+  region: '<Your region>',
+  accessKeyId: '<Your AccessKeyId>',
+  accessKeySecret: '<Your AccessKeySecret>',
+  bucket: '<Your Bucket>',
+  dir: 'weapp-compiler-test',
+},
+};
+`),
+  );
+}
+const alias = {
+  ...(config.alias || {}),
+};
+Object.keys(config.alias || {}).forEach((key) => {
+  alias[`alias(${key})`] = alias[key];
+});
+
+function getConfig() {
+  return {
+    ...config,
+    alias,
+  };
+}
+
+module.exports = getConfig;

package/build/config/getContext.js

@@ -0,0 +1,5 @@
+const path = require('path');
+
+const context = path.resolve(process.cwd(), 'src');
+
+module.exports = () => context;

package/build/config/getEntrys.js

@@ -0,0 +1,90 @@
+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 appConfig = getAppConfig();
+
+const entrys = {
+  app: path.resolve(context, '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 (fse.existsSync(`${path.resolve(parent, filePath)}.js`)) {
+        filePath = path.resolve(parent, filePath);
+      } else {
+        try {
+          filePath = require.resolve(filePath);
+          filePath = filePath.replace(/(\.js)$/g, '');
+        } catch (error) {
+          console.error(error);
+          return;
+        }
+      }
+
+      if (fse.existsSync(`${filePath}.json`)) {
+        // eslint-disable-next-line
+        readUsingComponents(`${filePath}.json`);
+      }
+
+      let entryKey = filePath;
+
+      if (/\/node_modules\//g.test(filePath) || /\\node_modules\\/g.test(filePath)) {
+        // eslint-disable-next-line
+        entryKey = compatiblePath(filePath).split('/node_modules/')[1];
+
+        addNodeModulesUsingComponent(entryKey);
+      } else {
+        entryKey = path.relative(context, filePath);
+      }
+
+      entryKey = compatiblePath(entryKey);
+
+      entrys[entryKey] = filePath;
+    }
+  });
+};
+const readUsingComponents = (file) => {
+  const json = fse.readJSONSync(file);
+
+  if (json.usingComponents) {
+    addUsingComponents(json.usingComponents, path.parse(file).dir);
+  }
+};
+
+// pages
+(appConfig.pages || []).forEach((page) => {
+  entrys[page] = path.resolve(context, 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');
+}
+
+// subpackages
+(appConfig.subpackages || []).forEach((pkg) => {
+  (pkg.pages || []).forEach((page) => {
+    entrys[compatiblePath(path.join(pkg.root, page))] = path.resolve(context, pkg.root, page);
+  });
+});
+
+// usingComponents
+traverseDir(context).forEach((item) => {
+  if (/(\.json)$/g.test(item)) {
+    readUsingComponents(item);
+  }
+});
+
+module.exports = () => entrys;

package/build/config/getEnv.js

@@ -0,0 +1,5 @@
+module.exports = () => ({
+  DEV: 'development',
+  PROD: 'production',
+  SIMULATION: 'simulation',
+});

package/build/config/getOutput.js

@@ -0,0 +1,7 @@
+const path = require('path');
+
+function getOutput() {
+  return path.resolve(process.cwd(), 'dist');
+}
+
+module.exports = getOutput;

package/build/config/getResourceAccept.js

@@ -0,0 +1 @@
+module.exports = () => /\.(png|jpg|gif|jpeg|svg|ttf|woff|eot|woff2|otf|mp3|mp4|wav|json|html)$/i;

package/build/dev.js

@@ -0,0 +1,34 @@
+const chalk = require('chalk');
+const webpack = require('webpack');
+const ENV = require('./config/env');
+const webpackConfig = require('./webpack.config');
+
+module.exports = (opts) => {
+  const compiler = webpack(
+    webpackConfig(
+      {
+        mode: ENV.DEV,
+        devtool: 'cheap-module-source-map',
+      },
+      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`));
+  });
+};

package/build/loader/js-loader.js

@@ -0,0 +1,37 @@
+const path = require('path');
+const fse = require('fs-extra');
+const getEntrys = require('../config/getEntrys');
+const loadModule = require('../utils/loadModule');
+
+const entrys = getEntrys();
+
+module.exports = async function loader(source) {
+  this.cacheable(true);
+  const callback = this.async();
+  const filePath = this.resourcePath;
+  const fileInfo = path.parse(filePath);
+  const sourceStr = source.toString();
+
+  const imports = [sourceStr];
+
+  if (Object.values(entrys).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)) {
+        if (['.less', '.wxss', '.css'].indexOf(ext) !== -1) {
+          imports.unshift(`import './${fileInfo.name}${ext}'\n`);
+        } else {
+          await loadModule.call(this, otherFilePath);
+        }
+      }
+    }
+  }
+
+  callback(null, imports.join(''));
+};
+
+module.exports.raw = true;

package/build/loader/wxml-loader.js

@@ -0,0 +1,44 @@
+const getWxmlAssets = require('../utils/getWxmlAssets');
+const loadModule = require('../utils/loadModule');
+
+module.exports = async function loader(source) {
+  this.cacheable(true);
+  const callback = this.async();
+  const filePath = this.resourcePath;
+  let content = source.toString();
+  const {
+    _compiler: {
+      options: {
+        output: { publicPath },
+      },
+    },
+  } = this;
+  const withPublicPath = (str) => {
+    if (!str) return '';
+    const match = str.match(/"(.*)"/g);
+    if (!match) return str;
+    return `${publicPath === 'auto' ? '' : publicPath}${match[0].replace(/"/g, '')}`;
+  };
+
+  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));
+    }
+  }
+
+  // wxml文件
+  for (let index = 0; index < wxmls.length; index += 1) {
+    const [, file] = wxmls[index];
+
+    await loadModule.call(this, file);
+  }
+
+  callback(null, content);
+};
+module.exports.raw = true;

package/build/loader/wxs-loader.js

@@ -0,0 +1,25 @@
+const path = require('path');
+const loadModule = require('../utils/loadModule');
+
+module.exports = async function loader(source) {
+  this.cacheable(true);
+  const callback = this.async();
+  const filePath = this.resourcePath;
+  const content = source.toString();
+  const fileInfo = path.parse(filePath);
+
+  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);
+  }
+
+  callback(null, content);
+};
+module.exports.raw = true;

package/build/plugin/index.js

@@ -0,0 +1,231 @@
+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 assetsDir = getAssets();
+const pluginName = 'WeappCompilerPlugin';
+const contentCache = {};
+
+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, () => {
+      addToUploadQueue([...obsAssets]);
+      obsAssets = [];
+    });
+
+    compiler.hooks.compilation.tap(pluginName, (compilation) => {
+      compilation.hooks.afterProcessAssets.tap(
+        {
+          name: pluginName,
+        },
+        (assets) => {
+          obsAssets = obsAssets.concat(
+            Object.keys(assets).filter((key) => {
+              return getResourceAccept().test(key) && new RegExp(`${assetsDir}/`, 'g').test(key);
+            }),
+          );
+        },
+      );
+
+      compilation.hooks.processAssets.tap(
+        {
+          name: pluginName,
+          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];
+
+            const assetName = compatiblePath(asset.name);
+            const isJs = /(\.(js))$/g.test(assetName);
+            const { source } = asset;
+            let content = source.source();
+
+            if (content.toString) {
+              content = content.toString();
+            }
+
+            // 注入全局引用模块
+            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 (!/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));
+          }
+        },
+      );
+    });
+  }
+}
+
+module.exports = WeappPlugin;