1、使用导出导入模块,必须在script标签写清楚类型 type='module'
HTML:
<body>
<script type='module' src="main.js"></script>
</body>
2、模块写完,就需要进行导出(export),如module.js:
let name="小明"
let age=18
let module=function(){
alert(`我是${name},我今年${age}`)
}
export default module //默认导出module
3、需要用到某个模块,就需要进行导入(import),如main.js:
import module from './module.js' //导入模块
setTimeout(function(){
module()
},3000)
一、常见的导入方式(import)
import xxx from "module.js" //默认导出情况,导入xxx名字随意
import * as xx from "module.js" // *将所有内容导入,并挂载在xx上面
import { name } from "module.js" // 导出是name,导入就可以写name
import { name as name2 } from "module.js" // 可以对导入name进行重新命名为name2
import { name , age ,module} from "module.js" //可以选择全部导入,也可以部分导入
import { name , age as _age2} from "module.js" // 可以对导入部分进行重命名
二、常见的导出方式(export)
export default module //默认导出
export default {name,age,module} //导出多个变量
注意:由于历史原因ES6之前不能使用模块这个功能,所有我们如果要在浏览器上使用模块功能,可以使用安装parcel这个库进行。
网友评论