技術標籤：前端筆記模組化

前端的模組化

前端的模組化是指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");