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>

运行
在这里插入图片描述

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文件浏览器不能识别，需要编译

使用babel将es6编译为es5的代码，但是包含commonjs语法
使用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