关于ES module在逻辑代码中报错的问题
OneWord 2021-02-01 node
# 关于ES module在逻辑代码中报错的问题
具体代码如下:
let flag = true
if(flag){
import foo from './components/foo.js'
}
1
2
3
4
2
3
4
代码喻义即为:如果某一判断成立时,加载foo这一模块的代码。理论上逻辑完全没有问题,但是浏览器将会报错"Uncaught SyntaxError: Unexpected identifier",会提示语法错误.
查阅相关资料得知js在引擎在执行的时候有一个解析过程,在解析时已经确定了依赖关系,let以及if的代码属于运行阶段执行的,而解析过程并没有发生判断if,js并不知道是否要进行解析,所以出现了报错。
解决方法如下:
使用require(),因为require是一个函数,不会出现影响。
但在某些情况下,只能在ES module环境下运行时,无法使用require。
这时候js还给我们提供了import()这一函数,可以使用该函数进行加载。
let flag = true
if(flag){
import('./components/foo.js') //函数返回值是一个promise,可以使用.then.catch对其操作
}
1
2
3
4
2
3
4