javascript - מיפוי מקור של Webpack לייבוא לא מוגדר (מנפה שגיאות של Firefox)
ניסיתי להבין את webpack ולייצר מפות מקור. למרות שמפות המקור יוצאות, אני לא מצליח לנפות את היבואות. ראה את התמונה הזו של הדיבאגר של כרום והדיבאגר של פיירפוקס (גרסת הפיתוח 57) (ולרק כדי להראות שהדיבאגר עובד, הנה אתר אינטרנט אחר שנמצא בבדיקה בחלון פיירפוקס נוסף).
אני מעדיף להשתמש ב-Firefox, אז איך אני יכול להגדיר מפות מקור שיעבדו נכון ויעניקו לי מידע על המודולים המיובאים.
הדוגמה המינימלית שלי כאן:
main.ts
import { write } from './utils';
import { Stack } from './stack';
const appRef: any= document.querySelector('#app');
const stack: Stack = new Stack(['alice', 'bob', 'eve']);
stack.add('charlie');
write(stack.members.toString(), appRef);
סטאק.ts
export class Stack {
private _members: string[];
constructor(members: string[]) {
this._members = members;
}
get members(): string[] {
return this._members;
}
push(member: string) {
this._members.push(member);
}
pop(): string | undefined {
return this._members.pop();
}
}
utils.ts
export function write(text: string, domElement: any) {
if (domElement) {
const textNode: any = document.createTextNode(text);
domElement.append(textNode);
} else {
document.write(text);
}
}
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true,
"strict": true
}
}
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [".ts", ".js"]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
devtool: 'source-map',
devServer: {
contentBase: path.resolve(__dirname, '.'),
hot: true
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html'
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
};