前端工程化學習

三件套入門了以後開始學vue,網上說vue新手友好，我感覺其實也不是，用上vue-cli工具簡直一臉懵，然後看了vue作者的建議貼尤雨溪: 新手如何入門, 看了以後覺得說應該先把vue放一放，學習一下前端工程化以後再回過頭來看可能會好一些，今天是學了前端工程化的第一天，是按照bilibili黑馬程式設計師前端工程化課程學習的,總結今日所學如下：

babel是乙個工具，可以將es6的語法翻譯成es5語法

在瀏覽器中的使用方法為

src=

"browser.min.js"
>
script
>
type
="text/babel"
>
script
>

npm init -y

npm install -d @babel/core @babel/
cli @babel/env @babel/preset
npm install -s @babel/polyfill

const presets =[[

'@babel/env',}
]];module.exports =
;

模組化原因：檔案之間的相互關聯複雜, 命名衝突問題的存在, 模組化可以使得**復用

es6規範之前的模組化規範

在es6模組化規範之前，瀏覽器端的模組化規範為amd, cmd(具體是什麼我不知道～)；伺服器端使用commonjs規範

const**=

require
('****'
)//引入模組
module.exports =
;//暴露模組

當下：es6模組化和commonjs會被使用

es6模組化語法：

import

** form ''
//預設暴露方式下的引入模組
import
form ''
//按需暴露方式下的引入模組
import
'**.js'
//並不引入模組，而是直接執行js檔案
export
default
//預設暴露
export
let a =1;
//按需暴露

乙個前端專案的構建工具（用於打包）

使用方法和一般流程

2.1npm init -y

2.2npn install -d webpack webpack-cli webpack-dev-server html-webpack-plugin

2.3 編寫webpack.config.js檔案

2.4 在package.json中的script屬性中加入

2.5 在命令列中 npm run dev/ npm run devserve

// package.json "script"中

"dev"
:"webpack"
,"devserve"
:"webpack serve --port 1010 --open"

// webpack.config.js

var path =
require
('path');
var htmlplugin =
require
('html-webpack-plugin');
var htmlwebpackplugin =
newhtmlplugin()
;module.exports =
, plugins:
[htmlwebpackplugin]
,}

前端工程化

為什麼出現了前端工程化？09年之前，我們學習的css，div，js只是對頁面設計進行乙個打輔助的功能，當時只能勉強的成為頁面設計師，為什麼會出現前端工程師 1.突然間前端的需求逐漸增多，使用者對介面的要求越來越高，前端範疇越來越大。2.前後端總是保持一致才能進行開發，不能分開開發，提出前端工程化，也...

前端工程化

一 什麼是前端工程化 根據業務特點，將前端開發流程規範化 標準化 包括開發流程 技術選型，規範，構建發布等用於提公升前端工程師開發效率和 質量，提高產品的質量。實現前端工程化的目的 就是通過流程規範 自動化工具來提公升前端的開發效率 效能 質量 多人協作能力以及開發體驗。前端工程化體系分為 元件化 ...

前端工程化

老大考慮到團隊成員學習的曲線，最終選擇thunk 為了更方便團隊人員使用，封裝直接的thunk，和cobinereducer 1 專案分為四大塊，服務治理，資源治理，診斷除錯，分析管理 幾十個元件，不可能將所有的狀態解除安裝乙個reducer裡面來管理 不利於維護 然後因為封裝了元件thunk所以要...