07 . 前端工程化(ES6模組化和webpack打包css,less,scss,圖片,字型,配置Vue元件載入器和釋出專案)
阿新 • • 發佈：2020-11-20
#### 模組化規範
##### 傳統開發模式主要問題
```go
/*
1. 命名衝突
2. 檔案依賴
*/
```
`通過模組化解決上述問題`
```go
/*
模組化就是把單獨的一個功能封裝在一個模組(檔案)中,模組之間相互隔離,
但是可以通過特定的介面公開內部成員,也可以依賴別的模組.
模組化開發好處:
方便程式碼的重用,從而提高開發效率,並且方便後期的維護
*/
```
##### 瀏覽器模組化規範
```go
/*
AMX (Require.js)
CMD (Sea.js)
*/
```
##### 伺服器端模組化規範
```go
/*
CommonJS
1.模組分文單檔案模組與包
2.模組成員匯出: module.exports和exports
3.模組成員匯入: require('模組識別符號')
*/
```
#### ES6模組化
> 在ES6模組化規範之前,Javascript社群已經嘗試並提出了AMD,CMD,CommonJS等模組化規範.
>
> 但是,這些社群提出的模組化標準還是存在一定的差異性與侷限性,並不是瀏覽器與伺服器通用的模組化標準,例如:
```go
/*
AMD和CMD適用於瀏覽器端的JavaScript模組化
CommonnJS適用於伺服器端的JavaScript模組化
*/
```
> 因此,在ES6語法規範中,在語言層面上定義了ES6模組化規範,是瀏覽器與伺服器端通用的模組化開發規範.
`ES6模組化規範中定義`
```go
/*
1. 每個js檔案都是一個獨立的模組
2. 匯入模組成員使用import關鍵字
3. 暴露模組成員使用export關鍵字
*/
```
`推薦使用ES6模組化，因為AMD，CMD侷限使用與瀏覽器端，而CommonJS在伺服器端使用。
ES6模組化是瀏覽器端和伺服器端通用的規範.`
##### Node.js通過babel體驗ES6模組化
`1.安裝babel`
```node
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
npm install --save @babel/polyfill
```
`2.建立babel.config.js`
`在專案目錄中建立babel.config.js檔案。`
` 編輯js檔案中的程式碼如下`
```vue
const presets = [
["@babel/env",{
targets:{
edge:"17",
firefox:"60",
chrome:"67",
safari:"11.1"
}
}]
]
//暴露
module.exports = { presets }
```
`3.建立index.js檔案`
```go
/*
在專案目錄中建立index.js檔案作為入口檔案
在index.js中輸入需要執行的js程式碼，例如：
console.log("ok");
*/
```
`4.使用npx執行檔案`
` 開啟終端，輸入命令：npx babel-node ./index.js`
##### 預設匯出
> 預設匯出語法為export default 預設匯出的成員
```vue
export default {
成員A,
成員B,
.......
},如下：
let num = 100;
export default{
num
}
```
`Example1`
```vue
// 當前檔案模組為m1.js
// 定義私有成員a和c
let a = 10
let c = 20
let d = 30
// 外界訪問不到變數b,因為他沒有被暴露出去
function show() {
console.log('1111')
}
// 將本模組的私有成員暴露出去,供其他模組使用
export default {
a,
c,
show
}
```
##### 預設匯入
> 預設匯入語法import 接受名稱 from '模組識別符號'
```vue
// 匯入模組成員
import m1 from './m1/m1.js'
console.log(m1)
// 列印輸出的結果為:
youmen@bogon Vue_Student_Demo % npx babel-node ./index.js
{ a: 10, c: 20, d: 30, show: [Function: show] }
```
`注意: 每個模組中,只允許使用唯一的一次export default,否則會報錯`
##### 按需匯出
> 按需匯出語法
>
> Export let s1 = 10
```vue
export let num = 998;
export let myName = "jack";
export function fn = function(){ console.log("fn") }
```
`Example`
```vue
// 當前檔案模組為m1.js
// 向外按需匯出變數為s1
export let s1 = 'aaa'
// 向外按需匯出變數為s2
export let s2 = 'ccc'
// 向外按需匯出方法 say
export function say = function() {}
```
##### 按需匯入
> 按需匯入語法
>
> Import { s1 } from '模組識別符號'
```go
import { num,fn as printFn ,myName } from "./test.js"
// 同時匯入預設匯出的成員以及按需匯入的成員
import test,{ num,fn as printFn ,myName } from "./test.js"
// 注意：一個模組中既可以按需匯入也可以預設匯入，一個模組中既可以按需匯出也可以預設匯出
```
`Example1`
```vue
// 匯入模組成員
import { s1,s2 as ss2, say } from './m1.js'
console.log(s1) // 列印輸出aaa
console.log(s2) // 列印輸出ccc
console.log(say) // 列印輸出[Function: say]
```
`直接匯入並執行程式碼`
> 有時候,我們`只想單純執行某個模組的程式碼,並不需要得到模組中向外暴露的成員`,此時,可以直接匯入並執行模組程式碼
```vue
import "./test2.js";
```
`m1.js`
```vue
// 當前檔案模組為m2.js
// 在當前模組中執行一個for迴圈操作
for(let i=0;i<3;i++){
console.log(i)
}
```
#### Webpack概念
##### 當前Web開發面臨的困境
```go
/*
檔案依賴關係錯綜複雜
靜態資源請求效率低
模組化支援不友好
瀏覽器對高階JavaScript特性相容程度較低
*/
```
>