Webpack 2 bundle typescript files with same namespace into a single file

Question

I am new to Webpack and bundling typescript files into a single file. I got the following setup where I would like to achieve a single JS files with all my typescript bundled.

tsconfig.json:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "removeComments": true,
    "sourceMap": true,
    "target": "es6",
    "moduleResolution": "node"
  },
  "exclude": [
    "node_modules",
    "libs"
  ]
}

Webpack.config.js

var path = require("path");
const { CheckerPlugin } = require('awesome-typescript-loader');

const config = {
    entry: {
        Bootstrap: "./Bootstrapper.ts"
    },
    output: {
        //output file naming conventions https://webpack.js.org/configuration/output/#output-filename when having more different configs with outputs
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, "wwwroot/dist")
    },
    context: path.resolve(__dirname, "App"),
    devtool: "inline-source-map",
    module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "awesome-typescript-loader"
      }
    ]
  },
  plugins: [
      new CheckerPlugin()
  ]
}

module.exports = config;

Bootstrap typescript file where I incude some node_module that actually work. JQuery works for instance. But If I try to use the class and subclasses that I use from a single namespace I walk against a wall.

Bootstrapper.ts

import * as $ from "jquery";
import * as Konva from "konva";
import * as SignalR from "@aspnet/signalr";
import * as ko from "knockout";

//How do I use these classes that are in different files
import App = Project.Web.Core.App;

$("document").ready(() => {
    let app = new App();
    alert("This works if I leave the App reference out!");
});

This is the App.ts that I try to use (import App = Project.Web.Core.App;)

namespace Project.Web.Core {
    export class App {

        pageId: number = 0;
        pageRequestId: string = "";
        //drawingManager = new Managers.KonvaDrawManager();
        signalRmanager = new Managers.SignalRmanager("");

        constructor() {

            $("document").ready(() => {
                this.pageId = $("#container").data("pageid");
                this.pageRequestId = $("#container").data("pagerequestid");
                this.signalRmanager.pageRequestId = this.pageRequestId;

                //this.signalRmanager.setupSignalRConnection(this.drawingManager);
                this.loadCanvasData();
            });

            window.onresize = () => {
                //this.drawingManager.rescale();
            };

            window.onunload = () => {
                this.signalRmanager.notifyPageUnloaded();
            }
        }

        loadCanvasData() {
            this.pageId = $("#container").data("pageid");

            $.get({
                dataType: "json",
                url: `api/page/${this.pageId}/stage`,
                success: (data: any) => {
                    //this.drawingManager.initializeStage(data);
                },
                complete: (data: any) => {
                    if (data.status === 200) {
                        this.signalRmanager.notifyPageLoaded();
                    }
                }
            });
        }
    }
}

Packages I use

{
  "name": "Project.Web_core",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "build": "./node_modules/.bin/webpack -d",
    "build:prod": "./node_modules/.bin/webpack -p",
    "watch": "./node_modules/.bin/webpack --watch",
    "dev": "./node_modules/.bin/webpack-dev-server"
  },
  "devDependencies": {
    "@types/jquery": "^3.3.1",
    "@types/knockout": "^3.4.53",
    "@types/knockout.mapping": "^2.0.33",
    "@types/webpack-env": "1.13.5",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.3",
    "awesome-typescript-loader": "^5.0.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "event-source-polyfill": "0.0.12",
    "json-loader": "0.5.7",
    "node-sass": "^4.8.3",
    "sass-loader": "^6.0.7",
    "style-loader": "0.20.1",
    "typescript": "2.7.1",
    "uglifyjs-webpack-plugin": "^1.2.4",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14",
    "webpack-dev-middleware": "^3.1.2",
    "webpack-dev-server": "^3.1.3",
    "webpack-merge": "4.1.1"
  },
  "dependencies": {
    "@aspnet/signalr": "^1.0.0-preview1-update1",
    "es5-shim": "^4.5.10",
    "es6-shim": "^0.35.3",
    "jquery": "3.3.1",
    "knockout": "^3.4.2",
    "knockout-mapping": "^2.6.0",
    "konva": "^2.0.2",
    "watchpack": "^1.4.0"
  }
}

I hope someone can help me out clearify my wrong way of thinking.

botika · Accepted Answer · 2018-04-20 06:11:48Z

3

+50

There are several things:

Typescript config, you can copy. With your types
change import export and remove namespace

export class App { ... }

import { App } from '/path/to/your/file';

class needs a destroyer
and finally in webpack.config.js you can set properties

entry: {
  Bootstrap: "./Bootstrapper.ts",
  namespace: "./path-to-your-namespace.ts",
  anotherNamespace: "./path-to-your-anotherNamespace.ts"
},
resolve: {
  extensions: ['.js', '.ts', '.json']
}

edited Apr 20, 2018 at 6:11

answered Apr 20, 2018 at 5:55

botika

5013 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Webpack 2 bundle typescript files with same namespace into a single file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related