文章目錄

一、前端工程化:

1. 模塊化相關規範:

1.1 模塊化概要:

傳統開發模式的主要問題:
- 命名衝突;
- 文件依賴;

模塊化:

把單獨的一個功能封裝到一個模塊(文件)中, 模塊之間相互隔離, 但是可以通過特性的接口公開內部成員, 也可以依賴別的模塊;
模塊化開發的好處: 方便代碼重用從俄日提升開發效率, 並且方便後期維護;

1.2 瀏覽器模塊化規範:

AMD:

Require.js: http://www.requirejs.cn/

CMD:

Sea.js: https://sea.js.github.io/seajs/docs

1.3 服務端的模塊化規範:

CommonJS規範:

使用require引入其他模塊或者包;
使用exports或者module.exports導出模塊成員;
一個文件就是一個模塊，都擁有獨立的作用域;

1.4 大一統的ES6規範:

在ES6模塊化規範誕生之前, JavaScript社區已經嘗試並提出了AMD, CMD,CommonJS等模塊化規範;但是, 這些規範還存在一定的差異性與侷限性, 並不是瀏覽器與服務端通用的模塊化標準; 因此,ES6語法規範,在語言層面生定義了ES6模塊化規範, 是瀏覽器與服務端通用的模塊化開發規範;

ES6模塊化規範中定義：
- 每一個js文件都是獨立的模塊
- 導入模塊成員使用import關鍵字
- 暴露模塊成員使用export關鍵字

2. Node.js中通過babel體驗ES6模塊化:

babel: 語法轉化模塊, 將符合ES6規範的JavaScript代碼,轉化成基礎的JavaScript代碼;

2.1 安裝與配置babel:

安裝babel:

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
npm install --save @babel/polyfill

在項目的根目錄創建文件babel.config.js
babel.config.js文件的內容:

const presets = [
    ["@babel/env",{
        targets:{
        	//瀏覽器版本
            edge:"17",
            firefox:"60",
            chrome:"67",
            safari:"11.1"
        }
    }]
]
//暴露
module.exports = { presets }

創建index.js文件:
在項目目錄中創建index.js文件作爲入口文件
在index.js中輸入需要執行的js代碼，例如：

console.log("ok");

通過npx babel-node index.js執行代碼;

3. 設置默認導入/導出:

注意:
在一個模塊中，只允許使用export default向外默認暴露一次成員，千萬不要寫多個export default。
如果在一個模塊中沒有向外暴露成員，其他模塊引入該模塊時將會得到一個空對象

3.1 默認導出:

默認導出語法:

export default {
    成員A,
    成員B,
    .......
}

例如:

// m1.js
function show() {}
let num = 100;
export default{
    num,
    show
}

3.2 默認導入:

默認導入語法:

import m1 from './m1.js'

console.log(m1);
// {num: 100, show: [Function: show]}

4.設置按需導入/導出:

4.1 按需導出:

按需導出語法::

export let s1 = 10

例如:

// m1.js

export let num = 998;
export let myName = "jack";
export function fn = function(){ console.log("fn") }

4.2 按需導入:

按需導入語法:

import { s1 } from '模塊標識符'

例如:

import { num,fn as printFn ,myName } from "./test.js"
//同時導入默認導出的成員以及按需導入的成員
import test,{ num,fn as printFn ,myName } from "./test.js"

5. 直接導入並執行代碼:

語法:

import "./test2.js";

例如:

// m1.js
console.log("oooooooo")

// m2.js
import "./m1.js";

二、webpack：

1. 當前web開發面臨的困境：

文件依賴關係錯綜複雜；
靜態資源請求效率低；
模塊化支持不好；
瀏覽器對於高級的JavaScript特性兼容程度比較低；
。。。

2. webpack：

webpack是一個流行的前端項目構建工具(打包工具)，可以解決目前web開發的困境；
webpack提供了模塊化支持，代碼壓縮混淆，解決js兼容問題，性能優化等特性，提高了開發效率和項目的可維護性

3. webpack基本使用:

