Question

我正在尝试建立一个Web项目，但我不知道我的选择是否合适。我正在使用Three.js，Socket.io和webpack。（然后，我计划设置一个节点服务器以与将来的BDD进行交互，但是我想使前端服务器首先工作）

首先，我使用Three.js创建了一个场景。当我想使用typeScript时，我选择了webpack来构建我的文件并提供服务。（此外，重新加载更改等非常有用。）

当我在http://localhost:9000/处打开浏览器时，将出现该场景。现在，我想插入套接字io来了解何时连接了客户端。我知道我必须在我的index.html文件<script src="/socket.io/socket.io.js"></script>

中加载该脚本

但是... 1-我应该在哪里放置服务器代码？我main.ts中的所有代码都是在前端构建和使用的...我读到webpack开发服务器使用NodeJ来提供文件。我可以将其与套接字IO一起使用吗？此刻我真的很困惑：/

我的项目如下所示： `

|_app
|   |_scenes
|   |    |_myThreeJsScene.ts
|   |_main.ts
|_dist
|   |_index.html
|   |_main.js (builded with webpack)
|_package.json
|_tsconfig.json
|_webpack.config.js

`

我的webpack配置：

`

module.exports = {
  mode: 'development',
  entry: './app/main.ts',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    port: 9000,
    https: true,
    open: 'chrome'
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    path: __dirname + '/dist',
    filename: 'main.js'
  }
};

`

2-您还可以就如何组织代码提出建议吗？（我不知道'app'是否是主文件夹等的好名字。。:: /）

3-任何其他建议都非常感谢！：D

谢谢您的帮助！

如何使用Typescrip / Webpack开发服务器和套接字IO设置Web项目

0 个答案: