前端生態系統總結

前端正在慢慢領悟學習中...

經常使用模塊、庫、插件備忘　

//DOM操做
react、react-dom
//路由相關
react-router、react-router-dom
//狀態管理
redux、react-redux
//異步邏輯操做
redux-saga

//處理es6和JSX
babel-loader
//處理.css文件
style-loader css-loader

//webpack開發服務器
webpack-cli 
webpack-dev-server
webpack-merge：提供合併操做

//把全部css都打包到一個獨立的文件
extract-text-webpack-plugin
//清理打包後的文件
clean-webpack-plugin
//將打包後的js文件自動導入到html文件中
//1.爲html文件引入外部資源如script、link，並動態添加每次compile後的hash，防止引用緩存的外部文件
//2.生成建立html入口文件，配置N個該plugin能夠生成N個頁面入口
html-webpack-plugin
//靜態檢查代碼的語法和風格
eslint 

express：基於 Node.js 的web應用開發框架
if-env：用於切換開發和生產環境運行 npm start
compression：服務端gzip壓縮　

樣式管理

Autoprefixer：自動管理瀏覽器前綴

經常使用工具

Webpack: 打包工具，模塊化編程
Babel: 轉碼工具，解決在低端版本瀏覽器上的兼容問題
react-devtools: React的調試工具，chrome插件
redux-devtools-extension: Redux調試工具，chrome插件

Babel

必備插件

babel-cli 
babel-core 
babel-preset-env 
babel-preset-react 
babel-preset-stage-2

jest

Mocha + chai + jsdom + sinon + ...

//安裝
npm install --save-dev jest
npm install -g jest
//配置
"jest": {
    "testRegex": "/test/.*.test.jsx?$"
 }
//代碼覆蓋率
jest --coverage

 

React

//斷點調試必備插件（VSCode經過Chrome的debug protocol鏈接到Chrome）
Debugger for Chrome
//調試方法1
npm start --> chrome頁面F12 --> tab頁source中js文件打斷點或加debugger --> 頁面操做
//調試方法2
npm start --> 菜單:啓動調試 -->vscode中代碼文件直接打斷點

須要配置 .vscode\launch.json 文件

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "port": 9222,
      "sourceMaps": true, 
      "webRoot": "${workspaceFolder}"
    },

    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3001",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true, 
      "skipFiles": [
        "node_modules/**"
        ],
        "sourceMapPathOverrides": {
        "webpack:///*": "${webRoot}/*"
        }
    }
  ]
}

擴展瞭解launch.json文件中的屬性

"request"：調試啓動方式，launch:每次從新加載 attach:附加到已有瀏覽窗口

${workspaceRoot}：VSCode中打開文件夾的路徑
${workspaceRootFolderName}：VSCode中打開文件夾的路徑, 但不包含"/"
${file} ：當前打開的文件
${relativeFile}：當前打開的文件,相對於workspaceRoot
${fileBasename} ：當前打開文件的文件名, 不含擴展名
${fileDirname} ：當前打開文件的目錄名
${fileExtname}：當前打開文件的擴展名
${cwd} ：當前啓動時的工做目錄

 

react-devtools + redux-devtools-extension