Javascript 在ES6应用程序中对库源地图进行网页打包时出错，可在ES5应用程序中使用

我分发了一个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'
};

正如在 我使用使库源地图在使用库的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应用程序中可用？

Babel在获取库源地图时一定会遇到一些问题，而且由于您有

测试：/\.js$/，

，Babel将处理您的repo中的每个js文件，包括

节点模块

---

我建议将

test

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

您的Babel设置也会使Babel在所有库代码上运行，一般来说，我会避免这样做，因为这样会慢得多，而且会使Babel不得不处理和排列原始库源地图。这很有意义，而且很有效。谢谢（如果可以的话，我会接受你的回答。）我不确定这是否足够！