Question

我想在OS X中使用WebStorm 11.0.3作为IDE编写带有TypeScript的Ionic 2应用程序。我发现的问题是我无法使用WebStorm中的断点调试TypeScript文件。到目前为止，我只能调试已编译的JavaScript文件。

我将描述我最终做了什么以及我想做什么。

我使用TypeScript输入创建了一个新的Ionic 2项目：
```
$ ionic start demo sidemenu --v2 --ts
```

我在tsconfig.json文件中添加了两个标记："sourceMap": true和"removeComments": false，生成以下文件：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false
  },
  "filesGlob": [
    "**/*.ts",
    "!node_modules/**/*"
  ],
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

我修改了webpack.config.js文件，将devtool: 'source-map'添加到其模块导出部分。最终的配置文件是（不要注意注释行）：

var path = require('path');


module.exports = {
  devtool: 'source-map',
  entry: [
    path.normalize('es6-shim/es6-shim.min'),
    'reflect-metadata',
    path.normalize('zone.js/dist/zone-microtask'),
    path.resolve('app/app')
  ],
  output: {
    path: path.resolve('www/build/js'),
    filename: 'app.bundle.js',
    pathinfo: false, // show module paths in the bundle, handy for debugging
    //devtoolModuleFilenameTemplate        : '[absolute-resource-path]',
    //devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
  },
  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'awesome-typescript',
        query: {
          doTypeCheck: true,
          resolveGlobs: false,
          externals: ['typings/browser.d.ts']
        },
        include: path.resolve('app'),
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        include: path.resolve('node_modules/angular2'),
        loader: 'strip-sourcemap'
      },
      //{
      //  test: /\.js$/,
      //  loader: 'strip-sourcemap'
      //}
    ],
    noParse: [
      /es6-shim/,
      /reflect-metadata/,
      /zone\.js(\/|\\)dist(\/|\\)zone-microtask/
    ]
  },
  resolve: {
    root: ['app'],
    alias: {
      'angular2': path.resolve('node_modules/angular2')
    },
    extensions: ["", ".js", ".ts"]
  }
};

我在WebStorm 11中打开了项目并创建了一个新的JavaScript调试配置。在我的案例中，网址为http://192.168.1.16:8100，在question之后，我将整个项目的远程网址设置为webpack:///.，就是这样。由于我目前的声誉水平，我无法发布图片，抱歉。
在WebStorm的终端选项卡中，我输入ionic build然后ionic serve，以便在我的默认浏览器（即Safari）中编译和提供项目。
我之前使用JetBrains Chrome扩展程序安装了Chrome，因此我可以调试应用程序点击位于配置框附近右上角的调试图标。

如果我在TypeScript中放置一个断点，则不点击。如果我在已编译的JavaScript文件（而不是捆绑文件）中放置一个断点，则会触发它。我想做的是直接调试TypeScript，而不是转换文件。有没有人知道我做错了什么或错过了什么？

注意：

我想使用可视断点TypeScript进行调试，因此debugger;对我没有帮助，因为它仅在转换后的级别上有效（它与我目前通过断点达到的目标相同）。 / LI> 为与文件夹文件相同的文件夹中的每个.js文件生成
.map和.ts个文件。
捆绑文件app.bundle.js有自己的app.bundle.map文件，并且它正在运行，因为调试器会停止从app.js或list.js派生的各个转换文件。 {1}}和app.ts。
我在WebStorm中使用TypeScript的默认配置。我没有添加任何文件观察者，WebStorm正在使用其捆绑版本的TypeScript等。
如果我使用ES6执行相同的Ionic 2项目，我可以调试ES6原始文件。
工具版本：
```
list.js
```

Answer 1

我找到了解决方案。问题是我说是问题WebStorm在Ionic项目打开时问我将TypeScript编译为JavaScript？。我应该说没有。

如果您同意，则会为每个.js文件生成.map和.ts个文件。这是错误。应该只有您的.ts源文件和来自转换的单个app.bundle.js文件及其关联的app.bundle.map映射文件。

在WebStorm 11中使用TypeScript调试Ionic 2项目

1 个答案: