今天说一下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无需知道变量名，就可以直接使用
