xhs-mp-compiler-cli 1.0.1-beta.0

package/dist/webpack-config/loaders/ml-loader/ml2vue/transformerUtils/handleSlotAttribute.d.ts

@@ -0,0 +1,2 @@
+declare const handleSlotAttribute: (node: any) => void;
+export default handleSlotAttribute;

package/dist/webpack-config/loaders/ml-loader/ml2vue/transformerUtils/handleSlotAttribute.js

@@ -0,0 +1,74 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const clone_1 = __importDefault(require("clone"));
+const utils_1 = require("./utils");
+const utils_2 = require("../utils");
+/**
+ * 默认不合法
+ * 若祖先节点先出现自定义组件，合法
+ * 若祖先节点先出现 XhsVueTemplate，不合法
+ */
+const isValidSlot = node => {
+    let parent = node.parent;
+    let firstMet = '';
+    while (parent === null || parent === void 0 ? void 0 : parent.name) {
+        const parentTagName = parent.name;
+        if (parentTagName === 'XhsVueTemplate') {
+            firstMet = 'XhsVueTemplate';
+        }
+        else if ((0, utils_2.isCustomComponent)(parentTagName)) {
+            firstMet = 'customElement';
+        }
+        if (firstMet === 'customElement') {
+            return true;
+        }
+        if (firstMet === 'XhsVueTemplate') {
+            return false;
+        }
+        parent = parent.parent;
+    }
+    return false;
+};
+const handleSlotAttribute = (node) => {
+    if (!isValidSlot(node)) {
+        delete node.attribs.slot;
+        return;
+    }
+    const value = node.attribs.slot;
+    const dynamicValue = (0, utils_1.matchMustache)(value);
+    delete node.attribs.slot;
+    let vSlotAttr = `v-slot:${value}`;
+    if (dynamicValue === null || dynamicValue === void 0 ? void 0 : dynamicValue.length) {
+        vSlotAttr = `v-slot:[${(0, utils_1.injectContext2Exp)(value, node, 2)}]`.replace(/\s/g, '');
+    }
+    /**
+     * 若父元素已经是 template 标签，则把 v-slot 转移到父级元素
+     * https://eslint.vuejs.org/rules/valid-v-slot.html
+     */
+    if (node.parent.name === 'template') {
+        node.parent.attribs[vSlotAttr] = '';
+    }
+    else {
+        const attribs = { [vSlotAttr]: '' };
+        const children = node.cloneNode ? node.cloneNode(true) : (0, clone_1.default)(node);
+        (0, utils_1.addContextToNode)({
+            // @ts-ignore
+            nodes: children,
+            loopContext: node.loopContext,
+            underTemplate: node.underTemplate,
+        });
+        node.name = 'template';
+        for (const [key, val] of Object.entries(node.attribs)) {
+            if (/:if|:elif|:else/.test(key)) {
+                attribs[key] = val;
+                delete children.attribs[key];
+            }
+        }
+        node.attribs = attribs;
+        node.children = [children];
+    }
+};
+exports.default = handleSlotAttribute;

package/dist/webpack-config/loaders/ml-loader/ml2vue/transformerUtils/handleSpaceAttribute.d.ts

@@ -0,0 +1,2 @@
+declare const handleSpaceAttribute: (value: string, node: any) => void;
+export default handleSpaceAttribute;

package/dist/webpack-config/loaders/ml-loader/ml2vue/transformerUtils/handleSpaceAttribute.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const validSpaces = ['ensp', 'emsp', 'nbsp'];
+const handleSpaceAttribute = (value, node) => {
+    if (node.name === 'xhs-vue-text' && validSpaces.includes(value)) {
+        node.children.forEach((it) => {
+            if (it.type === 'text')
+                it.data = it.data.replace(/ /g, `&${value};`);
+        });
+    }
+};
+exports.default = handleSpaceAttribute;

package/dist/webpack-config/loaders/ml-loader/ml2vue/transformerUtils/handleStyleAttribute.d.ts

@@ -0,0 +1,2 @@
+declare const handleStyleAttribute: (value: string, node: any) => void;
+export default handleStyleAttribute;

