js模块化-commonjs和es6

àì夳堔傛蜴生んèń 2023-06-29 02:55 112阅读 0赞

# commonjs #

commonjs模块语法

导出模块
    module.exports = xxx
    module.exports.xxx = value
    或者
    exports.xxx = value(推荐使用,没弄清楚区别就全部使用这个,避免同时使用)
    导入模块
    require

## module.exports和exports区别 ##

所有的exports收集到的属性和方法，都赋值给了module.exports。  
当然，这有个前提，就是module.exports本身不具备任何属性和方法。  
如果，module.exports已经具备一些属性和方法，那么exports收集来的信息将被忽略。

module.exports 初始值为一个空对象 \{\}  
exports 是指向的 module.exports 的引用  
require() 返回的是 module.exports 而不是 exports

同时使用module.exports和exports

// 情况1
    module.exports = { a:1}
    exports.b = 2;
    // {a:1}
    console.log(module.exports);
    
    // 情况2
    module.exports.a = 1;
    exports.b = 2;
    // {a:1,b:2}
    console.log(module.exports);

module.exports.xxx = value和exports.xxx = value类似

module.exports.demo1 = function () { 
        console.log("demo1方法")
    }
    
    exports.demo2 = function () { 
        console.log("demo2方法")
    }

# commonjs例子 #

项目目录

commonjs
    	-dist
    	-src
    		-module1.js
    		-module2.js
    		-module3.js
    		-main.js
    	-index.html

module1.js

// 暴露一个对象
    module.exports = { 
        message: "module1",
        demo() { 
            console.log("这是module1的方法")
        }
    }

module2.js

// 暴露一个方法
    module.exports = function () { 
        console.log("这是module2的方法")
    }

module3.js

// 使用exports, 和module1.js相似
    exports.demo = function () { 
        console.log("这是module3的方法")
    }
    
    exports.message = "module3"

main.js

let module1 = require("./module1")
    let module2 = require("./module2")
    let module3 = require("./module3")
    
    console.log(module1.message)
    module1.demo()
    
    module2()
    
    console.log(module3.message)
    module3.demo()

浏览器不能识别main.js中的require语法,需要使用browserify编译  
下载和使用browserify

# 全局安装
    cnpm install browserify -g
    
    # 使用, 进入到commonjs目录下
    browserify ./src/main.js -o ./dist/bundle.js

此时dist目录下,生成了一个bundle.js文件,在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>commonjs</title>
    </head>
    
    <body>
        <script src="./dist/bundle.js"></script>
    </body>
    
    </html>

运行  
![在这里插入图片描述][20200110130657873.png]

# es6 #

es6模块语法

导出模块
    export
    export default
    导入模块
    import xxx from xxx

# es6例子 #

项目目录

es6
    	-dist
    	-build
    	-src
    		-module1.js
    		-module2.js
    		-module3.js
    		-main.js
    	-index.html
    	.babelrc

module1.js

// 分别暴露
    export function foo() { 
        console.log("这是module1的foo方法")
    }
    
    export function bar() { 
        console.log("这是module1的bar方法")
    }

module2.js

// 统一暴露
    function fun1() { 
        console.log("这是module2的fun1方法")
    }
    
    function fun2() { 
        console.log("这是module2的fun2方法")
    }
    
    export {  fun1, fun2 }

module3.js

// 默认暴露
    export default { 
        message: "module3",
        fun() { 
            console.log("这是module3的fun方法")
        }
    }

main.js

// 常规暴露需要确认导入什么
    import {  foo, bar } from "./module1";
    import {  fun1, fun2 } from "./module2";
    // 默认暴露引入方式不同
    import module3 from "./module3";
    
    foo();
    bar();
    fun1();
    fun2();
    console.log(module3.message);
    module3.fun();

这个main.js文件浏览器不能识别，需要编译

1.  使用babel将es6编译为es5的代码，但是包含commonjs语法
2.  使用browserify编译js

