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

已于 2023-08-01 09:30:18 修改
阅读量2.3k 收藏 5
点赞数 1
分类专栏： Node.js笔记 JavaScript笔记 文章标签： es6 javascript 开发语言
于 2023-06-01 15:02:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/potato123232/article/details/130988507
版权
文章介绍了JavaScript中的模块导入导出机制，包括默认导入导出、按需导入导出的使用，以及如何在Node.js中配置package.json以支持ES6模块。同时，讲解了在浏览器环境中使用``的注意事项，强调了不同协议（如HTTP与FILE）对模块加载的影响。
摘要由CSDN通过智能技术生成

导入其他模块成员要使用关键字 import ，导出需要使用关键字 export

目录

1  默认导入导出

2  按需导入导出

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

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

5  在浏览器中使用import语法

1  默认导入导出

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

我们先直接导出导入一下

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

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

在package.json中加上type:module

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

2  按需导入导出

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

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

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

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

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

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

5  在浏览器中使用import语法

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

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

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

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

Suyuoa
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
ES6-模块化规范
qq_45802159的博客
12-07 258
ES6-模块化规范 导出 // 1. 模块私有的内容 function multiply (x, y) { return x * y; } // 2. 模块导出的内容 export function sum (x, y) { return x + y; } export function substract (x, y) { return x - y; } // 3...
在JavaScript中，使用import语句导入模块注意
最新发布
weixin_45458830的博客
11-28 562
而 import * as XLSX from 'xlsx' 是命名导入，它将整个模块作为一个命名空间引入，并将模块中的所有导出都作为该命名空间对象的属性。因此，你需要使用 import * as XLSX from 'xlsx' 来正确导入并使用 xlsx 模块。import XLSX from 'xlsx' 是默认导入，它假设模块中有一个默认导出的对象。在JavaScript中，使用import语句导入模块时，有两种不同的导入方式：默认导入和命名导入。
ES6模块化简单使用——import关键字、export关键字
Concise200的博客
02-26 1198
ES6模块化1. 介绍2. 默认导出与默认导入默认导出默认导入3. 按需导出与按需导入按需导出按需导入4. 直接导入并执行模块中的代码 1. 介绍 1.在ES6模块化规范诞生之前，JavaScript社区已经尝试并提出了AMD、CMD、CommonJS等模块化规范。但是，这些社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准。 AMD和CMD适用于浏览器端的JavaScript模块化 CommonJS适用于服务器端的JavaScipt模块化 例如在node.js遵循
ES6 中的模块化语法 import / export
qq_34455363的博客
05-14 379
官方网址 http://es6.ruanyifeng.com/#docs/module#export-与-import-的复合写法 1. ES6 中的模块化语法 import / export 2.在浏览器或NodeJS环境中，是无法直接使用 import 语法的 在模块化的环境中每个JS文件都是一个独立的作用域，如果两个JS文件需要交互 那么，必须通过 导入和导出 才能实现 第一种语法:...
ES6模块语法 import 和 export
aiwo035的博客
07-13 357
在es6之前就有js模块加载方案，一种是CommonJS和AMD规范，另外一种是CMD规范，为同步加载方案如seaJS。CommonJS用于服务器，实现同步加载，如nodejs，AMD规范应用于浏览器，如require.jsES6在语言规格的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。ES6模块主要有两个功能：e...
ES6新特性：使用export和import实现模块化
weixin_33907511的博客
06-24 276
　　在ES6前， 前端就使用RequireJS或者seaJS实现模块化， requireJS是基于AMD规范的模块化库，  而像seaJS是基于CMD规范的模块化库，  两者都是为了为了推广前端模块化的工具， 更多有关AMD和CMD的区别， 后面参考给了几个链接；  　　现在ES6自带了模块化， 也是JS第一次支持module， 在很久以后 ，我们可以直接作用import和export在浏览器中...
ES6模块化的import和export用法方法总结
08-29
ES6 模块化的 import 和 export 用法方法总结 ES6 模块化是 JavaScript 语言中的一种模块管理机制，它提供了 import 和 export 两个关键字，用于实现模块之间的依赖关系和变量共享。本文将从 ES6 模块化的基本概念...
ES6使用export和import实现模块化的方法
10-18
通过这些例子，我们可以看到`export`和`import`在ES6模块化中的核心作用。了解并熟练运用这些概念，对于提升JavaScript开发效率和代码质量至关重要。记住，模块化不仅是技术上的改进，更是软件工程理念的体现，有助...
4-5. ES6模块化练习.zip
09-15
通过Node.js的`require`和`module.exports`来实现模块化，这与ES6的`import`和`export`类似，只是语法稍有不同。 在推箱子游戏中，事件模块可能是关键部分。利用`addEventListener`来监听用户的键盘输入或鼠标点击...
ES6模块化规范
这是我的笔记本，记录学习历程，分享学习经验，菜鸡一枚，感谢支持！
05-16 639
在没有ES6模块化规范前，有像AMD、CMD这样的浏览器模块化规范，还有像CommonJS这样的服务端模块化规范。2015年，JS终于推出了官方的模块化规范，为了统一各种规范，我们简称ES6 模块化。ES6目前作为JS的内置模块化系统，并且在Node.js中也同样支持ES6标准的模块化，但是Node.js 默认的模块化规范就是CommonJS。其实模块化，就两件事，模块的导出和导入。
ES6 语法之import export
weixin_30733003的博客
07-12 1010
假设我们有两个js文件:index.js和content.js,现在我们想要在index.js中使用content.js返回的结果 ES6的写法 //index.js import animal from './content' //content.js export default 'A cat' ES6 module的其他高级用法 //content.js expor...
ES6中的模块化规范
Dimuzero的博客
03-19 391
模块化相关规范 1.AMD Require.js() 2.CMD Sea.js() 3.CommonJS 模块分为单文件模块与包 模块成员导出：module.exports和exports 模块成员导入：require(‘模块标识符’) *4.ES6模块化 在ES6模块化规范诞生之前，Javascript社区已经尝试并提出了AMD，CMD，CommonJS等模块化规范 但是这些社区提出的模块化标准，还是存在一定的差异性与局限性，并不是浏览器与服务器通用的模块化标准 AMD和CMD适用于浏览器端的J
es6 import 与 export
jie310600的博客
10-15 562
es6 import 与 export ES6把js文件当做模块处理 导出一个变量 写法1 var name = "Amy"; export {name}; 写法2 var name = "Amy"; export {name as anotherName}; 写法3 export var name = "Amy"; //export输出的是接口,...
vue中import的ES6语法
simple5960的博客
09-25 931
import Vue from ‘vue’; import App from ‘./App’; import router from ‘./route’; import axios from ‘axios’; import ‘./less/index’; 于是赶快上了阮一峰大牛的《ES6标准入门》这辆车，学习了： 1.项目为什么要模块化？ 2.ES6模块与CommonJS和AMD模块加载的不同。 3.export命令 4.import命令 5.模块的整体加载 get到很多的新姿势，然而并不能解释import
nodeES6模块化 + Promise（ES6新对象） +async和await（ES2017关键字） 5+JS执行机制（事件循环）
weixin_40630195的博客
02-10 322
1. nodeES6模块化 2. Promise（ES6新对象） 3. async和await（ES2017关键字） 4. JS执行机制（事件循环） 5. 微任务和宏任务
es6 import
逆风的蔷薇
10-20 697
index.js: import * as api from './api'; export default api; api.js: import axios from 'axios'; let base = ''; export const requestLogin = params => { return axios.post(`${base}/login`, params)...
ES6——import
m0_37616866的博客
07-08 3274
1、翻译 作为动词v，进口;输入;引进;导入;移入等意思，根据语境，ES6中应该是导入的意思。 ES6标准发布后，module成为标准，标准的使用是以export指令导出接口，以import引入模块 2、找例子 // 通过模块名赋值给变量axios,必须有配置文件，告诉js引擎该模块的位置 import axios from 'axios'; // 通过相对路径赋值给变量Home import Home from '../views/Home.vue'; // 通过绝对路径赋值给变量Head import
js模块化（CommonJS、ES6模块化规范）
qq_48617322的博客
09-15 844
js模块化（CommonJS、ES6模块化规范）
html import模块化,关于ES6中的模块化的规范：export与import
05-28
ES6中的模块化规范通过`export`和`import`两个关键字来实现。 `export`用于将模块中的内容导出...同时，ES6模块化规范只能在浏览器中使用模块化，不能直接在Node.js中使用，需要通过打包工具（如webpack）进行转换。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Suyuoa

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值