前端模塊化的相關(guān)規(guī)范

1. 傳統(tǒng)開發(fā)模式的主要問題

• 命名沖突:多個JS文件之間如果存在重名的變量則會存在變量的覆蓋問題

• 文件依賴:JS文件之間無法實現(xiàn)相互的引用

2. 通過模塊化解決上面的問題

• 模塊化就是把單獨的一個功能封裝到一個文件中

• 模塊之間相互隔離廉羔，可以通過指定的接口公布內(nèi)部成員，依賴別的模塊

3. 瀏覽器端模塊化規(guī)范的嘗試

1. 瀏覽器端模塊化規(guī)范(已經(jīng)不用了)

• AMD Require.js

• CMD Sea.js

2. 服務(wù)器端模塊化規(guī)范

• CommonJs(nodeJS還在用這種規(guī)范)

1. 模塊分為單文件模塊與包

2. 導(dǎo)出:module.exports 和 exports

3. 導(dǎo)入:require('模塊標(biāo)志符')

4. 大一統(tǒng)的ES6模塊化規(guī)范

• 值得說明的是崖咨，無論是前端模塊化規(guī)范還是后端的，用的語言都是javascript腾啥，ES6支持了模塊化的寫法 ES6學(xué)習(xí)

• ES6模塊誕生之前沟优，Javascript社區(qū)已經(jīng)嘗試和提出了上面三種模塊化規(guī)范。不過他們存在著一定的差異性剪菱、局限性耙饰、并不是通用的纹笼，今后統(tǒng)一使用ES6規(guī)范就好了

• ES6模塊化的定義

  1. 每個JS都是一個獨立的模塊

  2. 導(dǎo)入模塊使用import關(guān)鍵字

  3. 暴露模塊使用export關(guān)鍵字

Node.js通過Babel體驗ES6模塊化

1. 為什么要用Babel

• Babel是語法轉(zhuǎn)換工具，將高級的有兼容性的JS代碼轉(zhuǎn)換為低級的沒有兼容性的JS代碼苟跪。node.js默認(rèn)支持CommonJS廷痘，對與ES6模塊化規(guī)范支持的并不是很好，所以我們要使用用bebal這個第三方插件件已，更好的使用ES6的高級特性笋额。

2. 安裝babel

• npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node babel基礎(chǔ)入門

1. Babel提供babel-cli工具，用于命令行轉(zhuǎn)碼篷扩。

2. babel-node命令可以直接運行ES6代碼兄猩。cli里附帶安裝，不單獨

3. 如果某些代碼需要調(diào)用Babel的API進行轉(zhuǎn)碼鉴未，就要使用babel-core模塊枢冤。可以用來轉(zhuǎn)碼操作

4. 舉例來說，ES6在Array對象上新增了Array.from方法歼狼。Babel就不會轉(zhuǎn)碼這個方法掏导。如果想讓這個方法運行，必須使用babel-polyfill羽峰，為當(dāng)前環(huán)境提供一個墊片。

5. 根據(jù)你支持的環(huán)境自動決定適合你的Babel語法轉(zhuǎn)換插件

• npm install --save @babel/polyfill

• 項目根目錄創(chuàng)建文件 babel.config.js

• npx babel-node index.js

1. npx 想要解決的主要問題添瓷，就是調(diào)用項目內(nèi)部安裝的模塊梅屉。有了npx我們就不用再用babel-node的相對路徑啟動它了，直接用npx就可以找到并使用這個模塊

• 這些代碼應(yīng)該理解后手打

模塊的導(dǎo)入與導(dǎo)出

• 默認(rèn)導(dǎo)入(import m from './m1.js')與導(dǎo)出 (export default {})

  默認(rèn)導(dǎo)入導(dǎo)出只能使用一次,可以與按需導(dǎo)入導(dǎo)出同時使用

  如果被導(dǎo)入為空鳞贷，返回一個空對象坯汤，不會報錯

• 按需導(dǎo)出export let a = "aaa"與導(dǎo)入import {a} from './m1.js' 按需導(dǎo)出可以改名

• 導(dǎo)入導(dǎo)出的細(xì)節(jié)

  按需導(dǎo)入導(dǎo)出.jpg

webpack解決當(dāng)前web開發(fā)中面臨的困境

• 文件依賴關(guān)系錯綜復(fù)雜

• 靜態(tài)資源請求效率低

• 模塊化支持不友好

• 瀏覽器對高級 Javascript 特性兼容程度較低

1. 概述

• webpack 是一個流行的前端項目構(gòu)建工具（打包工具）。webpack提供了友好的模塊化支持搀愧，以及代碼壓縮混淆惰聂、處理JS兼容問題疆偿、性能優(yōu)化等強大的功能

2. 基本使用

• 新建項目空白目錄，并運行 npm init –y 命令搓幌，初始化包管理配置文件 package.json 新建 src 源代碼目錄 新建 src -> index.html 首頁 初始化首頁基本的結(jié)構(gòu) 運行 npm install webpack webpack-cli –D 命令杆故，安裝 webpack 相關(guān)的包 在項目根目錄中，創(chuàng)建名為 webpack.config.js 的 webpack 配置文件

3. webpack.config.js的配置格式

import ...
module.exports = {
 mode: '',
 entry：  ,
 output:{
 path:
 filename:
 }
 module:{
 rules:[

 ]
 },
 plugins:[],
}

4. webpack loader與plugins

• webpack默認(rèn)只能處理JS文件溉愁，如果要要把其他文件打包到JS文件里面去需要用loader加載处铛，文件包括:
  CSS

  LESS

  SCSS

  PostCSS

  JavaScript (打包處理 JS 文件中的高級語法)

  Image/Font

  Vue

• webpack有很多的插件，可以拓展webpack的功能拐揭，一會在webpack_study里具體說明

5. Vue單文件組件

1. 傳統(tǒng)組件的問題和解決方案

• 全局定義的組件必須保證組件的名稱不重復(fù)

• 字符串模板缺乏語法高亮撤蟆，在 HTML 有多行的時候，需要用到丑陋的 \

• 不支持 CSS 意味著當(dāng) HTML 和 JavaScript 組件化時堂污，CSS 明顯被遺漏

• 沒有構(gòu)建步驟限制家肯，只能使用 HTML 和 ES5 JavaScript, 而不能使用預(yù)處理器（如：Babel）

針對傳統(tǒng)組件的問題，Vue 提供了一個解決方案 —— 使用 Vue 單文件組件盟猖。

2. 基本語法

• <template></tmplate>

• <script></script>

• <style scoped></style>

3. webpack 中配置 vue 組件的加載器

• npm i vue-loader vue-template-compiler -D

• const VueLoaderPlugin = require('vue-loader/lib/plugin')

• { test: /.vue$/, loader: 'vue-loader' }

• new VueLoaderPlugin()

Vue腳手架

1.默認(rèn)方式創(chuàng)建腳手架后的目錄分析

Vue-Cli腳手架文件main.js讨衣、App.vue、index.html扒披、index.js詳解

2.配置文件解析

1. package.json

腳手架配置學(xué)習(xí)1.jpg

腳手架配置學(xué)習(xí)2.jpg

2. main.js

腳手架配置學(xué)習(xí)3.jpg