3.1 基本流程:

新建項目空白目錄, 並運行npm init -y命令, 初始化包管理配置文件 package.json;
新建src源代碼目錄;
新建 src -> index.html首頁;
初始化首頁基本的結構;
運行npm install jquery -S命令, 安裝jQuery
通過模塊化形式, 實現列表各行變色的效果;

目錄結構

01_base
├─node_modules 
│  └─jquery
├─src
│  ├─index.js
│  ├─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">
    <title>隔行變色</title>
    <script src="./index.js"></script>
</head>
<body>
    <ul>
        <li>這是第1個li</li>
        <li>這是第2個li</li>
        <li>這是第3個li</li>
        <li>這是第4個li</li>
        <li>這是第5個li</li>
        <li>這是第6個li</li>
        <li>這是第7個li</li>
        <li>這是第8個li</li>
        <li>這是第9個li</li>
    </ul>
</body>
</html>

// index.js
import $ from 'jquery'

$(function() {
    $('li:odd').css('backgroundColor',  'pink');
    $('li:even').css('backgroundColor',  'lightblue')
})

3.2 使用webpack修復3.1問題:

運行npm install webpack webpack-cli -D命令安裝, 安裝webpack相關包;
在項目根目錄中, 創建名稱 webpack.config.js的webpack配置文件;
在webpack的配置文件中紅,初始化如下基本配置:

module.export = {
	mode: 'development' // 可以設置爲development(開發模式)，production(發佈模式)
}

補充：mode設置的是項目的編譯模式。
- 如果設置爲development則表示項目處於開發階段，不會進行壓縮和混淆，打包速度會快一些
- 如果設置爲production則表示項目處於上線發佈階段，會進行壓縮和混淆，打包速度會慢一些
在package.json配置文件中的scripts節點線下, 新增dev腳本如下:

"scripts": {
	"dev": "webpack"	//scripts節點下的腳本, 可以通npm run執行
}

在終端執行npm run dev命令, 啓動webpack進行項目打包.
將index.html中對index.js的引用修改成dist/main.js的引用

4. 設置webpack的打包入口/出口:

在webpack 4.x中，默認會將src/index.js作爲默認的打包入口js文件默認會將dist/main.js作爲默認的打包輸出js文件;
如果不想使用默認的入口/出口js文件，可以通過改變 webpack.config.js來設置入口/出口的js文件，如下：

const path = require("path");	// 導入node.js中專門操作路徑的模塊
module.exports = {
    mode:"development",
    //設置入口文件路徑
    entry: path.join(__dirname,"./src/index.js"),
    //設置出口文件
    output:{
        //設置路徑
        path:path.join(__dirname,"./dist"),
        //設置文件名
        filename:"bundle.js"
    }
}

dit目錄下生成了bundle.js, 將index.html中的js引用替換成bundle.js;

5. 配置webpack的自動打包功能:

運行npm install webpack-dev-server -D命令, 安裝支持項目自動打包的工具;
修改package.json -> scripts中dev命令, 如下:

"scripts":{
   "dev":"webpack-dev-server"
}

將src -> index,html中, script 腳本的引用路徑修改爲/buldle.js
運行npm run dev命令, 重新進行打包;
在瀏覽器中訪問http://127.0.0.1:8080地址, 查看自動打包效果;
- 注意:
  - webpack-dev-server會啓動一個實時打包的http服務器;
  - webpack-dev-server自動打包的輸出文件，默認放到了服務器的根目錄中;
  - 在自動打包完畢之後，默認打開服務器網頁，實現方式就是打開package.json文件，修改dev命令:
```
"scripts":{
	"dev": "webpack-dev-server --open --host 127.0.0.1 --port 80"
	}
```

6. 配置html-webpack-plugin, 生成預覽頁面:

運行npm install html-webpack-plugin -D命令, 安裝生成預覽頁面的插件;
修改webpack.config.js文件頭部區域, 添加如下配置:

 //導入生成預覽頁面的插件, 得到一個構造函數
