ES6模块化规范(关键字 import,from,as,export的用法)

阳光多一些
68 阅读1分钟

1  默认导入导出

如果你要直接运行js，那么你需要使用到node。node版本需要 >= v14.15.1 才能使用 ES6模块化语法

我们先直接导出导入一下

image.png 直接这样写会报错，在import中有标注，这个里斯是他理解不了import

image.png 这个时候我们就需要加上一个package.json了

image.png 在package.json中加上type:module

image.png 加上之后再运行就可以成功导出导入了

image.png

image.png

2  按需导入导出

export default称为默认导出，在同一个js文件中只能默认导出一次（使用多了会报错），按需导出只需要写export，可以使用多次

image.png

  • import后直接接大括号不是解构 export default 的内容，而是导入export的内容

image.png 导入导出时的名称必须一致，但在导入后使用的时候你可以给一个别的名字

image.png

image.png

3  默认与按需导入导出可以同时存在

image.png

image.png 导入的时候我们也可以这样写

4  直接执行其他js文件中的代码

5  在浏览器中使用import语法

如果直接使用script你可能会出这个问题

image.png

你需要给script加上type="module"

这个时候如果你用file协议打开的话就会出现这个问题

如果你用http协议打开就会成功导入

avatar
文章
阅读
粉丝