js模块的导入与导出

js模块的导入与导出

导入import

在js模块中通过import导入其他文件import xxx from '路径地址',在导入的时候.js后缀以及index.js可以省略不写，如果是在vue项目中.vue后缀也可以省略

导入css可以只用import '路径'导入

导出

导出分为两种导出方式export和export default

• export（具名导出）

在第一个js文件中写下如下代码

//第一个js文件
var name = "名字";
function fun(){
    alert("肉弹葱鸡")
}

export {name,fun}

这种导出方式在导入的时候名字必须与导出名字一致，并且导出多个数据的时候必须写成对象的形式，然后我们在第二个js文件中通过下面代码导入第一个js文件

//第二个js文件
import {name,fun} from '第一个js文件路径'

如果导入文件中的数据过多的话为了使代码更加简洁我们可以使用一个 * 符号，*表示全部的意思，比如

//第三个js文件
import * as obj from '第一个js文件路径'

因为是以对象形式导出的，这里相当于给这个对象起了个名字叫obj，所以第三个js文件中的obj.name与第二个js文件中的name是一样的，使用*的话须要用as重新命名

• export default（匿名导出）

class Person{
    constructor(name){
        this.name = name;
    }
    say(){
        alert(this.name)
    }
}

export default Person //将Person匿名导出

在其他文件导入

import Person from '上面文件路径'

其中export可以导出多次，但是export default只能导出一次，并且两者是可以共存的

动态导入

• 魔法注释
  webpack打包工具有两个魔法注释

/* webpackChunkName: "jquery" */ //打包后的名称叫jquery
/* webpackPrefetch:true */ //文档空闲提前加载preferch

import(/* webpackChunkName: "jquery" */ /* webpackPrefetch:true */ "@/assets/jquery-3.4.1.js")
.then(({default:$})=>{
	console.log($("#nav")[0]);
	console.dir($("#nav")[0]);
})

CommonJs规范

• 导出

module.exports = {name,age}

• 导入

var obj = require("路径")

webpack同时支持ES6规范和CommonJs规范，所以下面这两种导入效果是一样的

import 'xx.css'
require( 'xx.css')