在很早之前，我們的前端代碼Javascript缤言，大多都是基于面向過程的形式宝当，并通過在主入口文件（index.html）直接引入。類似于下面這樣
- 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>Document</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>
- index.js
let root = document.getElementById("root")
let header = document.createElement('div')
header.innerText = "header"
let sidebar = document.createElement('div')
sidebar.innerText = "sidebar"
let footer = document.createElement('div')
footer.innerText = 'footer'
let content = document.createElement('div')
content.innerText = 'content'
root.appendChild(header)
root.appendChild(sidebar)
root.appendChild(content)
root.appendChild(footer)
這樣的面向過程的代碼胆萧，雖然也能夠滿足業(yè)務(wù)功能庆揩，但是隨著前端邏輯的日益復(fù)雜，這種形式的構(gòu)建項目方式跌穗，就會變得使單個文件越來越大订晌，不僅不易于維護(hù)，而且還會降低前端應(yīng)用的加載速度蚌吸。為了解決這個問題锈拨，隨著前端項目的發(fā)展，面向?qū)ο蟾搿⒛K化的代碼構(gòu)建方式應(yīng)運而生奕枢。我們再來看下面的代碼
-
src
- index.html
- header.js
- sidebar.js
- content.js
- footer.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>Document</title>
</head>
<body>
<div id="root"></div>
<script src="./js/header.js"></script>
<script src="./js/sidebar.js"></script>
<script src="./js/content.js"></script>
<script src="./js/footer.js"></script>
<script src="./js//index.js"></script>
</body>
</html>
- header.js
function Header () {
let header = document.createElement('div')
header.innerText = "header"
root.appendChild(header)
}
- sidebar.js
function SideBar () {
let sidebar = document.createElement('div')
sidebar.innerText = "sidebar"
root.appendChild(sidebar)
}
- content.js
function Content () {
let content = document.createElement('div')
content.innerText = 'content'
root.appendChild(content)
}
- footer.js
function Footer () {
let footer = document.createElement('div')
footer.innerText = 'footer'
root.appendChild(footer)
}
- index.js
let root = document.getElementById('root')
new Header()
new SideBar()
new Content()
new Footer()
這種面向?qū)ο蟮拇a構(gòu)建形式，結(jié)構(gòu)更加清晰佩微，每一個對象或者模塊缝彬，承載其特定的職責(zé)或任務(wù)，維護(hù)起來就方便的多哺眯。但是與此同時谷浅，也產(chǎn)生了新的問題：
- 首先，主入口同時引入了更多的文件奶卓，造成了頁面的http增多一疯，加載速度變慢。
- 其次寝杖，在index.js中违施，只是實例化了對象互纯，并不能清晰的看出瑟幕，當(dāng)前的模塊來自哪里，代碼的閱讀性很差。
- 再次只盹，很難去排查錯誤辣往，對頁面JS的引入順序有了很強(qiáng)依賴。
為了解決上面的問題殖卑，又出現(xiàn)了ES Module 的模塊進(jìn)入方法
-
src
- index.html
- js
- header.js
- sidebar.js
- content.js
- footer.js
- content.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>Document</title>
</head>
<body>
<div id="root"></div>
<script src="./js/index.js"></script>
</body>
</html>
- index.js
// ES Module 模塊引入方式
import Header from './header'
import SideBar from './sidebar'
import Content from './content'
import Footer from './footer'
new Header()
new SideBar()
new Content()
new Footer()
- header.js
export default function Header () {
let root = document.getElementById('root')
let header = document.createElement('div')
header.innerText = "header"
root.appendChild(header)
}
- sidebar.js
export default function SideBar () {
let sidebar = document.createElement('div')
sidebar.innerText = "sidebar"
root.appendChild(sidebar)
}
- content.js
export default function Content () {
let root = document.getElementById('root')
let content = document.createElement('div')
content.innerText = 'content'
root.appendChild(content)
}
- footer.js
export default function Footer () {
let root = document.getElementById('root')
let footer = document.createElement('div')
footer.innerText = 'footer'
root.appendChild(footer)
}
在瀏覽器中打開index.html文件站削，報錯了：
Uncaught SyntaxError: Unexpected identifier
import Header from './header'
原因在于瀏覽器并不支持ES Module的語法，這時候孵稽，webpack的作用就體現(xiàn)出來了许起。通過webpack，對代碼進(jìn)行翻譯和打包菩鲜，那么瀏覽器就能識別這種語法了
使用Webpack
安裝webpack
- 在當(dāng)前項目下园细，使用
npm init，生成package.json文件接校。 - 在項目目錄下猛频，使用
npm i webapck webpack-cli -D，安裝webpack蛛勉。 -
npx webpack ./js/index.js對index.js文件進(jìn)行打包鹿寻。 - 這時候，在就會在項目中生成
dist目錄和/dist/main.js文件诽凌，在主入口文件index.html中毡熏，引入main.js。 - 回到瀏覽器皿淋，刷新招刹。
這樣我們的瀏覽器就能正確的識別ES Module的語法了。