const HtmlWebpackPlugin = require("html-webpack-plugin");
//創建對象
const htmlPlugin = new HtmlWebpackPlugin({
    //指定生成預覽頁面的模板文件
    template:"./src/index.html",
    //設置生成的預覽頁面名稱, 該文件將存在於內存中
    filename:"index.html"
})

修改webpack.config.js文件，添加plugins信息:

module.exports = {
   ......
    plugins:[ htmlPlugin ]	// plugins數組是webpack打包區間會用到的一些插件列表
}

運行npm run dev命令, 在瀏覽器中訪問http://127.0.0.1:8080地址, 查看自動打包效果;

7. webpack中的加載器:

7.1 通過loader打包費js模塊:

在實際開發中, webpackmore只能打包處理以.js後綴名結尾的模塊, 其他非.js結尾的模塊, webpack默認是處理不了, 需要使用loader加載器纔可以正常打包, 否則會報錯.

7.2 loader加載器:

loader加載器可以協助webpack打包處理特定的文件模塊:
- less-loader: 可以處理.less相關的文件
- sass-loader: 可以處理.scee相關的文件
- url-loader: 打包處理css中與url路徑有關的文件
- babel-loader: 處理高級js語法的加載器
- postcss-loader
- css-loader,style-loader

7.3 loader的調用過程:

7.4 webpack中接在其的基本使用:

css
less
scss
postcss
JavaScript
image/font
Vue

7.5 打包處理css文件:

運行npm install style-loader css-loader -D命令, 女裝處理css文件的loader;
在webpack.config.js的module -> rules數組中添加loader規則如下:

module.exports = {
   ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test設置需要匹配的文件類型，支持正則
                test:/\.css$/,
                //use表示該文件類型需要調用的loader
                use:['style-loader','css-loader']
            }
        ]
    }
}

注意:
- use 數組中指定的loader順序是固定的;
- 多個 loader 的調用順序是從後往前調用;

7.6 打包處理less文件:

運行npm install less-loader less -D命令;
在webpack.config.js的module -> rules數組中添加loader規則如下:

 module.exports = {
   ......
   plugins:[ htmlPlugin ],
   module : {
       rules:[
           {test:/\.css$/, use:['style-loader','css-loader']},
           {test:/\.less$/, use:['style-loader','css-loader','less-loader']}
       ]
   }
}

在index.js中引用.less文件;

7.7 打包處理scss文件:

運行npm install sass-loader node-sass -D命令;
在webpack.config.js的module -> rules數組中添加loader規則如下:

module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            { test:/\.css$/, use:['style-loader','css-loader'] },
            { test:/\.less$/, use:['style-loader','css-loader','less-loader'] },
            { test:/\.scss$/, use:['style-loader','css-loader','sass-loader'] }
        ]
    }
}

補充：安裝sass-loader失敗時，大部分情況是因爲網絡原因，詳情參考: https://segmentfault.com/a/1190000010984731?utm_source=tag-newest

7.8 配置postCSS, 自動添加css的兼容前綴:

運行npm install postcss-loader autoprefixer -D命令;
在項目中創建postcss的配置文件postcss.config.js, 並初始化一下內容:

const autoprefixer = require("autoprefixer");	// 導入自動添加前綴的插件
module.exports = {
    plugins:[ autoprefixer ]	// 掛載插件
}

在webpack.config.js的module -> rules數組中修改loader規則如下:

module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test設置需要匹配的文件類型，支持正則
                test:/\.css$/,
                //use表示該文件類型需要調用的loader
                use:['style-loader','css-loader','postcss-loader']
            },	
        ]
    }
}

7.9 打包樣式表中的圖片和字體文件:

運行命令npm install url-loader file-loader -D命令;
在webpack.config.js的module -> rules數組中添加loader規則如下:

module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            { test:/\.css$/, use:['style-loader','css-loader'] },
            { test:/\.less$/, use:['style-loader','css-loader','less-loader'] },
            { test:/\.scss$/,  use:['style-loader','css-loader','sass-loader'] },
            { 
            	test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用來設置字節數，只有小於limit值的圖片，纔會轉換爲base64圖片
                use:"url-loader?limit=16940"
            }
        ]
    }
}

