javascript - Webpack 2/Babel 错误的源映射(ES5 而不是 ES6)

Question

我有源 map 的问题。我收到的不是正确的 ES6 代码，而是带有 babel 转译的 ES5 文件的源映射。我尝试了所有类型的开发工具源映射，甚至使用了 webpack.SourceMapDevToolPlugin。

当我使用 eval 时，文件路径看起来不错，但是当我单击它们时，它将转到正确的文件，但在转换为 ES5 之后 proper paths - 在其他源 map 类型中，路径看起来像这样:wrong paths

我不知道我还能尝试什么。

common.webpack.js 文件:

const webpack = require('webpack');
const argv = require('minimist')(process.argv.slice(2));
const {
  root,
  removeEmpty,
  ifProd,
  ifDev,
  getEnvConsts,
  ifRelease,
} = require('../helpers');
const defaults = require('../defaults');

// Webpack plugins
const CleanPlugin = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const ExtendedDefinePlugin = require('extended-define-webpack-plugin');
const WriteFilePlugin = require('write-file-webpack-plugin');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
const HappyPack = require('happypack');

const PORT = argv['hmr-port'] || defaults.HMR_PORT || 3000;

module.exports = (options) => {
  const ENV = options.env;
  const BROWSER = options.browser;

  const buildPath = ENV === 'development'
    ? 'dist'
    : `${process.env.__DIR__ || 'build'}/${BROWSER}`;

  const definedPlugins = Object.assign({}, {
    'process.env.NODE_ENV': ENV,
    __BROWSER__: BROWSER,
    __ENV__: ENV,
    __TAG_SHA__: process.env.__TAG_SHA__,
    __VERSION__: process.env.__VERSION__,
    __EXTENSION_ID__: defaults.__EXTENSION_ID__,
  }, getEnvConsts());

  const config = {
    devtool: ENV === 'development'
      ? '#cheap-inline-source-map'
      : 'source-map',
    resolve: {
      extensions: ['.jsx', '.js'],
      modules: [defaults.SRC_DIR, 'node_modules'],
      alias: {
        react: root('node_modules/react'),
        React: root('node_modules/react'),
      }
    },
    context: defaults.SRC_DIR,
    entry: {
      'sidebar/sidebar': [
        'babel-polyfill',
        './extension/sidebar/index.jsx',
        './extension/style.js',
      ],
      'background/background': [
        'babel-polyfill',
        './extension/background/background.js',
      ],
    },
    output: {
      path: root(buildPath),
      publicPath: '/',
      filename: '[name].js',
    },
    module: {
      rules: removeEmpty([
        ifRelease({
          test: /\.jsx?$/,
          exclude: /node_modules/,
          enforce: 'pre',
          use: [{ loader: 'eslint-loader', options: { failOnWarning: true } }],
        }),
        {
          test: /.jsx?$/,
          include: [defaults.SRC_DIR],
          loader: (ENV === 'development')
            ? 'happypack/loader?id=1'
            : 'babel-loader',
          query: {
            cacheDirectory: true,
          }
        },
        {
          test: /.worker.js$/,
          use: [
            { loader: 'worker-loader' },
          ],
        },
        {
          test: /.s?css$/,
          loader: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: ['css-loader', 'sass-loader'],
          }),
        },
        {
          test: /.svg$/,
          use: [
            { loader: 'simple-svgo-loader' }
          ],
        },
        {
          test: /\.(jpe?g|png|gif)$/i,
          loaders: [
            'url-loader',
            {
              loader: 'image-webpack-loader',
              query: {
                mozjpeg: {
                  progressive: true,
                },
                gifsicle: {
                  interlaced: false,
                },
                optipng: {
                  optimizationLevel: 4,
                },
                pngquant: {
                  quality: '75-90',
                  speed: 3,
                },
              },
            },
          ],
        }
      ]),
    },
    performance: {
      hints: false,
    },
    plugins: removeEmpty([
      // new webpack.SourceMapDevToolPlugin({
      //   filename: '[file].map',
      //   test: /.jsx?$/,
      // }),
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.NoEmitOnErrorsPlugin(),
      new webpack.NamedModulesPlugin(),
      ifRelease(new StyleLintPlugin({
        syntax: 'scss',
        context: defaults.SRC_DIR,
      })),
      new ExtractTextPlugin('style.css'),
      new ExtendedDefinePlugin(definedPlugins),
      new CleanPlugin([buildPath], {
        root: root(),
        verbose: true,
      }),
      new CopyPlugin(removeEmpty([
        { from: 'extension/icons', to: 'icons' },
        { from: 'extension/helpers/autoclose/autoclose.js', to: 'autoclose.js' }
      ])),
      new HtmlPlugin({
        template: root('scripts/hot-reload.html'),
        inject: true,
        minify: {
          removeComments: false,
          collapseWhitespace: false,
          keepClosingSlash: false
        }
      }),
      new HtmlPlugin({
        filename: 'background/background.html',
        chunks: removeEmpty([ ifProd('common'), 'background/background' ]),
        inject: 'head',
        title: 'Background'
      }),
      ifDev(new WriteFilePlugin({
        // log: false,
      })),
      ifDev(new webpack.DllReferencePlugin({
        context: '.',
        manifest: require(root('config/webpack/dlls/vendor.json')),
      })),
      ifDev(new AddAssetHtmlPlugin({
        filepath: require.resolve(root('config/webpack/dlls/dll__vendor.js')),
        includeSourcemap: false
      })),
      ifDev(new HappyPack({
        id: '1',
        threads: 8,
        loaders: ['babel-loader'],
        verbose: true,
        debug: false,
      })),
      ifProd(new webpack.optimize.CommonsChunkPlugin({
        name: 'common',
      })),
      // ifDev(new webpack.LoaderOptionsPlugin({
      //   minimize: false,
      //   debug: true,
      // })),
      ifProd(new webpack.LoaderOptionsPlugin({
        minimize: true,
        debug: false,
      })),
      ifProd(new webpack.optimize.UglifyJsPlugin({
        compress: {
          screw_ie8: true,
          warnings: false,
        },
        sourceMap: true,
      })),
    ]),
  };

  return config;
};

