关于使用条件编译时遇到的问题和一些想法

目前的条件编译是使用注释和目录区分的方式实现，但是在实际开发中会遇到几个问题。

1. pages.json中的注释会破坏JSON结构

在pages.json中使用注释的方式实现条件编译，会破坏JSON结构，会导致部分IDE报错，虽然不影响最终使用，但是在开发时还是会影响体验。
建议可以pages.json中，在保持JSON结构不变的情况下，支持对不同终端的配置。例：

{  
    "pages": [  
        {  
            "path": "pages/index/index"  
        }  
    ],  
    "globalStyle": {  
        "enablePullDownRefresh": false  
    },  
    "platforms": {  
        "mp-weixin": {  
            "pages": [  
                {  
                    "path": "pages/login/index"  
                }  
            ],  
            "globalStyle": {  
                "enablePullDownRefresh": true  
            }  
        }  
    }  
}

在编译微信小程序时，会把"pages/login/index"页面也编译进去，另外覆盖合并其他配置到默认配置上。

2. 在JS脚本中条件注释可能会导致IDE报错和代码质量检测失败。

比如以下代码：

function login(payload) {  

    // #ifdef H5  
    return redirectTo({  
        url: "/pages/login/index",  
        payload  
    });  
    // #endif  

    // #ifdef MP  
    return uni.login(payload);  
    // #endif  
}

对于代码检查工具来说，return之后紧接着又是一个return，本身就是一段“有问题”的代码。而且如果逻辑复杂，会影响代码阅读。

对于此问题，我有2点建议：
1是支持使用环境变量做条件编译：比如：

function login(payload) {  

    if (process.env.UNI_PLATFORM === "h5") {  
        return redirectTo({  
            url: "/pages/login/index",  
            payload  
        });  
    }  

    if (process.env.UNI_PLATFORM === "mp-weixin") {  
        return uni.login(payload);  
    }  
}

2是支持按平台区分文件。比如login.h5.js，login.mp-weixin.js。import 文件时，只需要import login即可，编译器自动优先编译对应的文件。在开发时，只要保持多端文件export一致即可。

login.js(没有对应平台文件时，才编译此文件)  
login.h5.js  
login.mp-weixin.js

3. 使用整体目录条件编译，会导致路由不一致。

如果要实现同样的路由，不同平台编译时编译不同的问题，就需要破坏路由，比如：

// pages.json  
{  
    "pages": [  
        // #ifdef h5  
        {  
            "path": "pages/login/index"  
        },  
        // #endif  
        // #ifdef mp-weixin  
        {  
            "path": "platform/mp-weixin/login/index"  
        }  
        // #endif  
    ]  
}

本来都是登录页，需要保持路由的一致，但是如果按平台区分文件，那么就必须要拆成两个路由。
对此，我建议可以支持按文件后缀来区分平台：
比如在编译微信小程序时，优先编译/pages/login/index.mp-weixin.vue，如果文件不存在，才编译/pages/login/index.vue。这样既能保证路由一致，又可以通过区分文件实现条件编译。

以上是本人在开发中遇到的实际问题和产生的一些想法，如有不完善的地方还请大家指教。