Question

我在使用Webpack 4和Babel 7在Node.js中生成正确的源映射时遇到麻烦。

基本上，您可以在此项目中看到整个设置-https://github.com/voronianski/nodejs-webpack-babel-source-map-test

有2种不同的Webpack版本：

具有babel配置-https://github.com/voronianski/nodejs-webpack-babel-source-map-test/blob/master/webpack.config.no-babel.js

const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');

const config = {
  mode: 'production',
  target: 'node',
  optimization: {
    nodeEnv: false
  },
  node: {
    __dirname: false,
    __filename: false
  },
  entry: './src/with-babel/index.js',
  output: {
    path: path.join(__dirname, 'dist-with-babel'),
    filename: 'index.js'
  },
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.js?$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['latest-node', { target: '10', modules: false }]]
          }
        }
      }
    ]
  },
  devtool: 'source-map'
};

module.exports = config;

没有babel配置-https://github.com/voronianski/nodejs-webpack-babel-source-map-test/blob/master/webpack.config.with-babel.js


const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');

const config = {
  mode: 'production',
  target: 'node',
  optimization: {
    nodeEnv: false
  },
  node: {
    __dirname: false,
    __filename: false
  },
  entry: './src/no-babel/index.js',
  output: {
    path: path.join(__dirname, 'dist-no-babel'),
    filename: 'index.js'
  },
  externals: [nodeExternals()],

  devtool: 'source-map'
};

module.exports = config;

...并且如果您将成功通过npm run build进行构建...

> webpack --env=production --config ./webpack.config.no-babel

Hash: a3f98d64e003096ec3df
Version: webpack 4.41.5
Time: 135ms
Built at: 01/13/2020 3:00:55 PM
       Asset      Size  Chunks                   Chunk Names
    index.js  1.06 KiB       0  [emitted]        main
index.js.map  4.93 KiB       0  [emitted] [dev]  main
Entrypoint main = index.js index.js.map
[0] ./src/no-babel/index.js 103 bytes {0} [built]
[1] ./src/no-babel/foo/bar.js 85 bytes {0} [built]

> webpack --env=production --config ./webpack.config.with-babel

nHash: f7ac77a2e6f75fcfd6a4
Version: webpack 4.41.5
Time: 562ms
Built at: 01/13/2020 3:00:57 PM
       Asset      Size  Chunks                   Chunk Names
    index.js  1.05 KiB       0  [emitted]        main
index.js.map  4.89 KiB       0  [emitted] [dev]  main
Entrypoint main = index.js index.js.map
[0] ./src/with-babel/index.js + 1 modules 179 bytes {0} [built]
    | ./src/with-babel/index.js 97 bytes [built]
    | ./src/with-babel/foo/bar.js 82 bytes [built]

...然后通过npm run test ...

运行测试文件

const fs = require('fs');
const path = require('path');
const sourceMap = require('source-map');

// file output by Webpack, Uglify, etc.
const GENERATED_FILE_NO_BABEL = path.join('./dist-no-babel', 'index.js.map');
const GENERATED_FILE_WITH_BABEL = path.join('./dist-with-babel', 'index.js.map');

// line and column located in your generated file (for example, the source of your error from your minified file)
const GENERATED_LINE_AND_COLUMN = { line: 1, column: 4955 };

const rawSourceMapNoBabel = fs.readFileSync(GENERATED_FILE_NO_BABEL).toString();
const rawSourceMapWithBabel = fs.readFileSync(GENERATED_FILE_WITH_BABEL).toString();

  // should see something like:
  // { source: 'original.js', line: 57, column: 9, name: 'myfunc' }
new sourceMap.SourceMapConsumer(rawSourceMapNoBabel).then(smc => {
  const pos = smc.originalPositionFor(GENERATED_LINE_AND_COLUMN);
  console.log('no-babel position:\n', pos);
});

new sourceMap.SourceMapConsumer(rawSourceMapWithBabel).then(smc => {
  const pos = smc.originalPositionFor(GENERATED_LINE_AND_COLUMN);
  console.log('with-babel position:\n', pos);
});

...您将看到以下输出：

no-babel position:
 { source: 'webpack:///src/no-babel/foo/bar.js',
  line: 2,
  column: 14,
  name: null }
with-babel position:
 { source: 'webpack:///src/with-babel/index.js',
  line: 5,
  column: 6,
  name: 'doSmth' }

没有Babel的代码更有意义，因为它指向实际代码（但名称被剥夺了）。

但是与Babel的示例无关（例如，构建文件只有一行）。

为什么？

我正在从事的真正项目是Babel，我正在尝试调试Sentry实际上无法在发生错误的地方显示正确代码的问题。根据他们的文档，这是检查源映射是否有效的方法-https://docs.sentry.io/platforms/javascript/sourcemaps/#verify-artifacts-are-uploaded-before-errors-occur。

希望我的演示项目有意义-https://github.com/voronianski/nodejs-webpack-babel-source-map-test可以就此问题获得一些建议。

Node.js Webpack Babel源映射错误的映射

为什么？

0 个答案: