怎么让vue-cli支持顶层await

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

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

image.png

回复
阅读 3.2k
4 个回答
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

使用 立即执行函数
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)
}{)();

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

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

顶层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将他们融合在一起时只会暴露一个方法。这个只能命名时多注意了。

推荐问题
宣传栏