package/dist/webpack-config/loaders/ml-loader/ml2vue/transformerUtils/handleStyleAttribute.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const xhs_mp_compiler_utils_1 = require("xhs-mp-compiler-utils");
+const postcssRpx2Vw_1 = require("../../../../lib/postcssRpx2Vw");
+const utils_1 = require("./utils");
+const handleStyleAttribute = (value, node) => {
+    var _a;
+    if ((_a = (0, utils_1.matchMustache)(value)) === null || _a === void 0 ? void 0 : _a.length) {
+        node.attribs[':style'] = `${xhs_mp_compiler_utils_1.COMPILE_CALL_RUNTIME}('${xhs_mp_compiler_utils_1.CompileCallRuntimeMethodsNames.Rpx2vw}', ${(0, utils_1.injectContext2Exp)(value, node, 1)})`;
+        delete node.attribs.style;
+    }
+    else {
+        node.attribs.style = value.replace(/([\d.]+)rpx/g, (m, $1) => (0, postcssRpx2Vw_1.calcRpx2Vw)($1));
+    }
+};
+exports.default = handleStyleAttribute;

package/dist/webpack-config/loaders/ml-loader/ml2vue/transformerUtils/utils.d.ts

@@ -0,0 +1,10 @@
+declare const matchMustache: (value: string) => never[] | RegExpMatchArray | null;
+export declare function injectModelHandler(isComponent: boolean, property: string, changeEvent?: any): string;
+export declare function addContextToNode({ nodes, loopContext, underTemplate }: {
+    nodes: any;
+    loopContext?: string[];
+    underTemplate?: boolean;
+    useSjs?: boolean;
+}): void;
+declare const injectContext2Exp: (exp: string, node: any, type: number) => string | undefined;
+export { matchMustache, injectContext2Exp };

package/dist/webpack-config/loaders/ml-loader/ml2vue/transformerUtils/utils.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.injectContext2Exp = exports.matchMustache = exports.addContextToNode = exports.injectModelHandler = void 0;
+/* eslint-disable consistent-return */
+const xhs_mp_compiler_utils_1 = require("xhs-mp-compiler-utils");
+const matchMustache = (value) => {
+    if (!value)
+        return [];
+    return `${value}`.match(/{{(.*?)}}/g);
+};
+exports.matchMustache = matchMustache;
+function injectModelHandler(isComponent, property, changeEvent) {
+    return `${xhs_mp_compiler_utils_1.CompileCallRuntimeMethodsNames.RunModuleUpdater}(${isComponent}, ${property}, ${changeEvent !== null && changeEvent !== void 0 ? changeEvent : changeEvent})`;
+}
+exports.injectModelHandler = injectModelHandler;
+function addContextToNode({ nodes, loopContext, underTemplate }) {
+    nodes = Array.isArray(nodes) ? nodes : [nodes];
+    for (const node of nodes) {
+        if (loopContext) {
+            node.loopContext = node.loopContext ? [...new Set([...node.loopContext, ...loopContext])] : [...new Set(loopContext)];
+        }
+        if (underTemplate !== undefined) {
+            node.underTemplate = underTemplate;
+        }
+        if (node.children) {
+            addContextToNode({ nodes: node.children, loopContext, underTemplate });
+        }
+    }
+}
+exports.addContextToNode = addContextToNode;
+const injectContext2Exp = (exp, node, type) => {
+    const { ExecExpWithContext } = xhs_mp_compiler_utils_1.CompileCallRuntimeMethodsNames;
+    let { loopContext = [], underTemplate } = node;
+    // v-for 不添加自己的 loop context
+    if (type === 7) {
+        loopContext = node.parent.loopContext || [];
+    }
+    const loopContextStr = loopContext.join(', ');
+    const templateContextStr = '...data';
+    let context = '{}';
+    if (loopContext.length && underTemplate) {
+        // 对齐微信表现，两者都存在时 loopContext 在后
+        context = `{${templateContextStr}, ${loopContextStr}}, ${underTemplate}`;
+    }
+    else if (loopContext.length && !underTemplate) {
+        context = `{${loopContextStr}}`;
+    }
+    else if (!loopContext.length && underTemplate) {
+        context = `{${templateContextStr}}, ${underTemplate}`;
+    }
+    // 模板字符串包裹的 字符串、表达式 的混合：`foo ${bar} ${visible ? 'show' : 'hide'}`
+    // :class="`${runExp(`text`, {...{}, ...runExp(`{text: 'not', visible: false}`)}, '__class__')}`"
+    if (type === 1) {
+        return `\`${exp.replace(/{{/g, `\${${xhs_mp_compiler_utils_1.COMPILE_CALL_RUNTIME}('${ExecExpWithContext}', \``).replace(/}}/g, `\`, ${context})}`)}\``;
+    }
+    // 没有模板字符串包裹的：v-if="runExp(`exp`, {item})"
+    if (type === 2 || type === 7) {
+        return exp.replace(/{{/g, `${xhs_mp_compiler_utils_1.COMPILE_CALL_RUNTIME}('${ExecExpWithContext}', \``).replace(/}}/g, `\`, ${context})`);
+    }
+    // data-xxx="{{exp}}"
+    // :data-xxx="JSON.stringify(`${$__t('x0', `exp`, {})}`)"
+    if (type === 3) {
+        return `\`${exp.replace(/{{/g, `\${JSON.stringify(${xhs_mp_compiler_utils_1.COMPILE_CALL_RUNTIME}('${ExecExpWithContext}', \``).replace(/}}/g, `\`, ${context}))}`)}\``;
+    }
+    // text 节点：{{text}} visible => {{$__e(`text`, {...{}, ...$__e(`{text: 'not', visible: true, style}`)})}} visible
+    if (type === 4) {
+        return exp.replace(/{{(.*?)}}/g, `{{${xhs_mp_compiler_utils_1.COMPILE_CALL_RUNTIME}('${ExecExpWithContext}', \`$1\`, ${context})}}`);
+    }
+    // data-xxx="abc/{{exp}}"
+    // :data-xxx="JSON.stringify(`abc/${$__t('x0', `exp`, {})}`)"
+    if (type === 5) {
+        return `JSON.stringify(\`${exp.replace(/{{/g, `\${${xhs_mp_compiler_utils_1.COMPILE_CALL_RUNTIME}('${ExecExpWithContext}', \``).replace(/}}/g, `\`, ${context})}`)}\`)`;
+    }
+    // <template is="xxx" data="{{...item}}" />
+    // <template is="xxx" :data="$__t('x0', `{...item}`, {context}})" />
+    if (type === 6) {
+        return exp.replace(/{{(.*?)}}/g, `${xhs_mp_compiler_utils_1.COMPILE_CALL_RUNTIME}('${ExecExpWithContext}', \`{$1}\`, ${context})`);
+    }
+};
+exports.injectContext2Exp = injectContext2Exp;

