我试图在使用 webpack、babel-loader 和 Aurelia 时发出 js 源映射(不确定 Aurelia 在这种情况下是否重要，但我将其包括在内以防万一)。我还不到一周就开始学习如何使用 webpack。我遇到很多困难的一件事是发出 js 源映射。
我曾尝试使用以下位置的答案:
How do I generate sourcemaps when using babel and webpack?
和
Webpack-dev-server doesn't generate source maps
但不幸的是，我仍然只看到 1.bundle.js 和 bundle.js 作为 chrome 开发人员工具窗口中的脚本文件。
这里我将包含我的 package.json:
{
"name": "companyname.projectname.web",
"version": "0.1.0",
"sasslintConfig": "./.sass-lint.yml",
"description": "lol",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server -d --config webpack.config.js --hot --inline --progress --devtool eval",
"build": "webpack --config webpack.config.js --progress --profile",
"prod": "webpack -p --config webpack.prod.config.js --progress --devtool source-map",
"test": "karma start",
"webdriver:update": "./node_modules/.bin/webdriver-manager update",
"webdriver:start": "./node_modules/.bin/webdriver-manager start",
"pree2e": "npm run webdriver:update -- --standalone",
"e2e": "./node_modules/.bin/protractor"
},
"dependencies": {
"aurelia-bootstrapper-webpack": "^1.0.0-beta.1.0.0",
"aurelia-event-aggregator": "^1.0.0-beta.1.1.1",
"aurelia-fetch-client": "^1.0.0-beta.1.1.0",
"aurelia-framework": "^1.0.0-beta.1.1.3",
"aurelia-history-browser": "^1.0.0-beta.1.1.2",
"aurelia-logging-console": "^1.0.0-beta.1.1.4",
"aurelia-pal-browser": "^1.0.0-beta.1.1.4",
"aurelia-polyfills": "^1.0.0-beta.1.0.0",
"aurelia-router": "^1.0.0-beta.1.1.1",
"aurelia-templating-binding": "^1.0.0-beta.1.1.1",
"aurelia-templating-resources": "^1.0.0-beta.1.1.1",
"aurelia-templating-router": "^1.0.0-beta.1.1.1",
"bluebird": "^3.3.4",
"bootstrap": "^4.0.0-alpha.2",
"exports-loader": "^0.6.3",
"extract-text-webpack-plugin": "^1.0.1",
"font-awesome": "^4.5.0",
"imports-loader": "^0.6.5",
"isomorphic-fetch": "^2.2.1",
"jquery": "^2.2.3",
"json-loader": "^0.5.4",
"node-sass": "^3.6.0",
"sass-loader": "^3.2.0",
"tether": "^1.3.2",
"whatwg-fetch": "^1.0.0"
},
"devDependencies": {
"aurelia-tools": "^0.1.18",
"aurelia-webpack-plugin": "^1.0.0-beta.1.0.0",
"babel-core": "^6.7.2",
"babel-eslint": "^5.0.0",
"babel-loader": "^6.2.4",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-es2015-loose": "^7.0.0",
"babel-preset-stage-1": "^6.5.0",
"css-loader": "^0.23.1",
"eonasdan-bootstrap-datetimepicker": "^4.15.35",
"eslint": "^1.10.3",
"file-loader": "^0.8.5",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.9.0",
"jasmine-core": "^2.4.1",
"karma": "^0.13.21",
"karma-babel-preprocessor": "^6.0.1",
"karma-chrome-launcher": "^0.2.2",
"karma-jasmine": "^0.3.7",
"karma-webpack": "^1.7.0",
"node-sass": "^3.4.2",
"protractor": "^3.2.1",
"raw-loader": "^0.5.1",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"wallaby-webpack": "0.0.21",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1"
}
}
和我的 webpack.config.js:
/*eslint-disable no-var*/
var path = require('path');
var AureliaWebpackPlugin = require('aurelia-webpack-plugin');
var ProvidePlugin = require('webpack/lib/ProvidePlugin');
module.exports = {
debug: true,
devServer: {
host: 'localhost',
port: 3000
},
devtool: 'source-map',
entry: {
main: [
'./src/main'
]
},
output: {
path: path.join(__dirname, 'build'),
filename: 'bundle.js'
},
plugins: [
new AureliaWebpackPlugin({
src: path.resolve('./src')
}),
new ProvidePlugin({
Promise: 'bluebird',
jQuery: 'jquery',
'window.Tether': 'tether',
fetch: 'imports?this=>global!exports?global.fetch!whatwg-fetch'
}),
new ExtractTextPlugin('global.css', {
allChunks: false
})
],
module: {
loaders: [
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015-loose', 'stage-1'], plugins: ['transform-decorators-legacy'] } },
{ test: /\.json$/, loader: 'json' },
{ test: /\.css$/, loader: 'style!css' },
{ test: /\.scss$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap'], include: path.resolve('./sass') },
{ test: /\.html$/, loader: 'html' },
{ test: /\.(png|gif|jpg)$/, loader: 'url?limit=8192' },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }
]
},
node: {
fs: 'empty'
}
};
不要评判我，我还在学习这一切。如您所见，我在“dev”脚本中为 webpack-dev-server 命令启用了 -d 选项。我添加了:debug: true 和 devtool: 'source-map' 但遗憾的是，我似乎无法在 chrome 开发人员工具中找到这些源映射的发出位置;这让我得出结论，它们根本没有被发射。
我确实在 webpack://中发现了一些有趣的东西。领域;我所有的 Aurelia js 都在那里，除了它看起来是由 babel 或 webpack 转换的。
最佳答案
替换这一行:
...
"scripts": {
"dev": "webpack-dev-server -d --config webpack.config.js --hot --inline --progress --devtool eval"
...
为此:
...
"scripts": {
"dev": "webpack-dev-server -d --config webpack.config.js --hot --inline --progress --devtool source-map"
...
在 View 模型中放置一个调试器；(用作断点)并保持浏览器的开发工具打开。例如:
export class MyViewModel {
constructor() {
debugger;
//...
}
}
现在您应该看到调试器在 ES2016 级别工作。
关于javascript - 使用带有 Aurelia 的 babel 和 webpack 生成 .js 源映射，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37004952/