feat(build): hideTabBar时 屏幕高度 & 单端文件打包优化，去掉非本端文件

packages/mars-build/src/compiler/script/babel-plugin-script-post.js

@@ -0,0 +1,41 @@
+/**
+ * @file build
+ * @author zhangjingyuan02
+ */
+
+/* eslint-disable fecs-camelcase */
+/* eslint-disable babel/new-cap */
+module.exports = function getVisitor(options = {}) {
+    return ({types: t}) => {
+        const {
+            componentsInUsed
+        } = options;
+        return {
+            visitor: {
+                ImportDeclaration(path, state) {
+                    const sourcePath = path.node.source;
+                    if (sourcePath) {
+                        Object.keys(componentsInUsed).forEach(comp => {
+                            componentsInUsed[comp].declaration === sourcePath.value
+                            && !componentsInUsed[comp].using
+                            && path.remove();
+                        });
+                    }
+                },
+                ObjectProperty(path, state) {
+                    if (path.node.key.name !== 'components') {
+                        return;
+                    }
+                    path.traverse({
+                        ObjectProperty(path, state) {
+                            if (!componentsInUsed[path.node.key.name].using) {
+                                path.remove();
+                            }
+                        }
+
+                    });
+                }
+            }
+        };
+    };
+};

packages/mars-build/src/compiler/script/script.js

@@ -12,6 +12,7 @@ const {transformSync} = require('@babel/core');
 
 const {getModuleName} = require('../../helper/path');
 const transformPlugin = require('./babel-plugin-script');
+const postTransformPlugin = require('./babel-plugin-script-post');
 const compileModules = require('../file/compileModules');
 const modules = compileModules.modules;
 
@@ -52,7 +53,6 @@ async function compile(source, options) {
     });
     // 处理完再进行minify，发现minify和定制的插件会有坑
     let code = scriptRet.code;
