怎么让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

阅读 234
评论
    4 个回答
    • 8.3k
    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)
      }{)();
        • 11.6k

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

            撰写回答

            登录后参与交流、获取后续更新提醒