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 默认暴露