安装

# cli含义：command line interface
    cnpm install babel-cli -g
    
    cnpm install babel-preset-es2015 --save-dev

在es6目录下新建.babelrc文件，写入

{ 
        "presets": ["es2015"]
    }

编译js

# 使用babel编译，不用指定到具体js，直接指定一个目录就好
    babel ./src -d ./build
    
    # 使用browserify编译
    browserify ./build/main.js -o ./dist/bundle.js

此时dist目录下,生成了一个bundle.js文件,在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>es6</title>
    </head>
    
    <body>
    
        <script src="./dist/bundle.js"></script>
    </body>
    
    </html>

运行  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5_size_16_color_FFFFFF_t_70]

[20200110130657873.png]: https://img-blog.csdnimg.cn/20200110130657873.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200111204450432.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，112人围观）

还没有评论，来说两句吧...

相关阅读

相关 CommonJS与ES6模块化规范

CommonJS规范 1. 暴露单个关键字 exports.xxx = xxx const sum = (a,b) => {

￡神魔★判官ぃ/ 2023年10月11日 15:19/ 0 赞/ 163 阅读

相关 js模块化-commonjs和es6

commonjs commonjs模块语法导出模块 module.exports = xxx module.exports.xxx = val

àì夳堔傛蜴生んèń/ 2023年06月29日 02:55/ 0 赞/ 113 阅读

相关前端模块化：AMD和CMD，后端模块化：commonJS，ES6模块化

如果你对模块化已经了解，可以直接从第三点开始阅读。一、模块化的概念：在进行项目分析或者编码时，先把项目进行拆分，拆分成很多的类，对象，很多的函数等等。能够提高代码的复用

清疚/ 2023年06月07日 05:43/ 0 赞/ 94 阅读

相关 commonJS和ES6模块化的区别

commonJS和ES6模块化一、简述区别 1.语法差异 2. 什么是运行时加载呢？ 3. 什么是编译时加载或静态加载呢？

朴灿烈づ我的快乐病毒、/ 2022年12月27日 11:07/ 0 赞/ 330 阅读

相关前端模块化(CommonJS、AMD、CMD、ES6模块化区别)

文章目录一、模块化的理解 1.什么是模块? 2.模块化的进化过程 2.1全局function模式 : 将不同的功能封

快来打我*/ 2022年11月14日 15:59/ 0 赞/ 652 阅读

相关前端模块化：CommonJS,AMD,CMD,ES6

模块化的开发方式可以提高代码复用率，方便进行代码的管理。通常一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数。目前流行的js模块化规范有CommonJS、AMD

超、凢脫俗/ 2022年05月29日 04:14/ 0 赞/ 392 阅读

相关一览js模块化：从CommonJS到ES6

> 本文由云+社区发表模块化是指把一个复杂的系统分解到一个一个的模块。模块化开发的优点： (1)代码复用，让我们更方便地进行代码管理、同时也便于后面代码的修改和维护。

港控/mmm°/ 2022年03月30日 14:22/ 0 赞/ 415 阅读

相关 CommonJs、AMD、CMD和ES6模块化

参考文章： https://juejin.im/post/5aaa37c8f265da23945f365c\heading-3 https://segmentfault

灰太狼/ 2022年01月14日 14:15/ 0 赞/ 444 阅读

相关 ES6模块和CommonJS模块相互转换

ES6模块和CommonJS模块相互转换这里写目录标题 ES6模块和CommonJS模块相互转换写在前面 ES6模块和Commo

梦里梦外;/ 2021年07月26日 14:16/ 0 赞/ 846 阅读

相关 ES6 模块化与 CommonJS 模块化区别

ES6 模块化与 CommonJS 模块化区别在最近的项目中关于 ES6 的 import、export 和 CommonJS 中的 module.exports、re...

朱雀/ 2020年07月01日 18:29/ 0 赞/ 997 阅读