javascript模块化编程05ES6模块化编程规范
语法非常简单也是现在最流行的模块化开发模式,虽然ES6已经是标准化但是多数的浏览器是不支持ES6语法的所以在使用浏览器端时,我们需要通过babel将其转化为ES5的js代码,但是经过babel转化的代码是属于CommonJS模块化语法规范的代码,还需要通过browserify转化为浏览器可识别的代码。
项目结构
|ES6-babel-browserify
|—-js
| |—-build//存放编译打包的文件
| |—-dist//存放浏览器的文件
| |—-src
| | |—-module1.js
| | |—-module2.js
| | |—-module3.js
| | |—-main.js
|—-.babelrc//babel配置文件
|—-index.html
代码实现
1.创建如上的项目结构
2.npm init初始化获取packagge.json文件
index.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./js/dist/bundle.js"></script>
</body>
</html>
.babelrc配置文件
{
"presets": ["es2015"]
}
module1.js
//暴露模块 分别暴露
export function foo(){
console.log("foo() module1");
}
export function bar(){
console.log("bar() module1");
}
export let arr = [11,2,3,12,213,432]
module2.js
//统一暴露
function fun() {
console.log("fun() module2");
}
function fun2(){
console.log("fun2() module2");
}
export {fun,fun2};
module3.js
//默认暴露,可以暴露任意的数据类型,暴露什么数据接收到的就是什么数据
//export default value;只可以写一次,暴露一次,想要暴露多次内容可以直接暴露对象
/* export default ()=>{
console.log('我是默认暴露的箭头函数');
} */
export default {
msg: '默认暴露',
foo(){
console.log(this.msg);
}
}
3.npm install babel-cli browserify -g//全局安装babel以及browserify
4.babel js/src -d js/build//使用babel编译es6代码到指定文件夹
5.browserify js/build/main.js -o js/dist/bundle.js//编译commonjs的main.js文件到浏览器可以认识的js代码文件
6.打开浏览器执行index.html查看console输出口
7.npm随便安装一个第三方的模块,测试使用,同样第三方的模块无需指定路径,直接使用包名即可