ES6 模块 babel 打包模块命令

暴露方法

export let school = 'tom';

export function teach() {
    console.log('123');
    
}

// 统一暴露
let school = 'tom';

function teach() {
    console.log('456789');
}

export {school,teach}

// 默认暴露
export default{
    name:'tom',
    age:18,
    sex:'man'
}

模块文件暴露

//入口文件

//模块引入
import * as m1 from './m1.js'; 
import * as m2 from './m2.js'; 
import * as m3 from './m3.js'; 
// console.log(m1);
// console.log(m2);
// console.log(m3);
// m1.teach();
// m2.teach();

import $ from 'jquery'; // const $ =require("jquery")
$('body').css('background','pink')

引入模块的方式

通用方式
        引入 m1.js 模块 
        import * as m1 from './js/m1.js'; 
        console.log(m1);
        m1.teach();

        // 引入 m2.js
        import * as m2 from './js/m2.js';
        console.log(m2);

        // 引入 m3.js
        import * as m3 from './js/m3.js';
        console.log(m3);
        console.log(m3.default.name);

        解构赋值 形式
        import {school,teach} from './js/m1.js';
        import {school as sc,teach as tea} from './js/m1.js'; // 重名 用 as 新名字
        import {default as m3} from './js/m3.js'; // 必须要新名字
        console.log(m3);

        简便形式 只能用默认暴露
        import m3 from './js/m3.js';
        console.log(m3);
		//引入整体模块文件
		<script src="./js/app.js" type="module"></script> 

使用babel 打包 模块

初始化 npm init --yes
// 安装命令
// npm i babel-cli babel-preset-env browserify -D
// 工具 babel-cli babel-preset-env browserify(webpack)
// 2. 编译 npx babel src/js -d dist/js --presets=babel-preset-env
// 3. 打包 npx browserify dist/app.js -o dist/bundle.js
// npx babel js -d dist --presets=babel-preset-env