怎么让vue-cli支持顶层await

Question

如题 背景是需要在一个入口文件动态引进其他插件，然后再将这些插件暴露出去，顶层await这个语法目前在chrome可以正常使用，但是在vue-cli中会报编译错误，不知有啥解决方案
https://github.com/tc39/propo...

const libPath = [
    'client/client',
    'client/lib',
    'page_api/api',
    'report/beaconReport',
    'util/util',
]
const libPathHandlers = libPath.map( path => import(`@lib/${path}`) );
const modules = await Promise.all(libPathHandlers)
// todo....  export modules
// compile error

Answer 1

const libPath = [
  'client/client',
  'client/lib',
  'page_api/api',
  'report/beaconReport',
  'util/util',
];

const modules = {};

for (const path of libPath) {
  const module = require(`@lib/${path}`);
  modules[path] = module;
}

export default modules;

这种需求可以用require来实现
要挂在哪个属性上自己考虑，例子里面直接直接挂在path上
如果是用export default导出来的对象，要取module.default

Answer 2

使用 立即执行函数
https://segmentfault.com/a/11...

;(async () => {
const libPath = [
    'client/client',
    'client/lib',
    'page_api/api',
    'report/beaconReport',
    'util/util',
]
const libPathHandlers = libPath.map( path => import(`@lib/${path}`) );
const modules = await Promise.all(libPathHandlers)
}{)();

Answer 3

因为对那个 JS 的语法分析并没有在当前 node.js 环境里进行，所以报错的也跟你跑的方式无关。

正常来说，因为 vue 本身就支持异步组件，所以你直接把它们按异步引入，然后 export 就行了，不用自己控制异步。

Answer 4

顶层await的方式自己弃用了，使用了export 重定向导出解决问题,目的是使用ES6 module的方式，只需要import一个js就可以使用其他js的方法，代码如下:

// a.js
export const fn1 = ()=> console.log('i am a')

// b.js
export const fn2 = ()=> console.log('i am b')

// index.js 入口文件

export * from 'a'
export * from 'b'

// App.vue
import { fn1, fn2 } from 'index.js'

不过遇到要是a.js和b.js都有相同方法，在index.js将他们融合在一起时只会暴露一个方法。这个只能命名时多注意了。