package/dist/webpack-config/loaders/ml-loader/ml2vue/utils.d.ts

@@ -0,0 +1,7 @@
+declare const isTemplateDefineNode: (node: any) => any;
+declare const isImportNode: (node: any) => any;
+declare const sortNodes: (nodes: any) => any;
+declare const formatPathToVar: (pathStr: string) => string;
+declare const notifyImport: (type: any) => void;
+declare const isCustomComponent: (tagName: string) => boolean;
+export { isTemplateDefineNode, isImportNode, sortNodes, formatPathToVar, notifyImport, isCustomComponent };

package/dist/webpack-config/loaders/ml-loader/ml2vue/utils.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isCustomComponent = exports.notifyImport = exports.formatPathToVar = exports.sortNodes = exports.isImportNode = exports.isTemplateDefineNode = void 0;
+const tagTransformMap_1 = __importDefault(require("../../../lib/tagTransformMap"));
+const common_1 = require("../../../../utils/common");
+const knownTags = Object.values(tagTransformMap_1.default);
+const isTemplateDefineNode = node => node.name === 'template' && node.attribs.name;
+exports.isTemplateDefineNode = isTemplateDefineNode;
+const isSjsTag = node => ['sjs', 'wxs'].includes(node.name) && node.attribs.name;
+const isImportNode = node => node.name === 'import' && node.attribs.src;
+exports.isImportNode = isImportNode;
+// 将 template name sjs 标签提升
+const sortNodes = nodes => nodes.sort(node => (isTemplateDefineNode(node) || isSjsTag(node) ? -1 : 1));
+exports.sortNodes = sortNodes;
+const pathToVarCache = {};
+// 将路径转换为变量
+const formatPathToVar = (pathStr) => {
+    if (!pathToVarCache[pathStr]) {
+        pathToVarCache[pathStr] = `C${(0, common_1.md5)(pathStr)}`;
+    }
+    return pathToVarCache[pathStr];
+};
+exports.formatPathToVar = formatPathToVar;
+let importNotified = false;
+const notifyImport = type => {
+    if (!importNotified) {
+        // process.send?.(
+        //   JSON.stringify({
+        //     message: `检测到代码中使用了 ${type} 标签，基础库从 3.16.4 开始支持，发布小程序时请务必设置最低支持的基础库版本`,
+        //     method: 'cliNotify',
+        //   }),
+        // )
+    }
+    importNotified = true;
+};
+exports.notifyImport = notifyImport;
+const isCustomComponent = (tagName) => !knownTags.includes(tagName);
+exports.isCustomComponent = isCustomComponent;