-
     let usedModules = {};
     const minifyScriptRet = transformSync(code, {
         plugins: [
@@ -107,6 +107,25 @@ async function compile(source, options) {
     return {code, config, components, computedKeys, moduleType};
 }
 
+/**
+ * postcompile script
+ *
+ * @param {string} source source
+ * @param {mars.options} options options
+ * @return {mars.script.compileScriptResult}
+ */
+async function postCompile(source, options) {
+    const {componentsInUsed} = options;
+    const scriptRet = transformSync(source, {
+        plugins: [
+            postTransformPlugin({
+                componentsInUsed
+            })
+        ]
+    });
+    return {code: scriptRet.code};
+}
+
 function resolveComponentsPath(components, resolvedPaths) {
     Object.keys(components).forEach(key => {
         const name = components[key];
@@ -133,6 +152,7 @@ function getUIModules(components, target) {
 
 module.exports = {
     compile,
+    postCompile,
     getUIModules,
     resolveComponentsPath
 };

packages/mars-build/src/compiler/sfc/compiler.js

@@ -9,21 +9,29 @@ const {getFileCompilers} = require('../file/base');
 exports.compile = async function compile(file, options) {
     const {template, script, styles, config: configFile} = file;
     const {compilers, isApp, fPath, target, coreRelativePath, baseName} = options;
-    const {templateCompiler, scriptCompiler, styleCompiler, configCompiler} = getFileCompilers(compilers, options);
-
+    const {
+        templateCompiler,
+        scriptCompiler,
+        scriptPostCompiler,
+        styleCompiler,
+        configCompiler
+    } = getFileCompilers(compilers, options);
     const {components, config, computedKeys, moduleType} = await scriptCompiler(script, {
         isApp,
         coreRelativePath,
         target,
         renderStr: !isApp ? renderFunctionName : null,
         dest: options._config.dest
     });
-
     // app.vue has no template
     if (!isApp) {
-        const {render} = await templateCompiler(template, {
+        const {render, componentsInUsed} = await templateCompiler(template, {
             components,
-            computedKeys
+            computedKeys,
+            target
+        });
+        await scriptPostCompiler(script, {
+            componentsInUsed
         });
         script.appendContent(
             `;\nfunction ${renderFunctionName}() {return ${render + '.render.bind(this)()'};\n}`

packages/mars-build/src/compiler/template/index.js

@@ -11,14 +11,14 @@
 
 exports.getCompiler = function getCompiler(marker, transformer, generater, target) {
     return function compiler(source, options) {
-        let {ast, render} = marker(source, options);
+        let {ast, render, componentsInUsed} = marker(source, options);
         let {ast: myAst} = transformer(ast, options);
         options = Object.assign(options, {
             target
         });
         let code = generater(myAst, options);
 
-        return {render, code};
+        return {render, code, componentsInUsed};
     };
 };
 

packages/mars-build/src/compiler/template/mark-component.js

@@ -9,6 +9,7 @@
 
 const {compile: compileTemplate} = require('vue-template-compiler/build');
 const transpile = require('vue-template-es2015-compiler');
+const customTemplate = 'template-mars';
 
 function getIterator(node) {
     if (!node) {
@@ -30,14 +31,50 @@ function isInFor(el) {
     return isInFor(el.parent);
 }
 
-function getMarkNode(options) {
-    let {components} = options;
+// 判断租先节点是否含有 template-mars target非当前环境，如果含有，则收集ast tag
+function checkExtraEnvComponent(ast, target) {
+    let parent = ast.parent;
+    if (parent) {
+        if (parent.tag === customTemplate && parent.attrsMap && parent.attrsMap.target !== target) {
+            return true;
+        }
+        else {
+            return checkExtraEnvComponent(parent);
+        }
+    }
+    return false;
+}
+
+// 找出在在当前环境中使用的组件
+function findUsefulComponent(ast, components, target, componentsInUsed) {
+    const tag = ast.tag;
+    const children = ast.children;
+    if (components[tag]) {
+        componentsInUsed[tag].using = true;
+    }
+    if (children) {
+        children.forEach(child => {
+            if (child.tag === customTemplate && child.attrsMap.target !== target) {
+                return;
+            }
+            else {
+                findUsefulComponent(child, components, target, componentsInUsed);
+            }
+        });
+    }
+}
+
+function getMarkNode(options, componentsInUsed = {}) {
+    let {components, target} = options;
     let compIdCounter = 0;
     return function markNode(el, options) {
-
         const tag = el.tag;
         const isComp = components && components[tag];
         el.isComp = isComp;
+        // 找出 template-mars 其他target下的组件，进行标记
+        if (checkExtraEnvComponent(el, target || process.env.MARS_ENV_TARGET) && components[tag]) {
+            componentsInUsed[tag].using = false;
+        }
 
         if (el.attrsMap['v-for'] && !el.iterator1) {
             el.iterator1 = 'index';
@@ -156,6 +193,21 @@ function getPostTrans(options) {
 }
 
 module.exports = function mark(source, options) {
+    const {
+        components,
+        target
+    } = options;
+
+    let componentsInUsed = {};
+    Object.keys(components).forEach(name => {
+        if (!componentsInUsed[name]) {
+            componentsInUsed[name] = {
+                using: false,
+                declaration: components[name]
+            };
+        }
+    });
+
     const {
         ast,
         render,
@@ -165,17 +217,17 @@ module.exports = function mark(source, options) {
         preserveWhitespace: false,
         modules: [
             {
-                transformNode: getMarkNode(options),
+                transformNode: getMarkNode(options, componentsInUsed),
                 postTransformNode: getPostTrans(options),
                 genData: getGenData(options)
             }
         ]
     });
-
+    findUsefulComponent(ast, components, target, componentsInUsed);
     let code = `({ render: function() { ${render} }, staticRenderFns: [\
 ${staticRenderFns.map(fn => `function() { ${fn} },)}`)}\
 ] })`;
     code = transpile(code);
 
-    return {ast, render: code, errors};
+    return {ast, render: code, errors, componentsInUsed};
 };

packages/mars-build/src/gulp-mars-swan.js

@@ -19,13 +19,15 @@ const {transform} = require('./swan/transform/index');
 const templateCompiler = getCompiler(mark, transform, generate, 'swan');
 const styleCompiler = require('./compiler/style/style').compile;
 const scriptCompiler = require('./compiler/script/script').compile;
+const scriptPostCompiler = require('./compiler/script/script').postCompile;
 const configCompiler = require('./compiler/script/config').compile;
 
 const {FILE_SUFFIX} = require('./helper/config');
 
 const compilers = {
     templateCompiler,
     styleCompiler,
+    scriptPostCompiler,
     scriptCompiler,
     configCompiler
 };

packages/mars-build/src/gulp-mars-wxml.js

@@ -30,6 +30,7 @@ const {transform} = require('./wx/compiler/index');
 const templateCompiler = getCompiler(mark, transform, generate, 'wx');
 const styleCompiler = require('./compiler/style/style').compile;
 const scriptCompiler = require('./compiler/script/script').compile;
+const scriptPostCompiler = require('./compiler/script/script').postCompile;
 const configCompiler = require('./compiler/script/config').compile;
 
 const {FILE_SUFFIX} = require('./helper/config');
@@ -38,6 +39,7 @@ const compilers = {
     templateCompiler,
     styleCompiler,
     scriptCompiler,
+    scriptPostCompiler,
     configCompiler
 };
 

packages/mars-build/src/h5/template/MarsApp.vue

@@ -161,7 +161,7 @@ export default {
     },
     computed: {
         tabBarHeight() {
-            return this.tabList.some(item => item.pagePath === this.$route.path) ? 45 : 0;
+            return this.tabList.some(item => item.pagePath === this.$route.path) && this.customShowTabBar ? 45 : 0;
         }
     },
     watch: {

packages/mars-build/src/h5/transform/tag.js

@@ -35,12 +35,25 @@ function toCamel(name) {
     return camelName.substring(0, 1).toUpperCase() + camelName.substring(1);
 }
 
+// 判断租先节点是否含有 template-mars target=swan|wx，如果含有，则不收集该ast tag
+function checkScopedTemplateIsH5(ast) {
+    let parent = ast.parent;
+    if (parent) {
+        if (parent.tag === 'template-mars' && parent.attrsMap && parent.attrsMap.target !== 'h5') {
+            return false;
+        }
+        else {
+            return checkScopedTemplateIsH5(parent);
+        }
+    }
+    return true;
+}
+
 module.exports = function (ast, compMap) {
     let tag = ast.tag;
     if (!tag) {
         return ast;
     }
-
     if (
         tag === customTemplate
         && ast.attrsMap.target === (process.env.MARS_ENV_TARGET || 'h5')
@@ -67,6 +80,7 @@ module.exports = function (ast, compMap) {
         tagMap[tag]
         && !compMap[tagMap[tag]]
         && tagMap[tag] !== 'template'
+        && checkScopedTemplateIsH5(ast)
     ) {
         compMap[`${tagMap[tag]}`] = toCamel(tagMap[tag]);
     }