Webpack和Typescript编译多目录项目

时间:2018-02-08 10:55:09

标签: javascript typescript webpack module

我再次在这里寻求一些帮助,这次是关于webpack和打字稿。我exports is not defined遇到了很多问题,浏览器似乎无法理解打字稿导入/导出,所以人们建议我使用webpack。

我试图理解它们是如何工作的,更具体地说,是在分为不同文件夹和子文件夹的项目中。

我们假设这是我的项目结构

- myProject/
 - src/
  - server.ts
  - game/
    - Game.ts
    - Player.ts
  - static/
    - js/
     - game.ts
 - build/

  // build use same structure of src/

在我的第一次尝试中,我使用 Gulp 将TS编译为JS,它按照我想要的方式工作,它采用了 src / 的结构并编译了所有镜像 - 就像在构建/ 文件夹中一样。

减去出口问题,这显然不允许我拆分我的项目并导入我需要的各种课程。

所以我尝试了使用此配置的webpack

webpack.config.js

const path = require('path');

    module.exports = {
        entry: {
         server: "./src/server.ts",
         game: "./src/static/js/game.ts",
         gameClasses: ["./src/game/Game.ts", "./src/game/Player.ts"]

        },
        output: {
            path: path.resolve(__dirname, "build"),
            filename: "[name].js"
        },
        resolve: {
            modules: [
            "node_modules",
            path.resolve(__dirname, "./")
        ],
            // Add '.ts' and '.tsx' as a resolvable extension.
            extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
        },
        module: {
            loaders: [
                // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
                { test: /\.tsx?$/, loader: "ts-loader" }
            ]
        }
    }

这是我从文档中复制的一个非常基本的配置,我做的唯一更改是告诉配置有关 node_modules 文件夹和多个入口点,但似乎事情不能正常工作,我尝试编译我得到大量关于模块的黄色/红色错误:

 Asset     Size  Chunks                    Chunk Names
     server.js  1.96 MB       0  [emitted]  [big]  server
gameClasses.js   3.5 kB       1  [emitted]         gameClasses
       game.js  3.38 kB       2  [emitted]         game
   [4] (webpack)/buildin/global.js 509 bytes {0} [built]
  [45] (webpack)/buildin/module.js 517 bytes {0} [built]
  [74] ./src/game/Game.ts 567 bytes {1} {2} [built]
 [152] ./src/server.ts 828 bytes {0} [built]
 [225] ./node_modules/express/lib 160 bytes {0} [built]
 [341] ./node_modules/uws ^\.\/uws_.*$ 404 bytes {0} [built]
 [365] ./node_modules/socket.io/lib 160 bytes {0} [built]
 [366] ./src/static/js/game.ts 235 bytes {2} [built]
 [367] multi ./src/game/Game.ts ./src/game/Player.ts 40 bytes {1} [built]
 [368] ./src/game/Player.ts 199 bytes {1} [built]
    + 359 hidden modules

WARNING in ./node_modules/socket.io/lib/index.js
108:11-32 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/socket.io/lib/index.js
 @ ./src/server.ts

WARNING in ./node_modules/express/lib/view.js
81:13-25 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/express/lib/view.js
 @ ./node_modules/express/lib/application.js
 @ ./node_modules/express/lib/express.js
 @ ./node_modules/express/index.js
 @ ./src/server.ts

WARNING in ./node_modules/ws/lib/BufferUtil.js
Module not found: Error: Can't resolve 'bufferutil' in '/home/k3nzie/projects/tsGame/node_modules/ws/lib'
 @ ./node_modules/ws/lib/BufferUtil.js 35:21-42
 @ ./node_modules/ws/lib/Receiver.js
 @ ./node_modules/ws/index.js
 @ ./node_modules/engine.io/lib/server.js
 @ ./node_modules/engine.io/lib/engine.io.js
 @ ./node_modules/socket.io/lib/index.js
 @ ./src/server.ts

WARNING in ./node_modules/ws/lib/Validation.js
Module not found: Error: Can't resolve 'utf-8-validate' in '/home/k3nzie/projects/tsGame/node_modules/ws/lib'
 @ ./node_modules/ws/lib/Validation.js 10:22-47
 @ ./node_modules/ws/lib/Receiver.js
 @ ./node_modules/ws/index.js
 @ ./node_modules/engine.io/lib/server.js
 @ ./node_modules/engine.io/lib/engine.io.js
 @ ./node_modules/socket.io/lib/index.js
 @ ./src/server.ts

WARNING in ./node_modules/uws/uws_linux_51.node
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/uws ^\.\/uws_.*$
 @ ./node_modules/uws/uws.js
 @ ./node_modules/engine.io/lib/server.js
 @ ./node_modules/engine.io/lib/engine.io.js
 @ ./node_modules/socket.io/lib/index.js
 @ ./src/server.ts

WARNING in ./node_modules/uws/uws_linux_48.node
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/uws ^\.\/uws_.*$
 @ ./node_modules/uws/uws.js
 @ ./node_modules/engine.io/lib/server.js
 @ ./node_modules/engine.io/lib/engine.io.js
 @ ./node_modules/socket.io/lib/index.js
 @ ./src/server.ts

WARNING in ./node_modules/uws/uws_linux_47.node
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/uws ^\.\/uws_.*$
 @ ./node_modules/uws/uws.js
 @ ./node_modules/engine.io/lib/server.js
 @ ./node_modules/engine.io/lib/engine.io.js
 @ ./node_modules/socket.io/lib/index.js
 @ ./src/server.ts

