ES6模块化之import的使用方式

　　1.引入外部文件：

<script src='文件路径' type='module'><!--PS：这个type="module" 必须要写，否则浏览器会报错-->

　　2.标签内嵌式：

<script type='module'><!--PS：这个type="module" 必须要写，否则浏览器会报错-->
</script>

 

　　上述两种任意一种都可，

　　然后在外部文件或script标签之间写入代码

关于引入的方式：

　　

//模块引入

//1.通用的导入方式
//引入index1.js
import * as index1 from './index1.js';
console.log(index1);
index1.print('通用方式导入-分别暴露',index1.name);

//引入index2.js
import * as index2 from './index2.js';
console.log(index2);
index2.print('通用方式导入-统一暴露',index2.name);

//引入index3.js
import * as index3 from './index3.js';
console.log(index3);
index3.default.print('通用方式导入-默认暴露',index3.default.name);

//2.解构赋值形式
import {name, print} from './index1.js';
print('解构赋值形式导入-分别暴露',name);

//重复的名字可以用别名
import {name as retrace, print as println} from './index2.js';
println('解构赋值形式导入-统一暴露',retrace);

import {default as index} from './index3.js';
index.print('解构赋值形式-默认暴露',index.name);

//3.简便形式   针对默认暴露
import m3 from './index3.js';
m3.print('简便形式-针对默认暴露',m3.name);

 

　　其中index1.js 

//分别暴露
//要暴露的属性
export let name = 'retrace';
//要暴露的方法
export function print(method,msg){
    console.log(method,'index1.js','打印数据：',msg);
}

　　index2.js

//统一暴露

let name = 'retrace';

function print(method,msg){
    console.log(method,'index2.js','打印数据：',msg);
}

export {
    name,
    print
}

　　index3.js

//默认暴露
export default {
    name:'retrace',
    print:function (method,msg){
        console.log(method,'index3.js','打印数据：',msg)
    }
}

 

标签：ES6,name,模块化,js,index2,index3,print,import,index1
来源： https://www.cnblogs.com/serendipity-echo/p/15405721.html