[import ... from」、「 import ... = require()」和「import(path: string)」有什么区别？

我不是女神ヾ 2022-11-18 13:50 176阅读 0赞

1、import ... from
    
    2、import(path: string)
    
    3、import ... = require()

前两个都是ES6的模块语法，第3个import ... = require() 是ts的语法

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块

第1个：import命令只能在模块的顶层，不能在代码块之中（比如，在if代码块之中，或在函数之中）

第2个：ES2020提案 引入import()函数，支持动态加载模块  
import()函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。另外，import()函数与所加载的模块没有静态连接关系，这点也是与import语句不相同。import()类似于 Node 的require方法，区别主要是前者是异步加载，后者是同步加载。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70][]

3、import ... = require()

为了支持CommonJs和AMD的exports，Typescript提供了export = 语法

使用export = 导出一个模块，必须使用import ... = require() 导入模块

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70 1][]

参考链接：

es6:  [https://es6.ruanyifeng.com/?search=import&x=0&y=0\#docs/module\#import][https_es6.ruanyifeng.com_search_import_x_0_y_0_docs_module_import]

ts:    [https://www.tslang.cn/docs/handbook/modules.html][https_www.tslang.cn_docs_handbook_modules.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70]: /images/20221022/015a01d12e5244c1b94f31deb3159ab1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70 1]: /images/20221022/9ca26c48afda4bc3bfc6764c56ce781e.png
[https_es6.ruanyifeng.com_search_import_x_0_y_0_docs_module_import]: https://es6.ruanyifeng.com/?search=import&x=0&y=0#docs/module%23import
[https_www.tslang.cn_docs_handbook_modules.html]: https://www.tslang.cn/docs/handbook/modules.html