标签: source-maps

当我在 webpack 中使用 Cheap-module-eval-source-map 作为 devtool 时，我必须在 tsconfig.json 中打开 --inlineSourceMap 而不是 --sourceMap 吗？

我正在 Haskell 中实现一个编译器，将源语言编译为目标语言（类似汇编）。

出于调试目的，需要源映射将目标语言汇编指令映射到其相应的源位置（行和列）。

我已经广泛搜索了编译器实现，但没有一个包含源映射。

谁能指出我如何生成源地图的正确方向？

代码示例、书籍等。Haskell 优先，其他语言也欢迎。

我有一个大型 Node.js 应用程序。它管理 HTTP REST 请求。它是用打字稿写的。我能够毫无问题地编译和运行该应用程序。在 VSCode 中，我有一个预启动任务，它基本上编译代码。

当我想调试应用程序或尝试使用 vscode 在其中添加断点时，它会给出类似的错误消息，如下所示：

Could not read source map for file:///Users/user/Developer/yoauto/engine/node_modules/@google-cloud/paginator/build/src/resource-stream.js: ENOENT: no such file or directory, open '/Users/user/Developer/yoauto/engine/node_modules/@google-cloud/paginator/build/src/resource-stream.js.map'

请在下面找到我的 tsconfig.json 和 launch.json：

