我知道我可以WebStorm通过创建JavaScript Debug配置并将其指向我正在运行的应用程序来调试纯反应应用程序。
我只使用了一个在 WebStorm ( File -> New -> Project -> React App)中创建的简单反应样板应用程序就可以做到这一点
但是我有一个现有项目，它在同一个项目中有一个 Dotnet 后端和一个 React 前端。树看起来像
MyApp
- src
- Controllers
- Models
...
- UIApp
- src
... (react ui parts)
....
我通过首先将所有内容打包在一起npm run distdev然后dotnet run -f net47启动所有内容来运行该项目。但我不知道如何调试 js。
我JavaScript Debug COnfiguration再次在 WebStorm 中创建了一个并将其指向该 url ( localohst:3000)。在窗口Console的选项卡中，Debug我可以看到控制台正在工作，但没有遇到断点。
我正在尝试做的事情可能吗？还是我只需要坚持Source在 Chrome 的选项卡中进行调试
包.json
{
"name": "myapp",
"version": "0.0.1",
"description": "my appn",
"repository": "",
"main": "dist/js/app.js",
"dependencies": {
"axios": "0.16.2",
"babel-polyfill": "6.23.0",
"es6-promise": "4.1.1",
"halogen": "^0.2.0",
"history": "4.6.3",
"immutable": "3.8.1",
"material-ui": "0.18.6",
"moment": "2.18.1",
"query-string": "^4.3.4",
"react": "15.6.1",
"react-addons-css-transition-group": "15.6.0",
"react-addons-update": "15.6.0",
"react-bootstrap": "0.31.0",
"react-bootstrap-table": "4.0.0-beta.1",
"react-datepicker": "0.44.0",
"react-datetime": "2.8.4",
"react-dnd": "2.4.0",
"react-dnd-html5-backend": "2.1.2",
"react-dom": "15.6.1",
"react-dropzone-component": "2.0.0",
"react-proxy": "1.1.8",
"react-redux": "5.0.5",
"react-redux-toastr": "7.0.0",
"react-router": "4.1.1",
"react-router-bootstrap": "0.24.2",
"react-router-dom": "4.1.1",
"react-router-redux": "5.0.0-alpha.6",
"react-s-alert": "1.3.0",
"react-svg-piechart": "1.3.0",
"react-tap-event-plugin": "2.0.1",
"react-tinymce": "^0.5.1",
"react-widgets": "4.0.0-rc.15",
"redux": "3.7.1",
"redux-auth-wrapper": "^1.1.0",
"redux-form": "6.8.0",
"redux-immutablejs": "0.0.8",
"redux-promise": "0.5.3",
"redux-throttle": "0.1.1",
"redux-thunk": "2.2.0",
"redux-tooltip": "0.7.2",
"rest-url-builder": "1.0.6"
},
"devDependencies": {
"babel-core": "6.25.0",
"babel-eslint": "7.2.3",
"babel-plugin-transform-object-rest-spread": "6.23.0",
"babel-plugin-transform-object-assign": "6.22.0",
"babel-plugin-transform-es2015-object-super": "6.24.1",
"babel-plugin-transform-es2015-arrow-functions": "6.22.0",
"babel-plugin-transform-es2015-for-of": "6.23.0",
"babel-preset-es2015": "6.24.1",
"babel-preset-react": "6.24.1",
"babel-plugin-react-transform": "2.0.2",
"babelify": "7.3.0",
"browserify": "14.4.0",
"del": "3.0.0",
"envify": "4.1.0",
"eslint-plugin-react": "7.1.0",
"gulp": "3.9.1",
"gulp-babel": "6.1.2",
"gulp-clean-css": "3.6.0",
"gulp-concat-css": "2.3.0",
"gulp-eslint": "4.0.0",
"gulp-flatten": "0.3.1",
"gulp-header": "1.8.8",
"gulp-if": "2.0.2",
"gulp-rename": "1.2.2",
"gulp-sass": "3.1.0",
"gulp-sourcemaps": "2.6.0",
"gulp-uglify": "3.0.0",
"gulp-util": "3.0.8",
"livereactload": "3.3.0",
"reactify": "1.1.1",
"uglify-js": "3.0.24",
"vinyl-buffer": "1.0.0",
"vinyl-source-stream": "1.1.0",
"watchify": "3.9.0",
"webpack": "3.1.0",
"webpack-stream": "3.2.0"
},
"scripts": {
"clean": "gulp clean",
"lint": "gulp lint",
"distdev": "gulp distUI-dev",
"dist": "gulp distUI",
"watch": "gulp default"
},
"browserify": {
"transform": [
"reactify",
"envify"
]
}
}
gulpfile.babel.js
import gulp from 'gulp';
import babelify from 'babelify';
import browserify from 'browserify';
import del from 'del'
import eslint from 'gulp-eslint';
import gulpif from 'gulp-if';
import sass from 'gulp-sass';
import uglify from 'gulp-uglify';
import buffer from 'vinyl-buffer';
import source from 'vinyl-source-stream';
import sourcemaps from 'gulp-sourcemaps';
import cleanCSS from 'gulp-clean-css';
import concatCss from 'gulp-concat-css';
const paths = {
appBundle: 'appBundle.js',
appBundleMin: 'appBundle.min.js',
srcMain: 'UIApp/src/js/Main.js',
srcSassMain: 'UIApp/src/styles/app.scss',
srcLint: ['UIApp/src/**/*.js', 'UIApp/test/**/*.js'],
srcDocuments:['UIApp/src/documents/*'],
dist: 'wwwroot',
distJs: 'wwwroot/js',
distCss: 'wwwroot/css',
appDistCss:'wwwroot/css/app.css',
distFonts: 'wwwroot/fonts',
distFontAwesome: 'wwwroot/fonts/font-awesome',
distImages: 'wwwroot/images',
distDocuments: 'wwwroot/documents'
};
var debug = true
gulp.task('styles', function() {
gulp.src(paths.srcSassMain)
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(paths.distCss));
});
gulp.task('stylesminify', function() {
gulp.src(paths.srcSassMain)
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sass().on('error', sass.logError))
.pipe(concatCss('app.min.css'))
.pipe(buffer())
.pipe(cleanCSS({debug: debug, processImport: false}, function(details) {
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(paths.distCss))
});
gulp.task('browserify', () => {
browserify(paths.srcMain, {debug: true})
.transform(babelify)
.bundle()
.pipe(source(paths.appBundle))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(gulpif(!debug, uglify()))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(paths.distJs));
});
gulp.task('appuglify', () => {
browserify(paths.srcMain, {debug: true})
.transform(babelify)
.bundle()
.pipe(source(paths.appBundleMin))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(paths.distJs));
});
gulp.task('copyFiles', function() {
// copy css files
gulp.src('UIApp/src/styles/**/*.css')
.pipe(gulp.dest(paths.distCss));
// copy images
gulp.src('UIApp/src/images/**/*')
.pipe(gulp.dest(paths.distImages));
//copy documents
gulp.src('UIApp/src/documents/**/*')
.pipe(gulp.dest(paths.distDocuments));
// copy Fonts
gulp.src('UIApp/src/fonts/**/*')
.pipe(gulp.dest(paths.distFonts));
// copy Font Awesome
gulp.src('UIApp/src/font-awesome/**/*')
.pipe(gulp.dest(paths.distFontAwesome));
gulp.src('UIApp/src/js/common/**/*')
.pipe(gulp.dest(paths.distJs));
});
gulp.task('lint', () => {
gulp.src(paths.srcLint)
.pipe(eslint())
.pipe(eslint.format());
});
gulp.task('distUI-dev', [
'browserify', 'styles', 'copyFiles'
]);
gulp.task('distUI', [
'appuglify', 'stylesminify', 'copyFiles'
]);
gulp.task('clean', function() {
return del([paths.dist]);
});
gulp.task('watch', () => {
gulp.watch(paths.srcLint, ['distUI-dev']);
});
gulp.task('default', ['watch', 'distUI']);