Отладка реагирует веб-приложение, которое является частью Dotnet

1

Я знаю, что я могу отлаживать приложение чистого реагирования в 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

packaage.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']);
  • 0
    не могли бы вы поделиться своими файлами package.json и webpack?
  • 0
    Отладка как это работает только с веб-пакетом? Я использую глоток, чтобы связать, это может быть проблемой тогда
Показать ещё 3 комментария
Теги:
webstorm
rider

1 ответ

1

в вашем файле Gulp, в обозревателе задач, попробуйте применить sourcemaps после uglify. Посмотрите здесь: https://github.com/gulpjs/gulp/blob/master/docs/recipes/browserify-uglify-sourcemap.md

Я думаю, что предоставил бы вам правильные исходные карты, чтобы вы могли отлаживать ваш код.

Вы можете написать отладчик; в вашем коде, чтобы остановить поток.

  • 0
    Извините, я не совсем понимаю. Это похоже на то, что я уже в задаче browserify
  • 1
    Вы можете отлаживать с помощью отладчика; заявление? (даже если это не оригинальный код)
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню