相关疑难解决方法(0)

我有使用Typescript编写的项目,我希望能够调试它(在Chrome Dev Tools或中Intellij).

起初我看到了Typescript的import功能不受支持.所以我试图用Webpack随webpack dev server但这完全失败了.即使我的应用程序正在运行(由于只有一个bundle.js包含所有代码的文件),它也无法将代码与给定的源映射匹配,这使调试变得不可能.

我停止使用webpack后,我尝试添加require.js作为依赖项来解决require is not defined我得到的错误.这工作但现在我再次陷入困境并得到这个:

未捕获的ReferenceError:未定义导出

我不知道为什么这不起作用.我想让我的应用程序工作(通过webpack或能够在转换后解析import语句)并且仍然能够使用typescript生成的source-maps调试代码.我怎样才能做到这一点？

我正在附加我的配置文件,以防有些东西丢失:

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "sourceMap": true
  },
  "include": [
    "scripts/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

webpack.config.js:

module.exports = {
    resolve: {
        extensions: [/*'.ts', '.tsx', */'.js']
    },
    entry: './scripts/main.js',
    output: {
        path: '/',
        filename: 'app.js'
    },
    module: {
        rules: [
            { test: /\.js$/, loader: 'source-map-loader', enforce: 'pre' …

似乎是一个真正愚蠢的问题，必须在某个地方有答案，但我已经搜索了几个小时但没有结果。我是 ReactJS 和使用 Webpack 构建的新手，一般来说是构建配置。我正在使用 Webpack 链接和捆绑我的整个项目，包括 ReactJS。它工作得很好，但我无法找到任何方法来使捆绑包不缩小，以便我可以在出现问题时进行调试。

这是我的 Webpack 配置：

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'public/js');
var APP_DIR = path.resolve(__dirname, 'build-source/js');

var config = {
  entry: APP_DIR + '\\main.js',
  output: {
    path: BUILD_DIR,
    filename: 'build.js'  // want this output file to end un-minified
  },
  module: {
    loaders: [
      {
        test: /\.jsx?/,
        include: APP_DIR,
        loader: 'babel'
      }
    ]
  }
};

module.exports = config;

npm run dev我使用or运行捆绑执行，npm run build它调用我的 package.json 中的以下内容： …

有没有办法调试JSX文件？

当我检查safari/chrome中的资源选项卡时,我无法看到.jsx文件.我们可以使用调试器吗？

我已经创建了一个适合我的Webpack构建 - 它有一个用于热重新加载的开发服务器,以及一个运行模板html文件并集成该bundle.js文件的生产快速服务器.

这一切都很棒,除非我在我的开发服务器上工作,控制台给我这样的错误消息:

Uncaught Error: Expected the reducer to be a function.(…) bundle.js:36329

它引用bundle.js了错误的来源,而不是我正在使用的组件,这使得很难找到错误的来源.

我知道,只要控制台知道它是bundle.js包含错误的文件,但我怎样才能让控制台记录预捆绑代码？(例如Component.js)

提前致谢.

我正在使用 webpack 来配置源映射。我想知道有人可以澄清“eval”和“eval-source-map”之间的区别吗？我个人看不出有什么区别。