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);
stackoverflow
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 ]