07 . 前端工程化(ES6模塊化和webpack打包css,less,scss,圖片,字體...

2021-01-08 紙鶴視界

模塊化規範

傳統開發模式主要問題

/* 1. 命名衝突 2. 文件依賴*/通過模塊化解決上述問題

/* 模塊化就是把單獨的一個功能封裝在一個模塊(文件)中,模塊之間相互隔離, 但是可以通過特定的接口公開內部成員,也可以依賴別的模塊. 模塊化開發好處: 方便代碼的重用,從而提高開發效率,並且方便後期的維護*/瀏覽器模塊化規範

/* AMX (Require.js) CMD (Sea.js)*/伺服器端模塊化規範

/* CommonJS 1.模塊分文單文件模塊與包 2.模塊成員導出: module.exports和exports 3.模塊成員導入: require('模塊標識符')*/ES6模塊化

在ES6模塊化規範之前,Javascript社區已經嘗試並提出了AMD,CMD,CommonJS等模塊化規範.但是,這些社區提出的模塊化標準還是存在一定的差異性與局限性,並不是瀏覽器與伺服器通用的模塊化標準,例如:

/* AMD和CMD適用於瀏覽器端的JavaScript模塊化 CommonnJS適用於伺服器端的JavaScript模塊化*/因此,在ES6語法規範中,在語言層面上定義了ES6模塊化規範,是瀏覽器與伺服器端通用的模塊化開發規範.

ES6模塊化規範中定義

/* 1. 每個js文件都是一個獨立的模塊 2. 導入模塊成員使用import關鍵字 3. 暴露模塊成員使用export關鍵字*/推薦使用ES6模塊化,因為AMD,CMD局限使用與瀏覽器端,而CommonJS在伺服器端使用。 ES6模塊化是瀏覽器端和伺服器端通用的規範.

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

1.安裝babel

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/nodenpm install --save @babel/polyfill2.創建babel.config.js

在項目目錄中創建babel.config.js文件。編輯js文件中的代碼如下

const presets = [ ["@babel/env",{ targets:{ edge:"17", firefox:"60", chrome:"67", safari:"11.1" } }] ] //暴露 module.exports = { presets }3.創建index.js文件

/* 在項目目錄中創建index.js文件作為入口文件 在index.js中輸入需要執行的js代碼,例如: console.log("ok");*/4.使用npx執行文件

打開終端,輸入命令:npx babel-node ./index.js

默認導出

默認導出語法為export default 默認導出的成員

export default { 成員A, 成員B, ....... },如下: let num = 100; export default{ num }Example1

// 當前文件模塊為m1.js// 定義私有成員a和clet a = 10let c = 20let d = 30// 外界訪問不到變量b,因為他沒有被暴露出去function show() { console.log('1111')}// 將本模塊的私有成員暴露出去,供其他模塊使用export default { a, c, show}默認導入

默認導入語法import 接受名稱 from '模塊標識符'

// 導入模塊成員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

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

// 當前文件模塊為m1.js// 向外按需導出變量為s1export let s1 = 'aaa'// 向外按需導出變量為s2export let s2 = 'ccc'// 向外按需導出方法 sayexport function say = function() {}按需導入

按需導入語法Import { s1 } from '模塊標識符'

import { num,fn as printFn ,myName } from "./test.js" // 同時導入默認導出的成員以及按需導入的成員 import test,{ num,fn as printFn ,myName } from "./test.js"// 注意:一個模塊中既可以按需導入也可以默認導入,一個模塊中既可以按需導出也可以默認導出Example1

// 導入模塊成員import { s1,s2 as ss2, say } from './m1.js'console.log(s1) // 列印輸出aaaconsole.log(s2) // 列印輸出cccconsole.log(say) // 列印輸出[Function: say]直接導入並執行代碼

有時候,我們只想單純執行某個模塊的代碼,並不需要得到模塊中向外暴露的成員,此時,可以直接導入並執行模塊代碼

import "./test2.js";m1.js

// 當前文件模塊為m2.js// 在當前模塊中執行一個for循環操作for(let i=0;i<3;i++){ console.log(i)}Webpack概念

當前Web開發面臨的困境

/* 文件依賴關係錯綜複雜 靜態資源請求效率低 模塊化支持不友好 瀏覽器對高級JavaScript特性兼容程度較低*/webpack是一個流行的前端項目構建工具,可以解決目前web開發的困境。 webpack提供了模塊化支持,代碼壓縮混淆,解決js兼容問題,性能優化等特性,提高了開發效率和項目的可維護性

WebPack的基本使用

/* 1.創建列表隔行變色項目 新建項目空白目錄,並運行npm init -y 命令, 初始化包管理配置文件package.json 2.新建src原始碼目錄 3.新建src/index.html首頁 4. 初始化首頁基本結構 5. 運行 npm install jquery -s 命令,安裝jQuery 導入jQuery 打開index.js文件,編寫代碼導入jQuery並實現功能: import $ from "jquery"; $(function(){ $("li:odd").css("background","cyan"); $("li:odd").css("background","pink"); }) 6. 通過模塊化形式,實現列表隔行變色效果*/注意:此時項目運行會有錯誤,因為import $ from "jquery";這句代碼屬於ES6的新語法代碼,在瀏覽器中可能會存在兼容性問題 所以我們需要webpack來幫助我們解決這個問題。

項目中配置webpack

/* 1).打開項目目錄終端,輸入命令: npm install webpack webpack-cli -D 2).然後在項目根目錄中,創建一個 webpack.config.js 的配置文件用來配置webpack 在 webpack.config.js 文件中編寫代碼進行webpack配置,如下: module.exports = { mode:"development"//可以設置為development(開發模式),production(發布模式) } 補充:mode設置的是項目的編譯模式。 如果設置為development則表示項目處於開發階段,不會進行壓縮和混淆,打包速度會快一些 如果設置為production則表示項目處於上線發布階段,會進行壓縮和混淆,打包速度會慢一些 3).修改項目中的package.json文件添加運行腳本dev,如下: "scripts":{ "dev":"webpack" } 注意:scripts節點下的腳本,可以通過 npm run 運行,如: 運行終端命令:npm run dev 將會啟動webpack進行項目打包 4).運行dev命令進行項目打包,並在頁面中引入項目打包生成的js文件 打開項目目錄終端,輸入命令: npm run dev 等待webpack打包完畢之後,找到默認的dist路徑中生成的main.js文件,將其引入到html頁面中。 瀏覽頁面查看效果。*/ 設置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/xx.js"), //設置出口文件 output:{ //設置輸出文件路徑 path:path.join(__dirname,"./dist"), //設置輸出文件名稱 filename:"res.js" } }Webpack的自動打包

/* 1. 運行npm install webpack-dev-server -D 命令,安裝支持項目自動打包的工具 2. 修改package.json --> scripts中的dev命令如下 "scripts": { "dev": "webpack-dev-server" // script節點下的腳本,可以通過npm run執行 } 3. 將src --> index.html中,script腳本的引用路徑,修改為 "/buldle.js" 4. 運行npm run dev命令, 重新進行打包 5. 瀏覽器中訪問http://localhost:8080地址,查看自動打包效果*/注意

/* webpack-dev-server 會啟動一個實時打包的http伺服器 webpack-dev-server 打包生成的輸出文件,默認放到了項目根目錄中,而且是虛擬機的,看不見的 在自動打包完畢之後,默認打開伺服器網頁,實現方式就是打開package.json文件,修改dev命令: "dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"*/配置默認預覽頁面

使用html-webpack-plugin 可以生成一個預覽頁面。因為當我們訪問默認的 http://localhost:8080/的時候,看到的是一些文件和文件夾,想要查看我們的頁面 還需要點擊文件夾點擊文件才能查看,那麼我們希望默認就能看到一個頁面,而不是看到文件夾或者目錄。 實現默認預覽頁面功能的步驟如下:

A.安裝默認預覽功能的包:html-webpack-plugin npm install html-webpack-plugin -D B.修改webpack.config.js文件,如下: //導入包 const HtmlWebpackPlugin = require("html-webpack-plugin"); //創建對象 const htmlPlugin = new HtmlWebpackPlugin({ //設置生成預覽頁面的模板文件 template:"./src/index.html", //設置生成的預覽頁面名稱,該文件存在於內存中,在目錄中不顯示 filename:"index.html" }) C.繼續修改webpack.config.js文件中向外暴露的配置對象,添加plugins信息: module.exports = { ...... plugins:[ htmlPlugin ] // plugins數組是webpack打包期間會用到的一些插件列表 }Webpack中的加載器

通過loader打包非js模塊

通過loader打包非js模塊:默認情況下,webpack只能打包js後綴名結尾的文件,如果想要打包非js文件,需要調用loader加載器才能打包.

Loader加載器包含

/* 1).less-loader: 處理.less相關文件 2).sass-loader: 處理.scss相關文件 3).url-loader: 打包處理css中與url路徑有關的文件 4).babel-loader:處理高級js語法的加載器 5).postcss-loader 6).css-loader,style-loader*/loader調用過程

webpack中加載器的基本使用

打包處理css文件

/* 運行npm i style-loader css-loader -D 命令, 安裝處理的css文件的loader*/2. 在webpack.config.js的module --> rules 數組中,添加loader規則如下

// 所有第三方文件模塊的匹配規則 module: { rules: [ { test: /\.css$/,use: ['style-loader','css-loader'] } ] }// 其中, test表示匹配的文件類型, use表示對應要調用的loader注意

/* use數組中指定的loader順序是固定的. 多個loader的調用順序是: 從後往前調用*/處理less文件

1).安裝包 npm install less-loader less -D2).配置規則:更改webpack.config.js的module中的rules數組module.exports = { // 編譯模式 mode: 'development', // development production entry: path.join(__dirname, './src/index.js'), output: { path: path.join(__dirname, './dist'), // 輸出文件的存放路徑 filename: 'bundle.js' // 輸出文件的名稱 }, plugins: [htmlPlguin], module: { rules: [ { test: /\.css$/,use: ['style-loader','css-loader'] }, { test: /\.less$/,use: ['style-loader','css-loader','less-loader' ]} ] }}打包處理scss文件

npm i sass-loader node-sass -D// 在webpack.connfig.js的module->rules數組中,添加loader規則如下module: { rules: { { test: /\.scss$/,use: ['style-loader','css-loader','sass-loader'] } }}配置postcss自動添加css的兼容前綴

1).安裝包 npm install postcss-loader autoprefixer -D2).在項目根目錄創建並配置postcss.config.js文件const autoprefixer = require("autoprefixer");module.exports = { plugins:[ autoprefixer ]}3).配置規則:更改webpack.config.js的module中的rules數組module.exports = { ...... plugins:[ htmlPlugin ], module : { rules:[ { //test設置需要匹配的文件類型,支持正則 test:/\.css$/, //use表示該文件類型需要調用的loader 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'] } ] }}打包樣式表中的圖片以及字體文件

// 在樣式表css中有時候會設置背景圖片和設置字體文件,一樣需要loader進行處理// 使用url-loader和file-loader來處理打包圖片文件以及字體文件1).安裝包 npm install url-loader file-loader -D2).配置規則:更改webpack.config.js的module中的rules數組module.exports = { ...... plugins:[ htmlPlugin ], module : { rules:[ { //test設置需要匹配的文件類型,支持正則 test:/\.css$/, //use表示該文件類型需要調用的loader 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" } ] }}打包js高級語法

/* 在編寫js的時候,有時候我們會使用高版本的js語法 有可能這些高版本的語法不被兼容,我們需要將之打包為兼容性的js代碼 我們需要安裝babel系列的包 A.安裝babel轉換器 npm install babel-loader @babel/core @babel/runtime -D B.安裝babel語法插件包 npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D C.在項目根目錄創建並配置babel.config.js文件*/ module.exports = { presets:["@babel/preset-env"], plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ] }// D.配置規則:更改webpack.config.js的module中的rules數組module.exports = { // 編譯模式 mode: 'development', // development production entry: path.join(__dirname, './src/index.js'), output: { path: path.join(__dirname, './dist'), // 輸出文件的存放路徑 filename: 'bundle.js' // 輸出文件的名稱 }, plugins: [htmlPlguin], 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=16941' }, { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ } ] }}Vue單文件組件

傳統Vue組件的缺陷

全局定義的組件不能重名,字符串模板缺乏語法高亮,不支持css(當html和js組件化時,css沒有參與其中) 沒有構建步驟限制,只能使用H5和ES5,不能使用預處理器(babel)

解決方案

/* 使用Vue單文件組件,每個單文件組件的後綴名都是.vue 每一個Vue單文件組件都由三部分組成 1).template 組件組成的模板區域 2).script 組成的業務邏輯區域 3).style 樣式區域*/Example

<template> 組件代碼區域</template><script> js代碼區域</script><style scoped> 樣式代碼區域</style>安裝Vetur插件可以使得.vue文件中的代碼高亮

配置.vue文件的加載器

// A.安裝vue組件的加載器 npm install vue-loader vue-template-compiler -D// B.配置規則:更改webpack.config.js的module中的rules數組 const VueLoaderPlugin = require("vue-loader/lib/plugin"); const vuePlugin = new VueLoaderPlugin(); module.exports = { ...... plugins:[ htmlPlugin, vuePlugin ], module : { rules:[ ...//其他規則 { test:/\.vue$/, loader:"vue-loader", } ] }}Webpack中使用Vue

想要讓vue單文件組件能夠使用,我們必須要安裝vue並使用vue來引用vue單文件組件。

/* A.安裝Vue npm install vue -S B.在index.js中引入vue:import Vue from "vue" C.創建Vue實例對象並指定el,最後使用render函數渲染單文件組件 const vm = new Vue({ el:"#first", render:h=>h(app) })*/Webpack打包發布項目

在項目上線之前,我們需要將整個項目打包並發布

/* A.配置package.json "scripts":{ "dev":"webpack-dev-server", "build":"webpack -p" } B.在項目打包之前,可以將dist目錄刪除,生成全新的dist目錄 */

相關焦點

  • 前端工程化以及如何通過Node.js中babel來編譯es6模塊化代碼
    瀏覽器端模塊化方式二,是伺服器端模塊化規範 ,主要運用CommonJS進行模塊化開發 ,CommonJS將模塊分為單文件模塊與 包 ,模塊成員導出通過module.exports 和 exports ,模塊成員導入通過require('模塊標識符')來進行模塊化開發ES6模塊化上面這些都是在 ES6 模塊化規範誕生之前,Javascript
  • webpack的異步加載原理及分包策略
    由此可見,此時 webpack 把 main.js 依賴的兩個文件都同時打包到同一個 js 文件,並在 index.html 中引入。/A.js'),把 A.js 分割出去,形成一個 webpack 打包的單獨 js 文件。
  • 你是怎麼理解前端工程化的?
    本文轉載自【微信公眾號:前端人,ID:FrontendPeople】經微信公眾號授權轉載,如需轉載與原文作者聯繫什麼是前端工程化?工程化是一種思想,而不是某種技術。其主要目的為了提高效率和降低成本,即提高開發過程中的開發效率,減少不必要的重複工作時間等慄子要蓋一棟大樓,假如我們不進行工程化的考量那就是一上來踮起瓦刀、磚塊就開幹,直到把大樓壘起來,這樣做往往意味著中間會出現錯誤,要推倒重來或是蓋好以後結構有問題但又不知道出現在哪誰的責任甚至會在某一天轟然倒塌。
  • 你應該知道的前端小知識
    2.使用css寫出一個三角形角標元素寬高設置為0,通過border屬性來設置,讓其它三個方向的border顏色為透明或者和背景色保持一致,剩餘一條border的顏色設置為需要的顏色。3.水平垂直居中我一般只使用兩種方式 定位 或者 flex,我覺得夠用了。父級控制子集居中4. css一行文本超出...
  • 全面掌握CSS基本知識點
    第四等:代表標籤選擇器和偽元素選擇器,如div、p ,權值0001通配符、子選擇器、相鄰選擇器。作用是能夠提供一個有效的幫助我們管理一個容器中子元素的排列、對齊和分配空白空間。,不僅僅是直接比較兩個元素的z-index值的大小,堆疊順序和層疊上下文、層疊等級共同決定。
  • JavaScript中常用es6語法整理總結
    1.let(變量) 與 const(常量)在es6中我們通常用let來定義變量和const來定義常量 ,它們都是塊級作用域 ,在同一個代碼塊中不允許重複聲明它們的特點與var的區別:var在JavaScript中之前定義變量,我們用 var
  • 餓了麼公司前端團隊開源前端基於 Vue的桌面端組件庫-Element
    Element,一套為開發者、設計師和產品經理準備的基於 Vue 2.0 的組件庫,提供了配套設計資源,幫助你的開發快速成型。由餓了麼公司前端團隊開源。開源版本持續更新至2.3.2版;設計原則一致性 Consistency與現實生活一致:與現實生活的流程、邏輯保持一致,遵循用戶習慣的語言和概念;在界面中一致:所有的元素和結構需保持一致,比如:設計樣式、圖標和文本、元素的位置等。
  • Webpack命令字典大全
    全局進行安裝webpack(熟手不建議)$ npm install webpack -g查看wepback版本信息 相當有用$ npm info webpack卸載wepback$ npm uninstall webpack安裝指定版本 #=小老鼠$ npm install webpack
  • css font-family屬性設置元素的字體
    font-family屬性定義及用法在css中,font-family屬性是使用來規定元素的字體系列,把多個字體名稱作為一個「回退」系統來保存,如果瀏覽器不支持第一個字體,則會嘗試下一個。有兩種類型的字體系列名稱:指定的系列名稱:具體字體的名稱,比如:"times"、"courier"、"arial"。
  • 前端Web開發人員的CSS相對字體大小
    在本文中,我們將看幾種不同的方式,前端Web開發人員可以使用CSS操作其網頁的字體。網頁設計中最大的混亂之一是由font-size屬性造成的。在CSS中,可以使用多個單元,這只會導致設計人員額外頭痛。在本文中,我們將闡明這些單位的用法和任何誤解。PX Unit最常見和最受歡迎的單位是像素(像素)單位。
  • Vue+Axios+Vuex+Vux+Vue-Router全家桶搭建前端框架
    不知從何時起,前端開發變成一件工程化的事情,曾經的紅極一時的Jquery如今也慢慢退出歷史的舞臺,取而代之的是更前沿的技術;前端框架層出不窮,Angular 2+,React + Redux,Dojo 2,Vue。。。等等,太多了,那我們如何在這繁雜的框架中選擇一個合適的呢?
  • Meta CSS框架發布
    在深入介紹之前,我們來考慮幾個web開發者非常容易遇到的問題:  同樣的一個款式的按鈕,有些頁面它要在左邊,但是有些頁面要在右邊  同樣作用的一段提示文字,有些地方字體要大號,有些卻要小號  同樣風格的一段文字,有些要紅色,有些卻要綠色  這樣的狀況是相當頻繁的。
  • ES6 常用知識匯總,ES6模塊化如何使用,開發環境如何打包?
    ES6模塊化如何使用,開發環境如何打包?1.模塊化的基本語法/* export 語法 */// 默認導出export default {a: '我是默認導出的',}// 單獨導出export function fn1() {console.log('我是函數1')}export function
  • 10個驚人的復古CSS套件
    作者:杭州程式設計師小張來源:今日頭條|2020-12-24 07:02 是否想發現可在下一個項目中使用的非典型
  • 上微前端後,我司的祖傳代碼有救了
    楊昊一: 我一直覺得使用什麼技術一定要用最適合自己的,不能僅僅因為微前端很火就強行給自己的項目上這個技術。我們應用微前端技術是因為業務發展到了一定程度很自然的就想到需要用微前端來解決各種代碼開發、項目需求的問題。再比如那種需要很模塊化組裝頁面的網站也就非常適合使用微前端。
  • SDCC 2015前端專場札記:Facebook、百度、騰訊、美團、餓了麼等...
    核心思想還是共享運算資源,具體原理沒有細聽,目的是取代webpack 和 browserify, 正式投產後會完全開源,github見。餓了麼資深前端架構師兼大前端團隊負責人林建鋒  :ELE.ME是如何運行的來自餓了麼的林建鋒也就是sofish魚哥分享的內容是餓了麼在前段工程化上的一些實踐。
  • 前端妹子和後臺漢子似乎是一對不錯的CP組合?
    從今天開始就要進入前端的學習了。總感覺前端+後臺似乎是個不錯的cp組合。你看啊後臺一般以男生居多。而前端呢?據說妹子也不少。那做後臺開發的為何還找不到女朋友?找個前端妹子不就好了麼?話不多說,開始前端的學習,資料庫也好,前端也罷只學一個皮毛,畢竟還是以Java為主。一、html介紹全稱:hyper text markup language,也就是超文本標記語言。
  • Web前端和後端有什麼區別(下)
    此處提到的 css不包括css3,通常我們看到在 web前端開發工程師的需求中,會有一個 css+ html或 css+ div用於界面布局,所以 css是用來幫助 html進行布局和顯示的,我們稱之為「css+ div」,為什麼要說 css+ div?由於我在上面說過, div是 html中主要用來布局的,所以 div是最重要的。