ES6模块化导入导出3种方式

导出第一种:

//分别暴露
export let school = 'IT教程资源';

export function teach() {
    console.log("我们可以教给你开发技能");
}



<script type="module">
        //1. 通用的导入方式
        //引入 m1.js 模块内容
         import * as m1 from "./src/js/m1.js";
    </script>

导出第二种:

//统一暴露
let school = 'IT教程资源';

function findJob(){
    console.log("我们可以帮助你找工作!!");
}

//
export {school, findJob};



<script type="module">
        // //引入 m2.js 模块内容
         import * as m2 from "./src/js/m2.js";
    </script>

导出第三种:

//默认暴露
export default {
    school: 'ATGUIGU',
    change: function(){
        console.log("我们可以改变你!!");
    }
}



// //引入 m3.js 
 import * as m3 from "./src/js/m3.js";

导入三种

<script type="module">
        //1. 通用的导入方式
        //引入 m1.js 模块内容
        // import * as m1 from "./src/js/m1.js";
        // //引入 m2.js 模块内容
        // import * as m2 from "./src/js/m2.js";
        // //引入 m3.js 
        // import * as m3 from "./src/js/m3.js";

        //2. 解构赋值形式
        // import {school, teach} from "./src/js/m1.js";
        // import {school as guigu, findJob} from "./src/js/m2.js";
        // import {default as m3} from "./src/js/m3.js";

        //3. 简便形式  针对默认暴露
        // import m3 from "./src/js/m3.js";
        // console.log(m3);
    </script>

Guess you like

Origin blog.csdn.net/weixin_42899150/article/details/121061262