Node.js Webpack Babel Source Maps неправильные сопоставления - PullRequest
Новая
       11

Node.js Webpack Babel Source Maps неправильные сопоставления

0 голосов
/ 13 января 2020

У меня проблемы с созданием правильных исходных карт в Node.js с Webpack 4 и Babel 7.

В целом вы можете увидеть всю установку в этом проекте - https://github.com/voronianski/nodejs-webpack-babel-source-map-test

Существует 2 различных сборки Webpack: 

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;


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 -артефакты-загружены-до-ошибок-произошли .

Надеюсь, мой демонстрационный проект имеет смысл - https://github.com/voronianski/nodejs-webpack-babel-source-map-test, чтобы получить совет по этому вопросу.

...