package/dist/webpack-config/loaders/render-entry-loader.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/webpack-config/loaders/render-entry-loader.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs_extra_1 = require("fs-extra");
+const utils_1 = require("./utils");
+const getMlSuffixName_1 = __importDefault(require("../../utils/getMlSuffixName"));
+const depenedHelper_1 = require("../../utils/depenedHelper");
+const common_1 = require("../../utils/common");
+// @ts-ignore
+function entryLoader() {
+    const { miniprogramDir, appJSON, jsonDependencies } = this._compiler.xhsData;
+    const { mode, path } = this.getOptions();
+    for (const file of jsonDependencies) {
+        this.addDependency(file);
+    }
+    const appCssPath = (0, common_1.unixResolve)(miniprogramDir, 'app.css');
+    const appCssExist = (0, fs_extra_1.existsSync)(appCssPath);
+    const absolutePath = (0, common_1.unixResolve)(miniprogramDir, `${path}.${(0, getMlSuffixName_1.default)()}`);
+    const subPackage = (appJSON.subPackages || []).find(subPack => !!subPack.pages.find(page => page.path === path));
+    const enableLazyCodeLoading = mode === 'v2';
+    // 资源文件
+    const resources = (0, utils_1.getResourceUris)({ appCssExist, subPackage, enableLazyCodeLoading });
+    // 开启了按需注入，注入依赖组件
+    if (enableLazyCodeLoading) {
+        const isIndependent = (subPackage === null || subPackage === void 0 ? void 0 : subPackage.independent) || false;
+        const enableSubPackage = (0, depenedHelper_1.shouldEnableSubPackage)(appJSON);
+        const dependsTree = (0, depenedHelper_1.getPageDependComponentPaths)(path, appJSON, isIndependent, enableSubPackage);
+        const subPackagesPrefix = (appJSON.subPackages || []).map(sub => sub.root);
+        const depends = [];
+        for (let i = 0; i < dependsTree.length; i++) {
+            let uri = dependsTree[i];
+            const subRoot = subPackagesPrefix.find(subRoot => uri.startsWith(`${subRoot}/`));
+            if (subRoot) {
+                uri = `${subRoot}/${uri}`;
+            }
+            depends.push(uri);
+        }
+        return `
+      import Component from '${absolutePath}';
+      globalThis.__render.mount(Component, '${path}', ${JSON.stringify(resources)}, ${JSON.stringify(depends)})
+    `;
+    }
+    return `
+    import Component from '${absolutePath}';
+    globalThis.__render.mount(Component, '${path}', ${JSON.stringify(resources)})
+  `;
+}
+module.exports = entryLoader;

