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

最新推荐文章于 2024-08-17 09:45:00 发布

卡不其狼2008

最新推荐文章于 2024-08-17 09:45:00 发布

阅读量417

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/pigg1989/article/details/80944455

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

语法非常简单也是现在最流行的模块化开发模式，虽然ES6已经是标准化但是多数的浏览器是不支持ES6语法的所以在使用浏览器端时，我们需要通过babel将其转化为ES5的js代码，但是经过babel转化的代码是属于CommonJS模块化语法规范的代码，还需要通过browserify转化为浏览器可识别的代码。

项目结构

代码实现

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