WARNING in ./node_modules/uws/uws_linux_46.node
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/uws ^\.\/uws_.*$
 @ ./node_modules/uws/uws.js
 @ ./node_modules/engine.io/lib/server.js
 @ ./node_modules/engine.io/lib/engine.io.js
 @ ./node_modules/socket.io/lib/index.js
 @ ./src/server.ts

WARNING in ./node_modules/uws/uws_darwin_48.node
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/uws ^\.\/uws_.*$
 @ ./node_modules/uws/uws.js
 @ ./node_modules/engine.io/lib/server.js
 @ ./node_modules/engine.io/lib/engine.io.js
 @ ./node_modules/socket.io/lib/index.js
 @ ./src/server.ts

WARNING in ./node_modules/uws/uws_darwin_51.node
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/uws ^\.\/uws_.*$
 @ ./node_modules/uws/uws.js
 @ ./node_modules/engine.io/lib/server.js
 @ ./node_modules/engine.io/lib/engine.io.js
 @ ./node_modules/socket.io/lib/index.js
 @ ./src/server.ts

WARNING in ./node_modules/uws/uws_darwin_47.node
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/uws ^\.\/uws_.*$
 @ ./node_modules/uws/uws.js
 @ ./node_modules/engine.io/lib/server.js
 @ ./node_modules/engine.io/lib/engine.io.js
 @ ./node_modules/socket.io/lib/index.js
 @ ./src/server.ts

WARNING in ./node_modules/uws/uws_darwin_46.node
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/uws ^\.\/uws_.*$
 @ ./node_modules/uws/uws.js
 @ ./node_modules/engine.io/lib/server.js
 @ ./node_modules/engine.io/lib/engine.io.js
 @ ./node_modules/socket.io/lib/index.js
 @ ./src/server.ts

WARNING in ./node_modules/uws/uws_win32_48.node
Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/uws ^\.\/uws_.*$
 @ ./node_modules/uws/uws.js
 @ ./node_modules/engine.io/lib/server.js
 @ ./node_modules/engine.io/lib/engine.io.js
 @ ./node_modules/socket.io/lib/index.js
 @ ./src/server.ts

WARNING in ./node_modules/uws/uws_win32_51.node
Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/uws ^\.\/uws_.*$
 @ ./node_modules/uws/uws.js
 @ ./node_modules/engine.io/lib/server.js
 @ ./node_modules/engine.io/lib/engine.io.js
 @ ./node_modules/socket.io/lib/index.js
 @ ./src/server.ts

ERROR in ./node_modules/destroy/index.js
Module not found: Error: Can't resolve 'fs' in '/home/k3nzie/projects/tsGame/node_modules/destroy'
 @ ./node_modules/destroy/index.js 14:17-30
 @ ./node_modules/send/index.js
 @ ./node_modules/express/lib/response.js
 @ ./node_modules/express/lib/express.js
 @ ./node_modules/express/index.js
 @ ./src/server.ts

ERROR in ./node_modules/etag/index.js
Module not found: Error: Can't resolve 'fs' in '/home/k3nzie/projects/tsGame/node_modules/etag'
 @ ./node_modules/etag/index.js 22:12-25
 @ ./node_modules/express/lib/utils.js
 @ ./node_modules/express/lib/application.js
 @ ./node_modules/express/lib/express.js
 @ ./node_modules/express/index.js
 @ ./src/server.ts

ERROR in ./node_modules/express/lib/view.js
Module not found: Error: Can't resolve 'fs' in '/home/k3nzie/projects/tsGame/node_modules/express/lib'
 @ ./node_modules/express/lib/view.js 18:9-22
 @ ./node_modules/express/lib/application.js
 @ ./node_modules/express/lib/express.js
 @ ./node_modules/express/index.js
 @ ./src/server.ts

ERROR in ./node_modules/mime/mime.js
Module not found: Error: Can't resolve 'fs' in '/home/k3nzie/projects/tsGame/node_modules/mime'
 @ ./node_modules/mime/mime.js 2:9-22
 @ ./node_modules/send/index.js
 @ ./node_modules/express/lib/response.js
 @ ./node_modules/express/lib/express.js
 @ ./node_modules/express/index.js
 @ ./src/server.ts

ERROR in ./node_modules/send/index.js
Module not found: Error: Can't resolve 'fs' in '/home/k3nzie/projects/tsGame/node_modules/send'
 @ ./node_modules/send/index.js 23:9-22
 @ ./node_modules/express/lib/response.js
 @ ./node_modules/express/lib/express.js
 @ ./node_modules/express/index.js
 @ ./src/server.ts

ERROR in ./node_modules/socket.io/lib/index.js
Module not found: Error: Can't resolve 'fs' in '/home/k3nzie/projects/tsGame/node_modules/socket.io/lib'
 @ ./node_modules/socket.io/lib/index.js 7:11-24 9:13-26
 @ ./src/server.ts

ERROR in ./node_modules/express/lib/request.js
Module not found: Error: Can't resolve 'net' in '/home/k3nzie/projects/tsGame/node_modules/express/lib'
 @ ./node_modules/express/lib/request.js 18:11-25
 @ ./node_modules/express/lib/express.js
 @ ./node_modules/express/index.js
 @ ./src/server.ts

小编辑:圣洁的莫莉! server.js是2MB,很重......我想知道为什么......

供参考,以下是 server.ts

中的导入
let express = require('express');
let path = require('path');
let app = express();
let server = require('http').Server(app);
let io = require('socket.io')(server);

在我的 game.js 中有类导入

import { Game } from "./../../game/Game";

我做错了什么?

这是实现我想要的正确方法(如Gulp的输出结构)吗?

0 个答案:

没有答案