package/dist/webpack-config/loaders/service-entry-loader.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/webpack-config/loaders/service-entry-loader.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// @ts-nocheck
+const fs_extra_1 = require("fs-extra");
+const common_1 = require("../../utils/common");
+function entryLoader() {
+    var _a, _b;
+    const { appJSON, miniprogramDir, jsonDependencies } = this._compiler.xhsData;
+    const { pkg, root } = this.getOptions();
+    const entries = [];
+    for (const file of jsonDependencies) {
+        this.addDependency(file);
+    }
+    const addAppJs = () => {
+        if ((0, fs_extra_1.existsSync)(`${miniprogramDir}/app.js`) || (0, fs_extra_1.existsSync)(`${miniprogramDir}/app.ts`)) {
+            entries.unshift(`'app': require('${(0, common_1.toUnixPath)(`${miniprogramDir}/app`)}')`);
+        }
+    };
+    const addServiceJS = (shortPath) => {
+        const assetName = (0, common_1.toUnixPath)(shortPath);
+        const requirePath = (0, common_1.unixJoin)(miniprogramDir, shortPath);
+        entries.push(`'${assetName}': () => require('${requirePath}')`);
+    };
+    const components = Object.keys(appJSON.componentsMap);
+    if (pkg === 'main') {
+        // 主包 app.js
+        addAppJs();
+        // 主包页面逻辑层
+        appJSON.pages.forEach(page => addServiceJS(page.path));
+        // 主包组件逻辑层
+        const subPackageRoots = appJSON.subPackages.map(pkg => pkg.root);
+        components
+            .filter(compPath => subPackageRoots.every(subRoot => !compPath.startsWith(`${subRoot}/`)))
+            .forEach(compPath => addServiceJS(compPath));
+    }
+    if (pkg === 'sub') {
+        // 分包页面逻辑层
+        (_b = (_a = appJSON.subPackages
+            .find(pkg => pkg.root === root)) === null || _a === void 0 ? void 0 : _a.pages) === null || _b === void 0 ? void 0 : _b.forEach(page => addServiceJS(page.path));
+        // 分包组件逻辑层
+        components
+            .filter(compPath => compPath.startsWith(`${root}/`))
+            .forEach(compPath => addServiceJS(compPath));
+    }
+    return `;globalThis['__MP_APP_JSON__'] = ${JSON.stringify(appJSON)};
+
+  export default {
+    ${entries.join(',\n  ')}
+  }`;
+}
+module.exports = entryLoader;

package/dist/webpack-config/loaders/sjs-loader/frame.d.ts

@@ -0,0 +1 @@
+export declare function generateCodeFrame(source: any, start?: number, end?: any): any;

package/dist/webpack-config/loaders/sjs-loader/frame.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateCodeFrame = void 0;
+const range = 1;
+function generateCodeFrame(source, start = 0, end = source.length) {
+    const lines = source.split(/\r?\n/);
+    let count = 0;
+    const res = [];
+    for (let i = 0; i < lines.length; i++) {
+        count += lines[i].length + 1;
+        if (count >= start) {
+            for (let j = i - range; j <= i + range || end > count; j++) {
+                if (j < 0 || j >= lines.length)
+                    continue;
+                // eslint-disable-line
+                res.push(`${j + 1}${repeat(` `, 3 - String(j + 1).length)}|  ${lines[j]}`); // eslint-disable-line
+                const lineLength = lines[j].length;
+                if (j === i) {
+                    // push underline
+                    const pad = start - (count - lineLength);
+                    // eslint-disable-line
+                    res.push(`   ` + repeat(` `, pad) + `^`); // eslint-disable-line
+                }
+                else if (j > i) {
+                    if (end > count) {
+                        const length = Math.min(end - count, lineLength);
+                        res.push(`|` + repeat(`^`, length)); // eslint-disable-line
+                    }
+                    count += lineLength + 1;
+                }
+            }
+            break;
+        }
+    }
+    return res.join("\n");
+}
+exports.generateCodeFrame = generateCodeFrame;
+function repeat(str, n) {
+    let result = '';
+    if (n > 0) {
+        while (true) { // eslint-disable-line
+            if (n & 1)
+                result += str; // eslint-disable-line
+            n >>>= 1; // eslint-disable-line
+            if (n <= 0)
+                break;
+            str += str;
+        }
+    }
+    return result;
+}

package/dist/webpack-config/loaders/sjs-loader/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/webpack-config/loaders/sjs-loader/index.js