7.10 打包js文件中的高級語法:

在編寫js的時候，有時候會使用高版本的js語法;
有可能這些高版本的語法不被兼容，需要將之打包爲兼容性的js代碼

安裝babel轉換器相關的包npm install babel-loader @babel/core @babel/runtime -D
安裝babel語法插件相關的包: npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
在項目根目錄創建並配置babel.config.js文件:

module.exports = {
   presets:["@babel/preset-env"],
   plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
}

在webpack.config.js的module -> rules數組中添加loader規則如下:

module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            { test:/\.css$/, use:['style-loader','css-loader'] },
            { test:/\.less$/, use:['style-loader','css-loader','less-loader'] },
            { test:/\.scss$/, use:['style-loader','css-loader','sass-loader'] },
            { test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use:"url-loader?limit=16940" },
            {
                test:/\.js$/,
                use:"babel-loader",
                //exclude爲排除項，意思是不要處理node_modules中的js文件
                exclude:/node_modules/
            }
        ]
    }
}

三、Vue單文件組件:

1. 傳統組件的問題和解決方案:

1.1 問題:

全局定義的組件必須保證組件的名稱不重複;
字符串模板缺乏語法高亮, 在html有多行的時候,需要用到;
不支持css意味着當html和JavaScript組件化時, css明顯被遺漏;
沒有構建步驟的限制, 只能使用html和es5 JavaScript, 而不能使用預處理器(如:babel);

1.2 解決:

使用Vue單文件組件，每個單文件組件的後綴名都是.vue

每一個Vue單文件組件都由三部分組成:

template組件組成的模板區域;
script組成的業務邏輯區域;
style樣式區域;

<template>

    組件代碼區域

</template>

<script>

    js代碼區域

</script>

<style scoped>

    樣式代碼區域

</style>

2. webpack配置.vue文件的加載器

運行npm install vue-loader vue-template-compiler -D命令, 安裝vue的loader;
在webpack.config.js配置文件中, 添加vue-loader的配置項, 如下:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebpackPlugin({ template:"./src/index.html", filename:"index.html" });
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    mode:"development",
    entry: path.join(__dirname,"./src/index.js"),
    output:{
        path:path.join(__dirname,"./dist"),
        filename:"bundle.js"
    },
    plugins:[ htmlPlugin, new VueLoaderPlugin(), ],
    module : {
        rules:[
            { test:/\.css$/, use:['style-loader','css-loader','postcss-loader'] },
            { test:/\.less$/, use:['style-loader','css-loader','less-loader'] },
            { test:/\.scss$/, use:['style-loader','css-loader','sass-loader'] },
            { test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use:"url-loader?limit=169400" },
            { test: /\.vue$/, use: 'vue-loader'},
        ]
    }
}

注意:
- 實現時遇到了最新版的vue-loader找不到vue-loader/lib/plugin, 解決辦法: 將vue-load版本更換爲"vue-loader": "^15.7.0"

3. 在webpack項目中使用vue:

運行npm install vue -S安裝 vue;
在src -> index.js入口文件中, 通過import Vue from 'vue'來帶入vue構造函數;
創建Vue實例對象, 並制定要控制的el區域;
通過 render函數渲染App根組件:

// index.js
import Vue from 'vue'
import App from './components/App.vue'

const vm = new Vue({
	el: '#app',
	render: h => h(App)
})

注意:
- 此處(index.js)中導入的vue是一個閹割版的vue, 只支持使用render來渲染組件, 不支持components 、template等屬性;

4. 使用webpack打包發佈項目:

在項目上線之前，我們需要將整個項目打包併發布。

配置package.json

"scripts":{
	"dev":"webpack-dev-server",
	"build":"webpack -p"
}

在項目打包之前，可以將dist目錄刪除，生成全新的dist目錄

前端學習之前端工程化(一):ES6模塊化和webpack打包