使用了import() 动态加载 还是报错，“”import必须写在文件头部“”

Question

问题描述

使用了import() 函数动态加载 还是报错：
Module parse failed: 'import' and 'export' may only appear at the top level (21:8)

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
export const dynamicLoadModule = () => {

if (window.dynamicload === 0) {
    import('./testModule.js')
} else {
}

}

你期待的结果是什么？实际看到的错误信息又是什么？

期待动态加载js不报错

Answer 1

可能需要安装 @babel/plugin-syntax-dynamic-import

Answer 2

新建一个 lazyLoading.js 内容如下

export default (url) => () => import(`@/${url}`)

在使用的地方

// 懒加载
import lazyLoading from '@/libs/lazyLoading'


async initData () {
      let me = this
     
      let nameCode = 'jilin'

      // 加载对应地区的地图json
      const json = await lazyLoading(`assets/3rdparty/mapfile/province/${nameCode}.json`)()
      console.log(json)
      }

Answer 3

不是要你写在头部，而是要你写在最外层（top level）
你想用的dynamic import是没这种限制的
你现在用不了dynamic import应该是你的打包工具版本不够新

Answer 4

import(路径)
.then(导出 => {
    导出.方法(参数);
})
.catch(错误 => {

});

Answer 5

可不可以用这种方式实现
import(window.dynamicload === 0 ? './testModule.js': './testModule2.js')

Answer 6

请问，是否创建.babelrc文件，并添加如下代码:

{
  "presets": ["es2015", "stage-0"]
}

如果添加了按照这种写法是没问题的。

export const dynamicLoadModule = () => {
   if (window.dynamicload === 0) {
        import('./testModule.js');
   }
}

在你要调用这个方法的组件中引入:

import * as dynamicLoadModule  from './dynamicLoadModule.js'
//可以打印这个值
console.log(dynamicLoadModule)//它会是一个对象
//然后调用
dynamicLoadModule.dynamicLoadModule();