package.json 文件:

{
  "version": "1.0.68",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "add-asset-html-webpack-plugin": "^1.0.2",
    "archiver": "^1.3.0",
    "babel-cli": "^6.24.1",
    "babel-core": "^6.25.0",
    "babel-istanbul": "^0.12.1",
    "babel-loader": "^7.0.0",
    "babel-plugin-istanbul": "^3.1.2",
    "babel-plugin-react": "^1.0.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-flow-strip-types": "^6.22.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "chai": "4.0.0-canary.1",
    "chai-as-promised": "5.3.0",
    "chrome-webstore-manager": "^0.4.1",
    "clean-webpack-plugin": "^0.1.14",
    "colors": "^1.1.2",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^3.1.4",
    "css-loader": "^0.26.1",
    "css-object-loader": "^0.0.7",
    "debug": "^2.6.0",
    "enzyme": "^2.7.0",
    "es6-promise": "^4.1.0",
    "esdoc": "^0.5.2",
    "esdoc-es7-plugin": "^0.0.3",
    "esdoc-flow-plugin": "^1.0.0",
    "eslint": "^3.12.2",
    "eslint-config-airbnb": "^13.0.0",
    "eslint-config-airbnb-flow": "^1.0.2",
    "eslint-import-resolver-webpack": "^0.8.1",
    "eslint-loader": "^1.6.1",
    "eslint-plugin-chai-expect": "^1.1.1",
    "eslint-plugin-chai-friendly": "^0.2.0",
    "eslint-plugin-compat": "^0.1.3",
    "eslint-plugin-flowtype": "^2.29.2",
    "eslint-plugin-html": "^1.7.0",
    "eslint-plugin-immutable": "^1.0.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^2.2.3",
    "eslint-plugin-react": "^6.8.0",
    "eslint-plugin-redux-saga": "^0.3.0",
    "eslint-plugin-sinon": "^0.2.0",
    "express": "^4.14.1",
    "extended-define-webpack-plugin": "^0.1.3",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.10.0",
    "flow-bin": "^0.38.0",
    "flow-typed": "^2.0.0",
    "fs-jetpack": "^0.10.5",
    "generate-json-webpack-plugin": "^0.2.1",
    "generate-plist-webpack-plugin": "^0.0.2",
    "happypack": "^4.0.0-beta.1",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^2.26.0",
    "http-proxy-middleware": "^0.17.3",
    "image-webpack-loader": "^3.2.0",
    "istanbul": "1.1.0-alpha.1",
    "jsdom": "^9.9.1",
    "jsdom-global": "^2.1.1",
    "karma": "^1.3.0",
    "karma-chai": "^0.1.0",
    "karma-chai-as-promised": "^0.1.2",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.1.1",
    "karma-es6-shim": "^1.0.0",
    "karma-firefox-launcher": "^1.0.0",
    "karma-mocha": "^1.3.0",
    "karma-mocha-reporter": "^2.2.1",
    "karma-opera-launcher": "^1.0.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-safari-launcher": "^1.0.0",
    "karma-sinon": "^1.0.5",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.2",
    "lint-staged": "^3.5.1",
    "minimist": "^1.2.0",
    "mocha": "^3.2.0",
    "mocha-better-spec-reporter": "^3.1.0",
    "nightwatch": "^0.9.12",
    "node-sass": "^4.3.0",
    "nodemon": "^1.11.0",
    "npm-run-all": "^4.0.0",
    "nyc": "^10.0.0",
    "phantomjs-prebuilt": "^2.1.14",
    "plist": "^2.0.1",
    "precommit-hook-eslint": "^3.0.0",
    "react-addons-test-utils": "^15.4.2",
    "react-hot-loader": "3.0.0-beta.6",
    "reactotron-react-js": "^1.6.0",
    "reactotron-redux": "^1.6.1",
    "redux-logger": "^2.8.1",
    "require-glob": "^3.2.0",
    "rsg-alt": "^3.15.0",
    "sass-loader": "^4.1.1",
    "sass-variable-loader": "^0.1.1",
    "selenium-webdriver": "^3.0.1",
    "sentry-cli-binary": "^1.10.2",
    "simple-svgo-loader": "^1.0.0",
    "sinon": "2.0.0-pre.5",
    "style-loader": "^0.13.1",
    "stylelint": "^7.7.1",
    "stylelint-config-standard": "^15.0.1",
    "stylelint-scss": "^1.4.1",
    "stylelint-webpack-plugin": "^0.5.1",
    "svgo": "^0.7.2",
    "url-loader": "^0.5.8",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5",
    "worker-loader": "^0.8.0",
    "write-file-webpack-plugin": "^3.4.2"
  },
  "dependencies": {
    "archiver-promise": "^1.0.0",
    "axios": "^0.15.3",
    "dexie": "^1.5.1",
    "moment": "^2.18.1",
    "moment-timezone": "^0.5.11",
    "raven-js": "^3.15.0",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-moment": "^0.2.2",
    "react-redux": "^5.0.2",
    "react-router": "^3.0.2",
    "react-router-redux": "^4.0.7",
    "redux": "^3.6.0",
    "redux-saga": "^0.14.3"
  },
  "pre-commit": [
    "lint-staged"
  ],
  "scripts": {
    "start": "nodemon --watch config --watch scripts/dev-middleware.js --exec \"node_modules/.bin/cross-env NODE_ENV=development __TAG_SHA__=$(git show-ref $(git describe --tags $(git rev-list --tags --max-count=1)) | awk '{print $1}') node scripts/dev-middleware.js\"",
    "start:old": "node_modules/.bin/cross-env NODE_ENV=development node scripts/dev-middleware.js",
    "start:hot-reload": "node_modules/.bin/cross-env NODE_ENV=development node_modules/.bin/npm-run-all webpack:dll:gen start:dev",
    "start:dev": "node scripts/hot-reload.js",
    "webpack": "node_modules/.bin/webpack",
    "webpack:dll:gen": "./node_modules/.bin/webpack --config config/webpack/dll.webpack.js",
    "build": "node_modules/.bin/npm-run-all build:chrome",
    "build:all": "node_modules/.bin/cross-env NODE_ENV=production __BROWSER__=all node_modules/.bin/npm-run-all webpack",
    "build:chrome": "node_modules/.bin/cross-env NODE_ENV=production __BROWSER__=chrome node_modules/.bin/npm-run-all webpack",
    "build:firefox": "node_modules/.bin/cross-env NODE_ENV=production __BROWSER__=firefox node_modules/.bin/npm-run-all webpack",
    "build:opera": "node_modules/.bin/cross-env NODE_ENV=production __BROWSER__=opera node_modules/.bin/npm-run-all webpack",
    "build:edge": "node_modules/.bin/cross-env NODE_ENV=production __BROWSER__=edge node_modules/.bin/npm-run-all webpack",
    "build:safari": "node_modules/.bin/cross-env NODE_ENV=production __BROWSER__=safari node_modules/.bin/npm-run-all webpack",
    "clean:build": "node_modules/rimraf/bin.js build",
    "clean:coverage": "node_modules/rimraf/bin.js coverage",
    "clean:docs": "node_modules/rimraf/bin.js documentation",
    "test:mocha": "node_modules/.bin/_mocha --opts config/mocha.conf",
    "coverage": "node_modules/.bin/npm-run-all test coverage:report",
    "coverage:_save": "node_modules/.bin/cross-env NODE_ENV=test node_modules/.bin/nyc --reporter=html node_modules/.bin/babel-node node_modules/.bin/babel-istanbul cover node_modules/mocha/bin/_mocha -- --opts config/mocha.conf",
    "coverage:gen": "node_modules/.bin/npm-run-all clean:coverage coverage:_save",
    "coverage:check": "node_modules/.bin/nyc check-coverage --lines 95 --functions 95 --branches 95",
    "coverage:report": "node_modules/.bin/codecov",
    "test": "node_modules/.bin/cross-env NODE_ENV=test node_modules/.bin/karma start",
    "test:silent": "node_modules/karma/bin/karma start --log-level=disable --reporters=",
    "test:watch": "yarn test -- --auto-watch --no-single-run --browsers PhantomJS --reporters dots,coverage",
    "e2e:setup": "node_modules/.bin/selenium-standalone install",
    "e2e:run": "node_modules/.bin/nightwatch",
    "e2e:complex": "node_modules/.bin/npm-run-all build:chrome e2e:run",
    "e2e": "yarn run e2e:run",
    "docs:gen": "node_modules/.bin/esdoc -c config/esdoc.json",
    "docs": "node_modules/.bin/npm-run-all clean:docs docs:gen",
    "lint": "node_modules/.bin/eslint -c .eslintrc.yml --quiet .",
    "release:chrome:prepare": "node_modules/.bin/npm-run-all build:chrome",
    "release:chrome": "VERSION=$(git describe --tags $(git rev-list --tags --max-count=1) | sed -E -e 's/(^production|^development|^release|^beta)-//') && node_modules/.bin/cross-env node_modules/.bin/cross-env __DIR__=release __VERSION__=$VERSION node scripts/release.js",
    "tag-sha": "git show-ref $(git describe --tags $(git rev-list --tags --max-count=1)) | awk '{print $1}'",
    "getLastVersion": "git describe --tags $(git rev-list --tags --max-count=1)",
    "validate": "npm ls",
    ":postinstall": "node node_modules/phantomjs-prebuilt/install.js",
    "::postinstall": "node_modules/.bin/flow-typed update",
    "lint-staged": "node_modules/.bin/lint-staged",
    "lint:style": "node_modules/.bin/stylelint 'src/**/*.css'",
    "lint:style:scss": "node_modules/.bin/stylelint 'src/**/*.scss' --syntax=scss"
  },
  "lint-staged": {
    "*.css": "lint:style",
    "*.scss": "lint:style:scss"
  }
}

.babelrc.json 文件

{
  "env": {
    "test": {
      "plugins": [
        "transform-flow-strip-types",
        ["istanbul", { "exclude": ["**/*.spec.js", "*.js"]}]
      ],
      "presets": [
        ["es2015", { "modules": false }],
        "stage-0",
        "react"
      ]
    }
  },
  "plugins": [
    "transform-flow-strip-types",
    "transform-class-properties"
  ],
  "presets": [
    ["es2015", { "modules": false }],
    "stage-0",
    "react"
  ],
  "sourceMaps": true
}

dev-middleware.js 文件

const express = require('express');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpack = require('webpack');
const path = require('path');
const argv = require('minimist')(process.argv.slice(2));
const webpackConfig = require('../webpack.config');
const { root } = require('../config/helpers');

const app = express();
const compiler = webpack(webpackConfig);

const PORT = argv['hmr-port'] || 3000;

app.use(webpackDevMiddleware(compiler, {
  historyApiFallback: true,
  inline: true,
  stats: {
    colors: true,
    assets: true,
    version: false,
    hash: false,
    timings: false,
    chunks: false,
    chunkModules: false,
  },
  headers: { 'Access-Control-Allow-Origin': '*' },
  clientLogLevel: 'info',
}));

app.use(express.static(root('dist')));

app.get('*', (req, res) => {
  res.sendFile(path.resolve(root('dist'), 'index.html'));
});

app.listen(PORT, 'localhost', () => {
  console.log(`Listening on port: ${PORT}`);
});

Answer 1

看起来像是使用 Webpack 的配置。

你的配置中应该有这样的东西:

// webpack.config.js

module.exports = {
 ...
  devtool: 'source-map',
 ...
};