ES6学习---模块化

        //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. 解构赋值形式 as后跟着别名 就相当于 school的别名是 guigu
        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);

分别暴露

//分别暴露
export let school = '尚硅谷';

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

统一暴露

//统一暴露
let school = '尚硅谷';

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

//
export {school, findJob};

默认暴露

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

 

es6模块化语法需要先使用Babel转换为es5,再使用Browserify打包编译

## ES6-Babel-Browserify使用教程

1. 定义package.json文件

  ```

  {

    "name" : "es6-babel-browserify",

    "version" : "1.0.0"

  }

  ```

2. 安装babel-cli, babel-preset-es2015和browserify

  * npm install babel-cli browserify -g

  * npm install babel-preset-es2015 --save-dev

3. 定义.babelrc文件

  ```

  {

    "presets": ["es2015"]

  }

  ```

4. 编译

  * 使用Babel将ES6编译为ES5代码(但包含CommonJS语法) : babel js/src -d js/lib

  * 使用Browserify编译js : browserify js/lib/app.js -o js/lib/bundle.js