前端模块化

前端的模块化

前端的模块化是指js文件之间的调用

ES5实现模块化

01.js

//在01.js中创建js方法
const sum = function(a,b){
	return parseInt(a) + parseInt(b);
}

const sub = function(a,b){
	return parseInt(a) - parseInt(b);
}

//设置可以被其他js调用的方法
module.exports = {
	sum,
	sub
}

02.js

//在02.js中调用01.js中的方法
//1. 引入01.js中的方法
const m = require('./01.js')

//2. 调用
console.log(m.sum(11,22));
console.log(m.sub(88,45));

运行02.js

PS E:\VueProject\ES5_Module\js> node .\02.js
33
43

ES6实现模块化

ES6的模块化操作无法在node.js环境中运行，需要使用Babel将其解码成ES5在运行

01.js

//在01.js中创建js方法
export function sum(a,b){
	return parseInt(a) + parseInt(b);
}

export function sub(a,b){
	return parseInt(a) - parseInt(b);
}

02.js

//在02.js中调用01.js中的方法
//引入01.js中的方法
import {sum,sub} from'./01.js'

//调用
console.log(sum(11,22));
console.log(sub(88,45));

直接使用node运行02.js，报错

PS E:\VueProject\Module\es6_js> node .\02.js
E:\VueProject\Module\es6_js\02.js:3
import {sum,sub} from'./01.js'
^^^^^^

SyntaxError: Cannot use import statement outside a module
?[90m    at Module._compile (internal/modules/cjs/loader.js:892:18)?[39m
?[90m    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)?[39m
?[90m    at Module.load (internal/modules/cjs/loader.js:812:32)?[39m
?[90m    at Function.Module._load (internal/modules/cjs/loader.js:724:14)?[39m
?[90m    at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10)?[39m
?[90m    at internal/main/run_main_module.js:17:11?[39m

安装babel环境
https://blog.csdn.net/weixin_43283513/article/details/112408016

将es6代码转为es5：babel es6_js -d dist
此时使用node执行：

E:\VueProject\Module>node dist\02.js
33
43

ES6模块化简写

01.js
export default{
	print(data){
		console.log(data);
	}
}

02.js
//导入
import m from'./01.js'
//调用
m.print("hello");