前端生态系统总结

前端正在慢慢领悟学习中...

常用模块、库、插件备忘　

//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