前端非框架开发问题集

2024-02-21 18:48:22

Chrome控制台输出问题

Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive

这是因为Chrome51版本以后，Chrome增加了新的事件捕获机制－Passive Event Listeners

Passive Event Listeners就是告诉前页面内的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为，Chrome浏览器称这类型的监听器为被动（passive）监听器。目前Chrome主要利用该特性来优化页面的滑动性能，所以Passive Event Listeners特性当前仅支持mousewheel/touch相关事件

以前的事件捕获代码如下：

<code>document.addEventListener("click", fn,false/true)</code>

第三个参数决定了fn函数是在冒泡还是捕获阶段触发。
现在第三个参数不但可以是布尔值，还可是一个对象

<code>document.addEventListener(``"mousewheel"``, fn, {passive:` `true``})</code>

React devtool在chrome下没办法使用

某一天不知道怎么react devtool不能正常的显示react的自定义组件结构，*墙工具一时半会也用不了，网上找到通过编译生成需要的React DevTool插件

react devtool官方包地址
下载你电脑环境需要的压缩包，

cnpm  install 
npm run build:extension:chrome
之后会出现以下内容，
> @ build:extension:chrome C:\Users\hp\Desktop\react-devtools-3.3.2
> node ./shells/chrome/build

✓ Preparing build
✓ Building extension - temporary files in shells\webextension\build\chrome
✓ Unpacking extension - artifacts in shells\chrome\build

The Chrome extension has been built!
You can test this build by running:

# From the react-devtools root directory:
yarn run test:chrome

C:\Users\hp\Desktop\react-devtools-3.3.2>yarn run test:chrome
yarn run v1.3.2
$ node ./shells/chrome/test

react-devtools-3.2.1 > shells > chrome 下边多了build 以及下边的 unpacked文件夹,打开chrome://extensions/ 加载已解压的扩展程序指向unpacked文件 ok，记住不要删掉unpacked文件夹

wepack工具下的问题

Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions

  "dependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/runtime": "^7.1.2",
    "axios": "^0.18.0",
    "babel-loader": "^8.0.4",
    "babel-preset-react": "^6.24.1",
  },
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.9.7"
  }

模块版本兼容性问题导致的上述问题

"dependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/runtime": "^7.1.2",
    "axios": "^0.18.0",
    "babel-loader": "^8.0.4",
   
  },
  "devDependencies": {
    "@babel/preset-react": "^7.0.0",
    "clean-webpack-plugin": "^0.1.19",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.9.7"
  }

extract-text-webpack-plugin2.x到3.x的报错

throw new _ValidationError2.default(ajv.errors, name);

*
extract-text-webpack-plugin3.0配置

Composes in Sass/Less

composition is only allowed when selector is single :local class name not in "body :local(.box)"

body{
    background: green;
    .box{
        height: 100px;
        width:200px;
        border:2px solid yellow;
        composes:bigBox from "./base.css";//报错因素
    }   
}

HMR模块热更新出现的错误

Uncaught RangeError: Maximum call stack size exceeded
at hotAddUpdateChunk (main.bundle.js:907)

解决方案：删掉 webpack.config.js里面的 HotModuleReplacementPlugin()调用或者package.json的 --hot即可

ES6模块导入导出问题

You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

//index.js
import BondItem from "./BondItem/BondItem.jsx";
import FundItem from "./FundItem/FundItem.jsx";
import StockItem from "./StockItem/StockItem.jsx";

export  default {//去掉default之后不再报错，ES6语法报错
    BondItem,
    FundItem,
       StockItem
}

//main.js
import {BondItem}

Echarts数据表加载问题

Component series.candlestick not exists. Load it first.

Echart选择性模块导入
参照上述文档缺啥导啥！

npm模块安装出错

This is related to npm not being able to find a file.

483 verbose stack Error: ENOENT: no such file or directory, access 'D:\Project\Private\My_Financial_Control\node_modules\uglify-js\node_modules\yargs'
484 verbose cwd D:\Project\Private\My_Financial_Control
485 verbose Windows_NT 10.0.17134
486 verbose argv "D:\\Applications\\node\\node.exe" "C:\\Users\\hp\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "install" "codemirror" "--save"
487 verbose node v8.11.4
488 verbose npm  v6.4.1
489 error path D:\Project\Private\My_Financial_Control\node_modules\uglify-js\node_modules\yargs
490 error code ENOENT
491 error errno -4058
492 error syscall access
493 error enoent ENOENT: no such file or directory, access 'D:\Project\Private\My_Financial_Control\node_modules\uglify-js\node_modules\yargs'
494 error enoent This is related to npm not being able to find a file.
495 verbose exit [ -4058, true ]

码农公寓