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

Question

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

我会描述我做了什么，最后我想要什么。

1. 我使用 TypeScript 输入创建了一个新的 Ionic 2 项目:

   $ ionic start demo sidemenu --v2 --ts
   

2. 我在 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
     }
   }
   

3. 我修改了 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"]
     }
   };
   

4. 我在 WebStorm 11 中打开项目并创建了一个新的 JavaScript 调试配置。在我的例子中，URL 是 http://192.168.1.16:8100 并且在 question 之后，我把整个项目的远程URL设置为webpack:///.，就这样。由于我目前的声誉水平，我无法发布图片，抱歉。

5. 在 WebStorm 的终端选项卡中，我输入了 ionic build，然后输入了 ionic serve，以便在我的默认浏览器(Safari)中编译和提供项目.

6. 我之前安装了带有 JetBrains Chrome 扩展的 Chrome，因此我可以通过点击位于右上角靠近配置框的调试图标来调试应用程序。

如果我在 TypeScript 中放置断点，它不会命中。如果我在转译的 JavaScript 文件(不是捆绑文件)中放置一个断点，它就会被击中。我想做的是直接调试 TypeScript，而不是转译后的文件。有谁知道我做错了什么或遗漏了什么？

注意事项:

• 我想使用视觉断点调试 TypeScript，所以 debugger; 对我没有帮助，因为它仅在转译级别有效(这与我目前使用断点实现的相同)。
• .js 和 .map 文件是为与 TypeScript 文件位于同一文件夹中的每个 .ts 文件生成的。
• 捆绑文件 app.bundle.js 有它自己的 app.bundle.map 文件并且它正在工作，因为调试器在单个转译文件处停止，例如app.js 或 list.js 派生自 app.ts 和 list.js。
• 我在 WebStorm 中使用 TypeScript 的默认配置。我没有添加任何文件观察器，WebStorm 正在使用其捆绑版本的 TypeScript 等。
• 如果我对使用 ES6 的同一个 Ionic 2 项目执行相同的步骤，我可以调试 ES6 原始文件。

• 工具版本:

  $ npm ls -g --depth 0
  /usr/local/lib
  ├── cordova@6.0.0
  ├── ionic@2.0.0-beta.17
  ├── ios-deploy@1.8.5
  ├── ios-sim@5.0.6
  ├── npm@2.14.12
  └── typescript@1.8.2
  

Answer 1

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

当您选择"is"时，将为每个 .ts 文件生成 .js 和 .map 文件。这是错误。应该只有你的 .ts 源文件和一个来自转译的 app.bundle.js 文件及其相关的 app.bundle.map map 文件。