@@ -0,0 +1,93 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const path_1 = require("path");
+const babel = __importStar(require("@babel/core"));
+const frame_1 = require("./frame");
+const getMlSuffixName_1 = __importDefault(require("../../../utils/getMlSuffixName"));
+const common_1 = require("../../../utils/common");
+const unexpectedIdentifier = ['Date', 'RegExp'];
+const transform = (source, visitor) => babel.transform(source, {
+    babelrc: false,
+    configFile: false,
+    presets: [require.resolve('@babel/preset-env'), require.resolve('babel-preset-minify')],
+    plugins: [
+        ({ types: t }) => ({
+            name: 'sjs transform',
+            visitor: visitor(t),
+        }),
+    ],
+});
+function sjsLoader(source, sjsPath, miniprogramDir, onRequire) {
+    var _a;
+    const compilation = this;
+    return (_a = transform(source, types => ({
+        NewExpression(path) {
+            path.traverse({
+                Identifier(id) {
+                    if (unexpectedIdentifier.includes(id.node.name)) {
+                        const codeFrame = (0, frame_1.generateCodeFrame)(source, id.node.start, id.node.end);
+                        // eslint-disable-next-line no-console
+                        const error = new Error(`[ ${(0, getMlSuffixName_1.default)()} 文件编译错误 ] at '${sjsPath.replace(`${miniprogramDir}/`, '')}'\n` +
+                            `Unexpected identifier '${id.node.name}'\n` +
+                            `${codeFrame}`);
+                        // _this.emitError(error)
+                        compilation.errors.push(error);
+                    }
+                },
+            });
+        },
+        DebuggerStatement(path) {
+            const codeFrame = (0, frame_1.generateCodeFrame)(source, path.node.start, path.node.end);
+            const error = new Error(`[ ${(0, getMlSuffixName_1.default)()} 文件编译错误 ] at '${sjsPath.replace(`${miniprogramDir}/`, '')}'\n` +
+                `Unexpected identifier 'debugger'\n` +
+                `${codeFrame}`);
+            compilation.errors.push(error);
+        },
+        MemberExpression(path) {
+            const property = path.node.property;
+            const isCtorVisitor = property.name === 'constructor' || property.value === 'constructor';
+            if (isCtorVisitor &&
+                !(types.isMemberExpression(path.parent) && path.parentKey === 'object')) {
+                path.replaceWith(types.logicalExpression('||', types.memberExpression(path.node, types.identifier('name')), path.node));
+                path.skip();
+            }
+        },
+        CallExpression(path) {
+            if (path.node.callee.name === 'require') {
+                let p = (0, common_1.unixResolve)((0, path_1.dirname)(sjsPath), path.node.arguments[0].value);
+                if (onRequire && typeof onRequire === 'function') {
+                    onRequire(p);
+                }
+                p = p.replace(`${miniprogramDir}/`, '');
+                path.node.arguments[0] = types.stringLiteral(p);
+            }
+        },
+    }))) === null || _a === void 0 ? void 0 : _a.code;
+}
+module.exports = sjsLoader;

package/dist/webpack-config/loaders/utils.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 根据是否分包获取资源路径
+ */
+export declare const getResourceUris: (options: {
+    appCssExist: boolean;
+    enableLazyCodeLoading: boolean;
+    subPackage: any;
+}) => string[];
+/**
+ * @NOTE
+ *  Create a request and handle the conversion of esModule modules
+ * */
+export declare function createRequire(modulePath: string): string;

package/dist/webpack-config/loaders/utils.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createRequire = exports.getResourceUris = void 0;
+/**
+ * 根据是否分包获取资源路径
+ */
+const getResourceUris = (options) => {
+    const resourceList = [];
+    const { appCssExist, enableLazyCodeLoading, subPackage } = options;
+    // sjs 无法识别是否引用 所以一律push
+    // 加载顺序 app.css  主包sjs  分包sjs  主包components.js  分包components.js 
+    if (!subPackage) {
+        // 主包
+        appCssExist && resourceList.push(`app.css`);
+        resourceList.push('sjs.js');
+        !enableLazyCodeLoading && resourceList.push(`components.js`);
+    }
+    else if (subPackage === null || subPackage === void 0 ? void 0 : subPackage.independent) {
+        // 独立分包, 自己的components.js
+        resourceList.push(`${subPackage === null || subPackage === void 0 ? void 0 : subPackage.root}/sjs.js`);
+        !enableLazyCodeLoading && resourceList.push(`${subPackage === null || subPackage === void 0 ? void 0 : subPackage.root}/components.js`);
+    }
+    else if (subPackage) {
+        // 普通分包, 自己的components.js，主包components.js app.css
+        appCssExist && resourceList.push(`app.css`);
+        resourceList.push('sjs.js');
+        resourceList.push(`${subPackage === null || subPackage === void 0 ? void 0 : subPackage.root}/sjs.js`);
+        !enableLazyCodeLoading && resourceList.push(`components.js`);
+        !enableLazyCodeLoading && resourceList.push(`${subPackage === null || subPackage === void 0 ? void 0 : subPackage.root}/components.js`);
+    }
+    return resourceList;
+};
+exports.getResourceUris = getResourceUris;
+/**
+ * @NOTE
+ *  Create a request and handle the conversion of esModule modules
+ * */
+function createRequire(modulePath) {
+    return `function() { var obj = require('${modulePath}'); return obj && obj.__esModule ? obj.default : obj; }`;
+}
+exports.createRequire = createRequire;

package/dist/webpack-config/loaders/wxss-loader.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/webpack-config/loaders/wxss-loader.js

@@ -0,0 +1,76 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const postcss_1 = __importDefault(require("postcss"));
+const postcss_import_1 = __importDefault(require("postcss-import"));
+const postcss_prefix_selector_1 = __importDefault(require("postcss-prefix-selector"));
+const CssSyntaxError_1 = __importDefault(require("css-loader/dist/CssSyntaxError"));
+const tagTransformMap_1 = __importDefault(require("../lib/tagTransformMap"));
+const getCssSuffixName_1 = __importDefault(require("../../utils/getCssSuffixName"));
+const common_1 = require("../../utils/common");
+const tags = Object.keys(tagTransformMap_1.default).join('|');
+const labelStr = `(^|\\s)(${tags}|page|audio|live-player|map|cover-view|cover-image|video)`;
+const labelReg = new RegExp(labelStr, 'g');
+function wxssLoader(source) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a, _b, _c, _d, _e;
+        const done = this.async();
+        this._compiler.xhsData = this._compiler.xhsData || {};
+        const { appJSON = {}, miniprogramDir = '' } = this._compiler.xhsData;
+        const shortPath = (0, common_1.getShortPath)(miniprogramDir, this.resourcePath).replace(new RegExp(`\\.${(0, getCssSuffixName_1.default)()}$`), '');
+        const index = (_c = (_b = (_a = appJSON === null || appJSON === void 0 ? void 0 : appJSON.componentsMap) === null || _a === void 0 ? void 0 : _a[shortPath]) === null || _b === void 0 ? void 0 : _b.index) !== null && _c !== void 0 ? _c : null;
+        const styleIsolation = (_e = (_d = appJSON === null || appJSON === void 0 ? void 0 : appJSON.componentsMap) === null || _d === void 0 ? void 0 : _d[shortPath]) === null || _e === void 0 ? void 0 : _e.styleIsolation;
+        const selectorIndex = styleIsolation === 'shared' ? 0 : index || 0;
+        // js / json 的配置会影响样式
+        const extReg = new RegExp(`${(0, getCssSuffixName_1.default)()}$`);
+        this.addDependency(this.resourcePath.replace(extReg, 'js'));
+        this.addDependency(this.resourcePath.replace(extReg, 'json'));
+        (0, postcss_1.default)()
+            .use((0, postcss_import_1.default)({ root: miniprogramDir }))
+            .use((0, postcss_prefix_selector_1.default)({
+            prefix: 'xhs',
+            transform(prefix, selector) {
+                // 支持 host 选择器 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
+                if (selector === ':host') {
+                    return `[is="${shortPath}"]`;
+                }
+                /**
+                 * 替换所有类选择器，用于做样式隔离 wiki: https://wiki.xiaohongshu.com/pages/viewpage.action?pageId=181017177
+                 * .app -> .xhs_0_app
+                 */
+                selector = selector.replace(/\.(\w)/g, `.xhs_${selectorIndex}_$1`);
+                // 为内置组件加上 xhs 前缀
+                if (selector.match(labelReg)) {
+                    selector = selector.replace(labelReg, `$1${prefix}-$2`);
+                }
+                return selector;
+            },
+        }))
+            .process(source, {
+            from: this.resourcePath,
+        })
+            .then(result => {
+            result.messages.forEach(({ file, type }) => {
+                if (type === 'dependency') {
+                    this.addDependency(file);
+                }
+            });
+            done(null, result.css);
+        })
+            .catch(error => {
+            done(error.name === 'CssSyntaxError' ? new CssSyntaxError_1.default(error) : error);
+        });
+    });
+}
+module.exports = wxssLoader;