Mobile versionDie Bundle-Datei ./dist/app.bundle.js (die ich nach dem Ausführen des Befehls webpack erhalte) verweist immer noch auf ./src/module.ts.
Was ich erwarte, ist, dass Webpack die Datei ./src/module.ts transpilieren sollte Zuerst auf ./dist/module.js umsteigen und dann innerhalb von ./dist/app.bundle.js darauf verweisen (./dist/module.js), was bedeutet, dass ich keinen Verweis auf die .ts-Datei von app.bundle.js möchte.
Die Version von Node, Webpack und Typescript finden Sie in der Datei package.json in dev-dependencies
Code: Select all
// app.ts file
import "core-js/stable/index.js";
// ES Modules-compatible dotenv loading
import path from 'path';
//import url from 'url';
import { fileURLToPath } from "node:url";
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename)
import dotenv from 'dotenv';
dotenv.config({ path: __dirname + '/../.env' }); /*, quiet: true*/
function logPoint(p: Point) {
console.log(`${p.x}, ${p.y}`);
console.log(process.env.PORT);
}
// logs "12, 26"
const point = { x: 12, y: 26 };
logPoint(point);
// Use ESM imports for local modules in NodeNext; note explicit .js extension
import myDefault, { greet } from './my-module';
console.log(myDefault + ' comes before ' + greet());
interface Point {
x: number;
y: number;
}
Code: Select all
export default 44;
export function greet() {
return 'Hello from a modern module!';
}
Code: Select all
{
"name": "my-node-app",
"version": "1.0.0",
"__comment": {
"main": "index.js",
"type": "module",
"exports": {
"import": "./module.js",
"require": "./module.cjs"
}
},
"browserslist": [
"defaults and fully supports es6-module",
"maintained node versions",
"> 0.25%, not dead"
],
"scripts": {
"tsc:watch": "tsc-watch --emitDeclarationOnly false --preserveWatchOutput --watch",
"babel-build:watch": "babel --ignore 'src/**/*.d.ts' --copy-files --no-copy-ignored --extensions '.ts, .tsx, .js, . jsx, cjs,.mjs' ./src --out-dir dist --watch --verbose",
"node:run": "node ./dist/app.js",
"tsnode:run": "ts-node ./src/app.ts",
"all": "concurrently \"npm run tsc:watch\" \"npm run babel-build:watch\" \"npm run tsnode:run\"",
"webpack:build": "webpack --config webpack.config.ts",
"test": "jest"
},
"devDependencies": {
"@babel/cli": "^7.28.3",
"@babel/core": "^7.28.5",
"@babel/node": "^7.28.0",
"@babel/plugin-transform-runtime": "^7.28.5",
"@babel/preset-env": "^7.28.5",
"@babel/preset-flow": "^7.27.1",
"@babel/preset-react": "^7.28.5",
"@babel/preset-typescript": "^7.28.5",
"@babel/register": "^7.28.3",
"@eslint/js": "^9.39.1",
"@types/lodash": "^4.17.21",
"@types/node": "^24.10.1",
"@types/webpack": "^5.28.5",
"@types/webpack-dev-server": "^4.7.1",
"babel-jest": "^30.2.0",
"babel-loader": "^10.0.0",
"babel-watch": "^7.8.1",
"concurrently": "^9.2.1",
"eslint": "^9.39.1",
"eslint-plugin-react": "^7.37.5",
"globals": "^16.5.0",
"jest": "^30.2.0",
"jiti": "^1.21.6",
"rollup": "^4.53.2",
"ts-loader": "^9.5.4",
"ts-node": "^10.9.2",
"tsc-watch": "^7.2.0",
"tslib": "^2.8.1",
"typescript": "^5.9.3",
"typescript-eslint": "^8.47.0",
"webpack": "^5.103.0",
"webpack-cli": "^6.0.1",
"webpack-dev-server": "^5.2.2"
},
"dependencies": {
"@babel/runtime": "^7.28.4",
"@types/react": "^19.2.7",
"common.js": "^1.1.1",
"core-js": "^3.46.0",
"dotenv": "^17.2.3",
"lodash": "^4.17.21",
"node-polyfill-webpack-plugin": "^4.1.0",
"url": "^0.11.4"
},
"description": "",
"type": "module",
"main": "./dist/app.js",
"private": true,
"__comment2": {
"types": "./dist/app.d.ts"
},
"keywords": [],
"./package.json": "./package.json",
"author": "Fakhar Anwar",
"license": "ISC"
}
Code: Select all
{
// Visit https://aka.ms/tsconfig to read more about this file
"compilerOptions": {
// File Layout
"rootDir": "./src",
"outDir": "./dist/",
// [url=viewtopic.php?t=25360]Environment[/url] Settings
// See also https://aka.ms/tsconfig/module
"module": "esnext",
"moduleResolution": "node", // Also, tried "bundler" here
"target": "esnext",
"types": ["node"],
"allowImportingTsExtensions": true,
"rewriteRelativeImportExtensions": true,
"noEmit": false,
"noEmitOnError": false,
"emitDeclarationOnly": false,
"declaration": true,
// For nodejs:
"lib": ["esnext", "dom"],
//"types": ["node"],
// and npm install -D @types/node
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
// Other Outputs
"sourceMap": false,
"declarationMap": false,
"declarationDir": "./types",
// Stricter Typechecking Options
"noUncheckedIndexedAccess": true,
"exactOptionalPropertyTypes": true,
// Style Options
// "noImplicitReturns": true,
// "noImplicitOverride": true,
// "noUnusedLocals": true,
// "noUnusedParameters": true,
// "noFallthroughCasesInSwitch": true,
// "noPropertyAccessFromIndexSignature": true,
// Recommended Options
"strict": true,
"jsx": "react-jsx", //react | preserve
"verbatimModuleSyntax": true,
"isolatedModules": true,
"noUncheckedSideEffectImports": true,
"moduleDetection": "force",
"skipLibCheck": true,
"allowJs": true,
"forceConsistentCasingInFileNames": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"],
"exclude": ["node_modules"]
}
Code: Select all
//webpack.config.ts
import path from 'path';
import webpack from 'webpack';
// in case you run into any typescript error when configuring `devServer`
//import 'webpack-dev-server';
import { createRequire } from 'node:module';
// Create a 'require' function relative to the current module's path
const require = createRequire(import.meta.url);
import { fileURLToPath } from 'node:url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename)
import NodePolyfillPlugin from 'node-polyfill-webpack-plugin';
const config: webpack.Configuration = {
mode: 'development',
entry: './src/app.ts',
target: ["web", "node24.11"],
experiments: {
outputModule: true,
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.bundle.js',
module: true,
chunkFormat: 'module',
// Ensures the output bundle uses ESM syntax for exports
library: {
type: 'module',
},
//clean: true
},
externals: '/node_modules',
// devServer: {
// static: {
// directory: path.resolve(__dirname, 'dist'),
// },
// port: 3000,
// },
module: {
rules: [
{
test: /\.tsx?$/, // Matches both .ts and .tsx files, Alt: /\.(js|jsx|ts|tsx)$/
exclude: [/node_modules/, '/src/scss/'],
use: 'ts-loader',
//[
// {
// loader: 'babel-loader', // Second: Transpile with Babel
// options: {
// presets: [
// '@babel/preset-env', // For modern JS features to older JS
// '@babel/preset-typescript', // Enables Babel to understand TypeScript syntax
// '@babel/preset-react',// Add other presets here, e.g., '@babel/preset-react' for React projects
// ],
// sourceType: 'module',
// //cacheDirectory: true // Optional: for faster builds
// }
// }
// ,
// {
// loader: 'ts-loader', // First: Type-check with ts-loader
// options: {
// transpileOnly: true
// }
// }
//],
}
// ,
// {
// test: /\.js$/,
// exclude: [/node_modules/, '/src/scss/'],
// use: {
// loader: 'babel-loader',
// options: {
// presets: [
// '@babel/preset-env',
// ],
// sourceType: 'module',
// },
// },
// }
],
},
infrastructureLogging: {
level: 'verbose', // or 'debug', 'info', 'warn', 'error', 'none'
debug: [/webpack-dev-server/], // Enable debug for the dev server
},
stats: {
loggingDebug: true, // Enable debug info for plugins/loaders
},
plugins: [
new NodePolyfillPlugin(),
new webpack.NormalModuleReplacementPlugin(/^node:/, (resource) => {
resource.request = resource.request.replace(/^node:/, '');
})
],
resolve: {
fallback: {
"url": require.resolve("url")
},
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
},
};
export default config;
