ES6 应用程序中的错误 webpacking 库源映射，在 ES5 应用程序中工作

Question

我分发了一个 ES6 库，转译为 ES5，源映射使用这个 webpack.config.js

var webpack = require("webpack");

module.exports = {
  entry: ['./src/MyLib.js'],
  output: {
    path: __dirname,
    filename: 'dist/bundle.js',
    libraryTarget: 'umd',
    library: "MyLib"
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        query: { presets: ['es2015'] }
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader"
      }
    ]
  },
  devtool: 'source-map'
};

如 Webpack's devtool docs 中所暗示我使用 source-map-loader 使库源映射在使用该库的 ES5 应用程序中可用。它适用于此 webpack.config.js

var path = require("path");

module.exports = {
  entry: './main.js',
  output: {
    filename: 'dist/bundle.js'
  },
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        loader: 'source-map',
        include: /my-lib/
      }
    ]
  },
  resolveLoader: {
    root: path.join(__dirname, "node_modules"),
  },
  devtool: 'source-map'
};

问题是，当库的使用者是 ES6 应用程序时，使用以下 webpack.config.js，它只是将 babel 加载器添加到适用于 ES5 应用程序的配置文件中，

var path = require("path");

module.exports = {
  entry: './main.js',
  output: {
    filename: 'dist/bundle.js'
  },
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        loader: 'source-map',
        include: /my-lib/
      }
    ],
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        query: { presets: ['es2015'] }
      }
    ]
  },
  resolveLoader: {
    root: path.join(__dirname, "node_modules"),
  },
  devtool: 'source-map'
};

然后，当运行 webpack时，会出现类似

的错误

ERROR in ./~/my-lib/dist/bundle.js
Module build failed: Error: /Users/xavi/Development/my-lib/examples/es6/node_modules/my-lib/dist/bundle.js: Invalid mapping: {"generated":{"line":8,"column":0,"lastColumn":null},"source":null,"original":{"line":null,"column":null},"name":null}
...

为什么当消费者是 ES5 应用程序时此源映射配置有效，但当它是使用 Babel 转译的 ES6 应用程序时无效？如何使库源映射在 ES6 应用程序中可用？

Answer 1

Babel 在获取你的库的 sourcemaps 时一定有一些问题，因为你有 test: /\.js$/,，Babel 将处理你的 repo 中的每个 JS 文件，包括 node_modules.

我建议将 test 限制为仅匹配您希望 Babel 处理的文件，这可能足以避免这种情况，尽管它不能解决根本问题。

ES6 应用程序中的错误 webpacking 库源映射，在 ES5 应用程序中工作

Error webpacking library source maps in ES6 app, works in ES5 app

javascript

ecmascript-6

webpack

babeljs