也谈Javascript里的commonjs模块和es6模块_vite 兼容commonjs

最近百家饭OpenAPI平台的JS API调用代码自动生成功能顺利进展中，进展情况可以关注我们的博客，我们计划先在内部完成“自举”（自己平台开发的功能支持自己的开发……），将百家饭平台自身的前后台交互部分迁移到自己开发的JS代码生成模式上来。

整个过程比较长，分成了golang部分和JavaScript部分，所以我们分篇来介绍，把其中有用的技术点也拎出来说

1. 第一篇：Golang生成OpenAPI接口文档（Swag工具试用）
2. 第二篇：Golang OpenAPI工具Swag修正-logrus篇
3. 第三篇：Golang OpenAPI工具Swag修正-go ast篇
4. 第四篇：也谈Javascript里的commonjs模块和es6模块

这一篇和前面三篇不同，回归回来讲Javascript的部分。

我们开始把自己研发的Javascript API调用功能在自己网站应用的过程中，确实也发现了很多API翻译工作中的难点，我们把这些难点和细节都发布到了gitee的项目Issue页面，这周处理了其中的4个，有两个处理中，两个未计划。

​

其中，比较麻烦的就是处理CommonJs和ES6两种引用模式。

CommonJs和ES6的引用区别

现阶段前端可能经常都会遇到这个问题，什么时候该写commonjs代码，什么时候该写es6。上一版本的百家饭生成的就是commonjs的代码，类似这样：

const axios = require("axios");
const config = require("./config.js");
const instance = axios.create(config);
 
const sso_servlet_organduser = require("./api-sso_servlet_organduser.js");
sso_servlet_organduser.injure(instance);
 
module.exports = instance;

试用代码写成这样：

const axios = require("./axios");
 
axios.getSsoServletOrganduser().then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})
axios.getSsoServletOrganduser({servicecode:'test'}).then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})

 node执行是没有问题的。

但是我们发现这个模式放到我们自己的百家饭平台上就出现了问题（百家饭平台前端基于vuepress-next，顺便吐槽一下，vuepress-next目前还处在极不稳定的阶段，建议长期项目还是不要用）。

后来我们发现问题是由于vite对代码的解析要求造成的，原文说明如下：

Vite automatically detects dependencies that are not resolved from node_modules and treats the linked dep as source code. It will not attempt to bundle the linked dep, and will analyze the linked dep's dependency list instead.

However, this requires the linked dep to be exported as ESM. 

大意是说vite对于非node_module文件夹下的其他代码，要求按ESM模式导出。

我们第一时间想起了，听说过的mjs文件，给commonjs加一个封套的办法，于是我们提供了一个index.mjs的生成功能，但是验证，依然无法成功。

所以，在代码层面混用ES6和COMMONJS可能仍然是个不符合常理的选项，建议大家在vue，vuepress等大型项目中都统一使用ES6风格。

同时，vite也提供了另外一个方案，就是在配置中使用一个选项来标注某个引用是commonjs引用，方式就是在vite config中增加如下字段：

      build: {
        commonjsOptions: {
          include: [/theme\/layouts\/axios\/*/]
        },
      },

但是测试仍然不起效果，推测该设置还是针对引用库有效，但是对于在代码层面混用还是有问题。

所以后来我们只能提供commonjs和es6两种模板了，并且扩展了生成命令，支持参数配置以便支持该项功能，因为相关功能涉及到基础工具的升级，会一并在下周通过0.5.3版本百家饭软件发布。

感谢关注，你认为自动生成api调用代码有用么？欢迎通过投票给我们意见