如何导入命名空间？

Question

我有一个JavaScript文件，其中包含以下内容：

const api = {
  call(type, url, data) {
    console.log(type + "bar");
  },

  get(url, query) {
    this.call("foo");
  }
}

我希望能够在必要时在多个不同的文件中致电api.get()，但我在导入时遇到问题。

1. 当我尝试访问import变量时，通过api单独加载文件会给我一个ReferenceError：

   import "services/api.js";
   console.log(api);
   

     

   未捕获的ReferenceError：未定义api

2. 为导入命名（api）会返回一个Object，但它没有内部方法：

   import api from "../../services/api.js";
   console.log(api);
   console.log(api.get);
   

     

   对象{}   未定义

我做错了什么？

Answer 1

首先你必须将其导出：

const api = {
  call(type, url, data) {
    console.log(type + "bar");
  },

  get(url, query) {
    this.call("foo");
  }
}

export {api}

然后，导入它：

import {api} from './path/to/api' // no .js

当您从一个文件导出多个项目（函数，类，变量）时，将使用此方法。如果在您的情况下api是您要导出的唯一商品，则可以使用default关键字，并且您不再需要在导入期间使用这些荣誉：

const api = {
  call(type, url, data) {
    console.log(type + "bar");
  },

  get(url, query) {
    this.call("foo");
  }
}

export default api

和

import api from './path/to/api'

祝你好运！

Answer 2

您的api.js未导出任何内容。您应该重写它以导出所有这些函数：

export function call(type, url, data) {
    console.log(type + "bar");
}
export function get(url, query) {
    call("foo");
}

（这比默认导出api对象文字要好得多）

然后你可以像

一样使用它

import * as api from "../../services/api.js";
console.log(api);
console.log(api.get);

Answer 3

您需要导出api：

const api = ...

export default api;

Answer 4

作为旁注：这样的导出/导入是ES6模块规范，请注意。对于没有任何转换程序的Node / CommonJS Module环境，它将是

// export
module.exports.api = api

// or
module.exports = { api: api } ...


// import
var module = require(....)