3
Ich habe Probleme mit Quellkarten. Anstelle des richtigen ES6-Codes erhalte ich Quellkarten mit einer Babel-transpilierten ES5-Datei. Ich habe jede Art von Devtool Sourcemaps ausprobiert, sogar mit webpack.SourceMapDevToolPlugin.Webpack 2/Babel falsche Quellkarten (ES5 statt ES6)
Wenn ich eval Pfade zu Dateien verwenden sieht gut aus, aber wenn ich sie klicken es auf die richtige Datei gehen, aber nach transpilation zu ES5 proper paths - in einer anderen Quelle Kartentypen Pfade sieht wie folgt aus: wrong paths
Ich habe keine Ahnung Was könnte ich sonst noch versuchen?
common.webpack.js Datei:
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 Datei:
{
"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 Datei
{
"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 Datei
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}`);
});
ich habe: 'const config = { DevTool: ENV === 'Entwicklung' ? '# cheap-inline-source-map' : 'source-map', ' – Tranotheron