錯誤ES6應用webpacking庫源地圖，工作在ES5應用

我分發ES6庫，transpiled到ES5，使用此webpack.config.js錯誤ES6應用webpacking庫源地圖，工作在ES5應用

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，這只是增加了嘈雜的裝載機，對於作品的配置文件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應用程序中的庫源地圖可用？

來源

2015-12-13 Xavi

你的Babel安裝程序會讓babel在你的所有庫代碼上運行，通常我會避免這種情況，因爲它會更慢，並且它使得Babel必須處理和排列原始庫源代碼。 – loganfsmyth

這是有道理的，它的工作。謝謝！（如果可以的話，我會接受你的回覆作爲答案）。 – Xavi

不確定這足夠了！ – loganfsmyth

巴別爾必須有一些問題攝取你的圖書館的源地圖，因爲你有test: /\.js$/,，巴別將處理你回購中的每一個JS文件，包括node_modules。

我建議限制test只匹配想要Babel處理的文件，這可能足以避免這種情況，儘管它不能解決潛在的問題。

來源

2015-12-14 23:08:26 loganfsmyth

錯誤ES6應用webpacking庫源地圖，工作在ES5應用

回答

相關問題