{
  "compilerOptions": {
    "outDir": "dist/",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "strictBindCallApply": true,
    "allowJs": false,
    "checkJs": false,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "importHelpers": true,
    "noEmitHelpers": true,
    "lib": ["dom", "es2016", "es2017.object"],
    "target": "es6",
    "module": "commonjs",
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noEmitOnError": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": false,
    "noImplicitReturns": false,
    "noImplicitThis": false,
    "strictNullChecks": …

在升级到角度 13 时，我在管道上的构建步骤失败。我的初始版本是 11，升级到 12 后构建工作正常，但从 12 升级到 13 时，它开始在管道上出现此错误。构建在本地运行良好，但在管道上失败。

我还添加了 package.json 文件代码和依赖项，还添加了显示错误的图像。

[![{
  "name": "app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "start:prod": "ng serve -c production",
    "start:local": "ng serve -c local",
    "start:test": "ng serve -c local,test",
    "start:ci": "serve -s --no-clipboard --listen ${PORT:-4200} ",
    "build": "ng build",
    "updateVersion": "node ./updateVersion.js",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage --ci",
    "lint": "eslint src --ext .js,.ts,.html",
    "lint:fix": "npm run lint -- --fix",
    "e2e": "ng e2e",
    "e2e:prod": "ng e2e --headless …

在逐步使用缩小的库代码时,源映射非常有用.使用源映射的.js文件的前几行默认情况下看起来像这样:

/*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
//@ sourceMappingURL=jquery.min.map
*/

如果您没有jquery.min.map在同一目录中,支持源映射的浏览器将产生冗余的http请求,从而导致404错误(听起来很熟悉,有人喜欢？).

我注意到sourceMappingURL可能指向另一个域; 我不是在提倡这种做法,但它似乎不受CORS的影响:

/*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
//@ sourceMappingURL=//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.map
*/

映射的未经授权的来源是否安全？即如果在上面的示例中,映射的服务器被泄露并且恶意代码被添加到源中,是否会/将被执行？如果您正在调试代码并单步调试代码呢？我找不到任何能够解决这个问题的实现细节.

我正在尝试创建一个转换的gulp任务

TS -> (ES6) -> Babel -> (ES5) -> Webpack -> [bundle.js, bundle.js.map]

源映射映射回原始TS代码的位置.

如何用gulp做到这一点？

到目前为止,我已经设法让它发挥作用 TS -> ES6 -> Babel -> ES5

// Build
gulp.task("build", ["clean"], () => {

    const tsProject = ts.createProject("tsconfig.json", {});
    const sourceMapOptions = {
        sourceRoot: __dirname+"/src"
    };

    return tsProject.src()
    .pipe(sourcemaps.init())

        // Typescript
        .pipe(tsProject())
        .js

        // Babel
        .pipe(babel({
            presets: ["es2015"],
            plugins: ["transform-runtime"]
        }))

        // Webpack <-- ????
        .pipe(webpack({})) // <-- ????

    .pipe(sourcemaps.write(".", sourceMapOptions))
    .pipe(gulp.dest("./dist"));

});

但不知道如何添加webpack到混合.

编辑:发布此问题后不久找到了解决方案.请参阅下面的我的答案

我有一个基于webpack 2的项目,它使用ExtractTextPlugin将SCSS/CSS拉出到一个单独的文件中.

另外,我在webpack(vendor和app)中定义了两个入口点,它们构建到我的JS包中.

出于某种原因,ExtractTextPlugin似乎打破了为应用程序包生成的源图app.js.map.如果我查看源图,它指向提取的CSS文件中的随机行,而不是JS.

查看源图文件本身,我只看到"sources"下面列出的CSS和SCSS文件(下面的简短示例):

{"version":3,"sources":["webpack:///webpack:///~/icon-font/package/styles/ficon.css","webpack:///webpack:///~/styles/package/styles/_imports.scss","webpack:///webpack:///~/styles/package/styles/includes/_variables.scss","webpack:///webpack:///~/styles/package/styles/includes/_mixins-utilities.scss", .....

但是,如果我ExtractTextPlugin在webpack配置中注释掉,我会在源代码中列出JS文件:

{"version":3,"sources":["webpack:///app-552b3935c142f5001484.js","webpack:///./src/lib/Globals.js","webpack:///./src/actions/AdActions.js", ....

所以不确定这里发生了什么......看起来有点像ExtractTextPlugin破坏或覆盖应用程序包的源图？

以下是我在webpack配置中定义的所有相关插件的方法:

{
  entry: {
    vendors: [
      'react',
      'react-dom',
      'react-redux',
    ],
    app: path.resolve(__dirname, './../src/client.js'),
  },
  output: {
    path: path.resolve(__dirname, './../dist/assets/'),
    filename: '[name]-[chunkhash].js',
    sourceMapFilename: '[name]-[chunkhash].js.map',
  },
  cache: false,
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.(scss|sass|css)$/,
        loader: ExtractTextPlugin.extract({
          loader: [
            'css?sourceMap',
            'postcss-loader',
            'sass?sourceMap'
          ],
        }),
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [path.join(__dirname, '../src')], …

我正在使用错误跟踪软件报告网络浏览器中发生的任何错误，但是我的生产站点上的代码已缩小。结果，调试几乎是不可能的（变量名被更改等）。

我想在生产中放入完整的源映射文件，以便我可以调试这些错误，但是在执行此操作时听说过一些有关隐私/安全性的问题。由于可以在没有源映射的情况下最小化JavaScript和进行反向工程，因此我想知道这是否是合理的问题。我所能看到的是，它只会使该过程更快。

将源映射放入公共域是否存在合法的安全问题？

我终于让打字稿在我的项目中工作了，但是断点不会停在正确的行上，并且变量值不可用，直到您在逐步执行中进入更多行代码。如果源映射中不匹配，则似乎存在某些 ttype。我尝试按照此处的说明将 SourceMapDevToolPlugin 添加到 webpack 配置文件中来解决此问题。但并不能解决问题。

下面的截图说明了我的意思：

myString 未定义，尽管该行应该已被执行。

之后它直接跳转到函数（而不是const myNumber = myFunc(5);调用函数的地方）并且字符串的值可用，所以这很奇怪。

下面是我的 webpack 配置、launch.json 和 tsconfig。

网络包配置：

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const SourceMapDevToolPlugin = require('');

const modulesPath = path.resolve(__dirname, 'node_modules');
const srcPath = path.resolve(__dirname, 'src');
const outputPath = path.resolve(__dirname, 'dist');

const basename = process.env.BASENAME || '/';
const mode = process.env.NODE_ENV === 'production' ? 'production' : 'development';

module.exports = {
  mode,
  devtool: …

我使用grunt简单地连接和缩小我的CSS文件(不使用SASS).有没有像我可以使用的源地图？我想查看生产网站并使用Chrome Dev工具进行检查,但请告诉我原始的CSS文件.这是我的咕噜文件:

'use strict';

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        clean: {
            removeModuleCss: {
                src:["App/**/module.css"]
            }
        },
        cssmin: {
            module: {
                files: {
                    'App/styles/module.css': ['App/**/*.css']
                }
            }
        },
        concat: {
            module: {
                src: 'App/styles/**/*.css',
                dest: 'App/styles/module.css'
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-clean');

    grunt.registerTask('css', ['clean', 'concat']);
    grunt.registerTask('cssmin', ['clean', 'cssmin']);
};