Question

我是Webpack的新手，并将打字稿文件捆绑到一个文件中。我得到了以下设置，我希望在我的所有打字稿捆绑的情况下实现单个JS文件。

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文件，其中包含一些实际工作的node_module。例如，JQuery可以工作。但是，如果我尝试使用从单个命名空间使用的类和子类，我会走在墙上。

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!");
});

这是我尝试使用的App.ts（导入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();
                    }
                }
            });
        }
    }
}

我使用的套餐

{
  "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"
  }
}

我希望有人可以帮助我清除错误的思维方式。

Answer 1

有几件事：

Typescript配置，您can copy。使用your types
更改导入导出并删除命名空间

export class App { ... }

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

上课需要驱逐舰
最后在webpack.config.js中可以设置属性

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

Webpack 2将具有相同命名空间的bundlecript文件放入单个文件中

1 个答案: