vite中解构导出或有bug?

Question

不使用解构输出

import api from '@/api'
console.log(api.login) // function() {}

使用解构输出

import {login} from '@/api'
console.log(login) // vue-router.esm-bundler.js:3302 SyntaxError: The requested module 

import request from '../utils/request'
export default {
  login(params) { // 登录
    return request({
      url: '/users/login',
      ...params
    })
  }
}

• 现在的情况是，可以导入这个对象，通过对象的使用 login 函数
• 如果在导入的时候进行解构则报错，请问这是什么原因？
• 申明，别名已配置好

Answer 1

这不是 bug。你可以去了解下 CommonJS 和 ESM 的导出有何异同，我们以前写代码的时候，很多时候会混用，反正 Babel 会帮我们转译，然后打包到一起也不需要区分；Vite 需要用到浏览器 ESM，所以要严格遵守 ESM 规范。

关于导出方式，请参考 MDN。

Answer 2

因为你导出的不对
像下面这样导出
commonjs规范

const request = require('../utils/request').default;
module.exports = {
  login(params) { // 登录
    return request({
      url: '/users/login',
      ...params
    })
  }
}

下面3种写法是es规范

import request from '../utils/request';
export function login(params){
    return request({
      url: '/users/login',
      ...params
    })
}

import request from '../utils/request';
export const login = (params) => {
    return request({
      url: '/users/login',
      ...params
    })
}

import request from '../utils/request';
function login(params){
    return request({
      url: '/users/login',
      ...params
    })
}
export { login };

然后用的时候就可以这样

import * as api from '@/api'
console.log(api.login)

或这样

import {login} from '@/api'
console.log(login)

使用

Answer 3

import request from '../utils/request'
- export default {
+ export {
  login(params) { // 登录
    return request({
      url: '/users/login',
      ...params
    })
  }
}