我们有一个相当大的React项目。
目前，当我们尝试从Chrome这样的浏览器中调试它时，它看起来如下。
!function(){var r,n,e=(n={}
,__webpack_require__.m=r=[function(e,t)
{e.exports=PropTypes},function(e,t)
{e.exports=React},function(e,t,r)
{"use strict";function _typeof(e)
现在这只是它的一部分，有1000行和1000行。
当我尝试放置断点进行调试时，我最终得到的是缩小版，如：
var a = b.l - c.m
发现它非常不可读，很难确定它指向的是代码的哪一部分。
有没有办法，比如package.json中的设置。
我可以将其设置为在执行调试工作时不显示缩小版本。
请显示我编写的es6代码。
我使用Webstorm，但不知何故，当我从那里调试它时，它非常慢，而且即使我明显通过了断点，断点也不会总是命中。
因此非常不可靠。
感谢任何帮助/建议。如何有效地调试React项目？
有没有办法添加设置以在调试期间不缩小？(本地主机和生产(
--更新--
软件包.json
{
"name": "myproj",
"version": "1.00.0",
"license": "SEE LICENSE IN LICENSE",
"scripts": {
"start": "npm run build && one-run --env domain.com",
"prebuild": "npm run clean",
"build": "rimraf build && bundle-shop-app --clientConfig webpack/client.config.js --serverConfig webpack/server.config.js",
"clean": "rimraf build",
"lint": "eslint --ignore-path .eslintignore --ext js,jsx,snap,md .",
"prepare": "npm run build",
"pretest:browser": "npm run build",
"test:unit": "jest --testPathIgnorePatterns browser a11y",
"test:a11y": "jest a11y --collectCoverage false",
"test": "npm run test:unit",
"posttest": "npm run lint",
"watch:test": "npm run test:unit -- --watch",
"watch:build": "npm run build -- --watch",
"githook:pre-commit": "npm run test",
"githook:commit-msg": "commit-msg"
},
"deploy": {
"from": "storybook-static",
"to": "static",
},
"one": {
"runner": {
"module": [
"."
],
"envVars": {
"KEY": "root"
}
},
"risk": {
"level": "low"
}
},
"jest": {
"preset": "jest-preset-react",
"setupFiles": [
"./test-setup.js"
]
},
"dependencies": {
"classnames": "2.2.6",
"css-loader": "2.1.1",
"focus-visible": "^5.0.2",
"immutable": "^3.7.6",
"lodash": "^4.17.20",
"moment": "^2.29.1",
"prop-types": "^15.7.2",
"react": "^16.14.0",
"react-helmet-async": "^1.0.4",
"react-intl": "^2.2.3",
"react-redux": "^7.0.0",
"react-router": "^3.0.0",
"react-swipeable": "5.5.1",
"redux": "^4.0.0",
"reselect": "^4.0.0",
"style-loader": "^2.0.0"
},
"devDependencies": {
"@babel/polyfill": "^7.4.4",
"babel-preset-amex": "^3.0.0",
"concurrently": "^6.0.0",
"enzyme": "^3.3.0",
"enzyme-to-json": "^3.3.0",
"eslint": "^6.0.0",
"eslint-config-amex": "^11.0.0",
"githook-scripts": "^1.0.1",
"jest": "^24.0.0",
"jest-image-snapshot": "^4.0.0",
"markdown-spellcheck": "^1.3.1",
"react-dom": "^16.14.0",
"react-test-renderer": "^16.14.0",
"underscore": "^1.9.1"
},
"publishConfig": {
"registry": ""
}
}
这3个文件都在webpack文件夹中。
base.config.js
const oneMegabyte = 10000000;
module.exports = {
resolve: {
symlinks: false,
},
performance: {
maxEntrypointSize: oneMegabyte,
maxAssetSize: oneMegabyte,
},
};
client.config.js
const path = require('path');
const { cssLoader, sassLoader } = require('domain-cli/webpack/configs');
const base = require('./base.config');
const { name } = require('../package.json');
module.exports = {
...base,
module: {
rules: [
{
test: /.s?css$/,
include: [
path.join(__dirname, '../src'),
path.join(__dirname, '../node_modules'),
],
oneOf: [
{
resource: /domain-components/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
sassLoader(),
],
},
{
use: [
{ loader: 'style-loader' },
cssLoader({ name }),
sassLoader(),
],
},
],
},
],
},
};
server.config.js
const path = require('path');
const { cssLoader, sassLoader } = require('domain-cli/webpack/configs');
const base = require('./base.config');
const { name } = require('../package.json');
module.exports = {
...base,
module: {
rules: [
{
test: /.s?css$/,
include: [
path.join(__dirname, '../src'),
path.join(__dirname, '../node_modules'),
],
oneOf: [
{
resource: /domain-components/,
use: [
{
loader: 'bundler/webpack/ssr-css-loader', options: { name },
},
{ loader: 'css-loader' },
sassLoader(),
],
},
{
use: [
{
loader: 'bundler/webpack/ssr-css-loader', options: { name },
},
cssLoader({ name }),
sassLoader(),
],
},
],
},
],
},
};
在开发过程中，您需要在webpack配置中启用源映射。
源代码映射是在源代码(原始(和生成代码之间创建映射的文件。换句话说，生成的代码中的一行表示源代码的哪一行是由源映射决定的。