javascript模块化编程05ES6模块化编程规范

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随便安装一个第三方的模块,测试使用,同样第三方的模块无需指定路径,直接使用包名即可

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值