ES6模块化

今天说一下ES6的模块化，使用babel进行编译。
babel+webpack配置:

    webpack.config.js的代码如下:
    module.exports={
          entry:'./index.js',//入口文件
          output:{
              filename:'build.js'//出口
          }，
     module:{
    loaders：[{
        test:/\.js$/,
        loaders:'babel-loader',
        exclude:/node_modules/   //排除那些目录
        }]
    }
};

.babelrc文件的配置

{
        "presets:[['es2015']]"
}

下载相应的模块

npm install-loader babel-core babel-preset-es2015

webpack -w运行
ES6里面模块化的使用方式

模块: 定义(导出) 和 引入(导入)
以下例子,导出模块放在 mod.js里面
以下例子,导入模块放在 index.js 里面

第一种书写方式

mod.js代码(一个一个导出)

export let a=12; //到处普通值
    export let b=5;
    exporrt let json={
        a,b
    };
    export let show=function(){//导出函数
        reutrn 'hello'
    }；
    export class Person{ //导出类(es6面向对象)
        constructor(){
            this.name='123';
        }
        showName(){
            reutrn this.name;
        }
    }

index.js代码

import {
        a,b,json,show,Person
    } from './mod'
    console,log(a,b,json,show,Person);

第二种书写方式

mod.js代码

let [a,b,c]=[12,5,1];
    export{
        a,b,c as  cc//as是别名，使用的时候只能用别名
    }

index.js代码

import{
        a,b,cc //cc是导出的，as别名
    } from './mod'
    console.log(a,b,cc);

第三种 default方式

default方式的优点，import无需知道变量名，就可以直接使用