JS模块化 CommonJs规范与ES6规范在浏览器端使用

1. 概念

1.1.什么是模块化：
把所有Js写入一个文件,耦合度高 , Js文件拆分

1.2. 模块化遇到问题

1. 全局变量污染
* 解决闭包
2. 避免命令冲突
冲突依赖，A依赖C A依赖B A依赖B 出错
解决： CommonsJs、ES6规范

1.3.CommonsJs：服务端代表作品，Node.js

2. CommonsJs 在客户端使用

有require语法，浏览器不认识 require 语法，需要转化使用第三方库 browserify

项目结构图：

2.1. 编写客户端代码：
module1.js

// 暴露函数
module.exports=function(){
	console.info("module1....");
}

module2.js

const username="xiaoming";
function cancleHeartBreak() {
 console.info("cancleHeartBreak---->");
}
// 统一暴露，对象，用的最多
module.exports={
   username:username,
   cancleHeartBreak:cancleHeartBreak
}

module3.js

// exports后面 接对象，暴露foo对象
module.exports.foo=function(){
	console.info("module3...");
}

2.2.app.js程序入口，引入模块， index.html不能直接引入script app.js,浏览器不认识 require语法，需要转化

let md1= require("./module1.js");
let md2= require("./module2.js");
let md3= require("./module3.js");

md1();     // 直接暴露函数
md2.cancleHeartBreak(); //暴露对象 ，对象有属性，方法
md3.foo();  // 暴露对象，在exports后面接着

2.3. 浏览器端应用
2.1:npm install -g browserify
2.2:npm install browserify --save-dev
-dev:开发依赖【还有测试依赖、生产依赖】， browserify只是开发的时候帮助打包,指定开发依赖即可
browserif功能：浏览器不认识require
2.3:browserify ./src/app.js -o ./dist/bundle.js 在 commonJs_browser 目录下执行，生成bundle.js

模块使用： index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../dist/bundle.js"></script>
	</head>
	<body>
	</body>
</html>

2.4. 浏览器运行index.html

运行结果：

module1....
bundle.js:21 cancleHeartBreak---->
bundle.js:32 module3...

3. ES6模块模块化依赖在浏览器端：

**es6现在有些浏览器不支持，需要转化es5, es5中有require, 使用browserify 转化

3.1. 项目结构

3.2. 项目文件对应

package.json

{
  "name": "es6browser",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.5"
  },
  "dependencies": {
    "@babel/polyfill": "^7.8.7",
    "jquery": "^1.12.4"
  }
}

src下：
module1.js


// 分别暴露
// 暴露函数
export function foo() {
  console.log('module1 foo()');
}
// 暴露对象
export let bar = function () {
  console.log('module1 bar()');
}
// 暴露数组
export const DATA_ARR = [1, 3, 5, 1]

module2.js

let data = 'module2 data'

function fun1() {
  console.log('module2 fun1() ' + data);
}

function fun2() {
  console.log('module2 fun2() ' + data);
}
// 统一暴露对象
export {fun1, fun2}

module3.json

// 默认暴露

//export default {
//name: 'Tom',
//setName: function (name) {
//  this.name = name
//}
//}

module4.js

// 暴露一个对象
export default ()=>{
	console.info("默认暴露");
}

app.js 引入模块，使用模块函数， app.js 不能直接被浏览器识别

import $ from 'jquery';
 
 // ES6 引入的时候必须是对象解构赋值,如果是分别暴露或者对象暴露
import {foo, bar} from './module1'
import {DATA_ARR} from './module1'
import {fun1, fun2} from './module2'   // 这里必须要用结构赋值
//import person from './module3'
import fun from './module4'

$('body').css('background','red');

foo()
bar()
console.log(DATA_ARR);
fun1()
fun2()

//person.setName('JACK')
//console.log(person.name);

fun();

暴露方式：
1. 分别暴露
2. 统一暴露对象
注意：ES6 引入的时候必须是对象解构赋值

3. 默认暴露
只能暴露一次，暴露对象

3.3. app.js 不能直接被浏览器识别
es6 转化为 es5 ：
1. 安装bable-cli,bable-preset-es2015 和 browsserify
bable-cli: 用于调用bable命令，不下载，无法使用babel命令

babel 官网在线转化es6 转

npm init
安装: https://babeljs.cn/docs/usage 参考改网站

创建babel.config.js 配置文件

const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
      useBuiltIns: "usage",
    },
  ],
];

module.exports = { presets };

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
npx babel ./src -d ./build: es6 转化为 es5 ，生成 build目录文件

browserify ./build/app.js -o ./dist/bundle.js: 把 require 语法去掉，生成bundle.js

下载jquery
cnpm install [email protected] : 下载jquery1.1版本
使用app.js:
import $ from 'jquery';

index.html中使用bundle.js:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	
	</head>
	<body>
	</body>
	<script type="text/javascript" src="dist/bundle.js"></script>
</html>

3.4. 运行 index.html

执行结果；

module1 foo()
bundle.js:42 module1 bar()
bundle.js:19 (4) [1, 3, 5, 1]
bundle.js:60 module2 fun1() module2 data
bundle.js:64 module2 fun2() module2 data
bundle.js:76 默认暴露