我们明确一个概念,只有js与js之间需要使用import与export,如果是在html中引入js是不需要用import的,你导入的方式是直接src='xxx.js'
如果你要直接运行js,那么你需要使用到node。node版本需要 >= v14.15.1 才能使用 ES6模块化语法
我们先直接导出导入一下
直接这样写会报错,在import中有标注,这个里斯是他理解不了import
这个时候我们就需要加上一个package.json了
在package.json中加上type:module
加上之后再运行就可以成功导出导入了
2 按需导入导出
export default称为默认导出,在同一个js文件中只能默认导出一次(使用多了会报错),按需导出只需要写export,可以使用多次
导入导出时的名称必须一致,但在导入后使用的时候你可以给一个别的名字
3 默认与按需导入导出可以同时存在
导入的时候我们也可以这样写
4 直接执行其他js文件中的代码
导入其他模块成员要使用关键字 import ,导出需要使用关键字 export我们明确一个概念,只有js与js之间需要使用import与export,如果是在html中引入js是不需要用import的,你导入的方式是直接src='xxx.js'
本文主要给大家介绍了关于
javascript
中require、
import
与
export
的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。
为什么有模块概念
理想情况下,
开发
者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。
但是,
Javascript
不是一种
模块化
编程
语言
,在
es6
以前,它是不支持”类”(class),所以也就没有”模块”(module)了。
require时代
Javascript
社区做了很多努力,在现有的运行环境中,实现”模块”的效果。
模块就是实现特定功能的一组方法。
只要把不同的函数(以及记录状态的变量)简单地放在
ES6
标准发布后,module成为标准,标准的使用是以
export
指令导出接口,以
import
引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS
规范
,使用require引入模块,使用module.
export
s导出接口。
不把require和
import
整清楚,会在未来的标准编程中死的很难看。
require时代的模块
node编程中最重要的思想之一就是模块,而正是这个思想,让
JavaScript
的大规模工程成为可能。
模块化
编程在js界流行,也是基于此,随后在浏览器端,requirejs和seajs之类的工具包也出现了,可以说在对应
规范
下,require统治了
ES6
之前的所
使用了babel转码,使用
import
和
export
的时候,在浏览器运行代码的时候,提示
Uncaught ReferenceError: require is not defined
babel只是个翻译,假设a.js 里
import
了 b.js
对a.js进行转码,只是翻译了a.js,并不会把b.js的内容给读取合并进来
如果想在最终的某一个js里,包含 a.js,b.js 的代码,那就需要用到打包工具
也就是webpack等工具了
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
在
ES6
前, 前端就使用RequireJS或者seaJS实现
模块化
, requireJS是基于AMD
规范
的
模块化
库, 而像seaJS是基于CMD
规范
的
模块化
库, 两者都是为了为了推广前端
模块化
的工具, 更多有关AMD和CMD的区别, 后面参考给了几个链接;
现在
ES6
自带了
模块化
, 也是JS第一次支持module, 在很久以后 ,我们可以直接作用
import
和
export
在浏览器中导入和导出各个模块了, 一个js文件代表一个js模块;
现代浏览器对模块(module)支持程度不同, 目前都是使用babelJS, 或者Traceur把
ES6
代码转化为兼容ES5版本的js代码;
ES6
的
模块化
import
与
export
是
es6
中
模块化
的导入与导出,node.js现阶段不支持,需要通过babel进行编译,使其变成node.js的
模块化
代码。(关于node.js模块,可参考其他node.js
模块化
的文章)
export
曝露
使用
export
可以曝露出方法、对象、字符串等等,如下代码
//写法1
export
var foo=function(){
console.log(1);
//写法2
var bar ={a:"1",b:2};
export
{bar};
//写法3
var baz='hello world';
export
{baz as qux};
Nodejs 6.x版本还没有支持
export
和
import
import
与
export
是
es6
中
模块化
的导入与导出,node.js现阶段不支持,需要通过babel进行编译,使其变成node.js的
模块化
代码。(关于node.js模块,可参考其他node.js
模块化
的文章)
继续使用
export
s和require
test.js
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
add (){
this.x = this.x ? this.x : 1;
this.y = th
import
modular from 'modujs' ;
import
* as modules from './modules' ;
const app = new modular ( {
modules : modules
} ) ;
app . init ( app ) ;
< h2> Example </ h2>
< button data-example =" button " > Button </ button >
</ div>
import
{ module } from 'modujs' ;
export
default cla
在
JavaScript
ES6
中,用
export
、
import
和
export
default
关键字
可以实现
模块化
编程。
export
关键字
用于导出一个或多个模块,可以导出变量、函数、对象等内容。
import
关键字
用于引入一个或多个模块,由于导出的内容是可命名的,因此必须指定被引入模块导出的名称,例如
import
{ name } from "./module.js"。
export
default
关键字
用于默认导出一个模块,一个模块只能有一个默认导出,如果需要导出多个模块,可以使用
export
关键字
。默认导入模块时,可以任意指定名称,例如
import
myModule from "./module.js"。
区别在于
export
default只能导出一个模块,而
export
可以导出多个模块,通常用于导出变量、函数、对象等内容。
import
时,
export
需要指定名称,而
export
default可以任意指定名称。因此,当导出的模块只有一个时,建议使用
export
default。