TypeScript with Webpack - 显示 JavaScript 但不显示 TypeScript 源映射

Posted 2023-03-13

【中文标题】TypeScript with Webpack - 显示 JavaScript 但不显示 TypeScript 源映射

【英文标题】：TypeScript with Webpack - Shows JavaScript but not TypeScript source maps

【发布时间】：2020-08-03 18:12:09

【问题描述】：

我自己决定将我们的产品 angularjs 代码库迁移到当前，最终目标是迁移到 Angular 2。我的第一步是让 webpack 和 typescript 与代码库一起工作。

javascript 捆绑有效，应用程序可以运行，但如果我将其中一个文件更改为 TypeScript 文件并再次 webpack，应用程序将无法再找到该文件。当我有sourceMap: true 和devtool: 'inline-source-map' 时，我看不到它的源映射。如果我查看bundle.js 输出，我确实在那里看到了我的 TypeScript 类。如果我使用 tsc 手动编译为 JavaScript 并使用 javascript 文件，一切正常，因此任何可能生成的代码都没有问题。

我觉得我错过了什么。

webpack.config.js：

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

const config = 
  entry: './wwwroot/index.js',
  devtool: 'inline-source-map',
  output: 
    path: path.resolve(__dirname, 'wwwroot'),
  filename: 'bundle.js'
  ,
  module: 
    rules: [
      
        test: /\.ts?$/,
        use: [
          'awesome-typescript-loader'
        ],
        exclude: [/node_modules/, /lib/]
      
    ]
  ,
  resolve: 
    extensions: [
      '.ts',
      '.js'
    ]
  ,
  plugins: [
    new webpack.IgnorePlugin(
        resourceRegExp: /^\.\/locale$/
      )
  ],
  externals: []
;

module.exports = config;

index.js - 因为这是一个非常古老的 angularjs 应用程序，它没有一个入口点。 index.js 列出了模块和组件的单独导入。它还包括对打字稿文件的导入

require.context('./app', true,  /^\.\/.*\.ts$/); 

// and a list of modules
import './app/modules/module_a.js';
import './app/modules/module_b.js';
//etc 

tsconfig.json

  "compilerOptions": 
    "sourceMap": true,
    "outDir": "wwwroot",
    "noImplicitAny": false,
    "module": "es6",
    "target": "es5",
    "allowJs": true,
    "lib": [ "dom", "es7" ]
  ,
  "include": [
    "wwwroot/app/*"
    ],
  "exclude": ["**/lib"]

【参考方案1】：

所以事实证明我的问题似乎是 webpack 的工作方式。如果我不尝试从 TypeScript 文件中导入某些内容，它不会加载它并显示源映射。在我从我的 angularjs 应用程序模块导入新的 TypeScript 组件后，它起作用了。