在很早之前，我们的前端代码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)
这样的面向过程的代码，虽然也能够满足业务功能，但是随着前端逻辑的日益复杂，这种形式的构建项目方式，就会变得使单个文件越来越大，不仅不易于维护，而且还会降低前端应用的加载速度。为了解决这个问题，随着前端项目的发展，面向对象、模块化的代码构建方式应运而生。我们再来看下面的代码
-
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()
这种面向对象的代码构建形式，结构更加清晰，每一个对象或者模块，承载其特定的职责或任务，维护起来就方便的多。但是与此同时，也产生了新的问题：
- 首先，主入口同时引入了更多的文件，造成了页面的http增多，加载速度变慢。
- 其次，在index.js中，只是实例化了对象，并不能清晰的看出，当前的模块来自哪里，代码的阅读性很差。
- 再次，很难去排查错误，对页面JS的引入顺序有了很强依赖。
为了解决上面的问题，又出现了ES Module 的模块进入方法
-
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的作用就体现出来了。通过webpack，对代码进行翻译和打包，那么浏览器就能识别这种语法了
使用Webpack
安装webpack
- 在当前项目下，使用
npm init，生成package.json文件。 - 在项目目录下，使用
npm i webapck webpack-cli -D，安装webpack。 -
npx webpack ./js/index.js对index.js文件进行打包。 - 这时候，在就会在项目中生成
dist目录和/dist/main.js文件，在主入口文件index.html中，引入main.js。 - 回到浏览器，刷新。
这样我们的浏览器就能正确的识别ES Module的语法了。
