javascript - 导入和导出 JS 库

Question

这里我有一组我定义的库

lib1.js

export default {
    Func1() {
        return ...
    }
}

(我的其他库等等)

在这里，我将这些库导入到一个主文件中，稍后我想将其导入到我的 Vue 中:

api.js(不是lib1、lib2、lib3和api在同一个文件夹)

import './lib1';
import './lib2';
import './lib3';

在 View 中:

<script>
    import * as Api from '@/api/api';

    mounted() {
      Api.func1();
    }

</script>

Mix 提示我找不到函数:

"export 'Func1' (imported as 'Api') was not found in '@/api/api' .... 

我知道路径是正确的，因为例如，如果我在我的 View 中直接导入库，它就可以工作:

( View ):

<script>
    import Lib1 from '@/api/lib1'
    import Lib2 from '@/api/lib2'
    import Lib3 from '@/api/lib3'

    mounted() {
      Lib1.func1();

      ...

    }

</script>

这里有什么？我只想要一个“主”文件来导入我所有的 Api 函数，而不是分别导入每个函数。

关于环境的一些其他注意事项:我使用的是 Laraval 6 和 Vue。

Answer 1

组合模块的方法有很多种，我创建了stackblitz向您展示如何做到这一点。
您的方法无效，因为您导出了 default 并且当您尝试 import './lib1'; 时，此类模块的名称是未知的。
此外，import * as Api 只有在您有多个 named 导出但没有一个 default 时才有效。
如我所见，您想将多个库合并到一个导出的对象中。 有几种方法可以实现您的目标:

1. 仅导出命名函数(我最喜欢的):

库1

export function Func1() {
  return ...;
}
export function Func2() {
  return ...;
}

然后在主文件中:

import * as lib1 from './lib1';

export default {
...lib1
}

1. 在您的示例中导出默认值

库1

export default {
 Func1() {},
 Func2() {}
}

然后在主文件中:

import lib1 from './lib1';

export default {
...lib1
}

1. 导出默认但组合

库1

export default {
 Func1() {},
 Func2() {}
}

然后在主文件中:

import lib1 from './lib1';

export default {
 lib1
}

但是在你的其他文件中你应该像这样使用它:

import Api from '@api/api';

Api.lib1.Func1()

注意:根据您当前的配置，您应该使用 import Api from '@api/api'; 而无需 * 还有很棒的article关于 named 导入与 default 的对比。