Node.js + Typescript + Webpack = 模块未找到

4
我是一个新手,对Webpack、Node.js和Typescript不熟悉,我在配置开发环境时遇到了问题。
当我运行webpack编译src/server.ts以生成/server/bundle.js时,出现了以下错误:
ERROR in ./src/server.ts
Module not found: Error: Can't resolve 'hapi' in '/Volumes/Dados/giovane/dev/studio-hikari/nodang/nodang-api/src'
 @ ./src/server.ts 3:11-26

项目的架构是:

enter image description here

src/server.ts文件:

import * as Hapi from 'hapi';

const server = new Hapi.Server();

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/server.ts',
  output: {
    filename: './server/bundle.js'
  },
  resolve: {
    extensions: ['.ts'],
    modules: [
      path.resolve('src'),
      path.resolve('node_modules')
    ]
  },
  module: {
    loaders: [
      {
        test: /.ts$/,
        loader: 'awesome-typescript-loader'
      }
    ]
  }
};

package.json文件:

{
  "name": "nodang-api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "compile": "webpack --progress --watch",
    "serve": "node-dev server/bundle.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/hapi": "^16.0.0",
    "lodash": "^4.17.4"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^3.0.8",
    "tsd": "^0.6.5",
    "typescript": "^2.2.1",
    "webpack": "^2.2.1"
  }
}

OBS:这是webpack 2

更新

安装hapi后,将.js添加到webpack的解析扩展名中,并将node设置为webpack的目标后,我在使用hapi模块时遇到了以下错误:

ERROR in ./~/hapi/lib/server.js
Module not found: Error: Can't resolve 'catbox' in '/Volumes/Dados/giovane/dev/studio-hikari/nodang/nodang-api/node_modules/hapi/lib'
 @ ./~/hapi/lib/server.js 5:15-32
 @ ./~/hapi/lib/index.js
 @ ./src/server.ts

ERROR in ./~/hapi/lib/server.js
Module not found: Error: Can't resolve 'catbox-memory' in '/Volumes/Dados/giovane/dev/studio-hikari/nodang/nodang-api/node_modules/hapi/lib'
 @ ./~/hapi/lib/server.js 6:21-45
 @ ./~/hapi/lib/index.js
 @ ./src/server.ts

@AnyName 刚刚添加了。 - Giovane
test: /\.ts$/, may be you would escape the . - Jai
@Jai做到了,同样的事情。 - Giovane
import * as Hapi from '@types/hapi'; - paqash
@Giovane,我在依赖项中没有看到hapi。看起来你忘记安装这个依赖项了,你只安装了类型。 - Jai
显示剩余2条评论
1个回答

8

您没有安装hapi库。 @types/hapi只是TypeScript用于该库的类型定义,而不是实际的库本身。因此,您还需要添加hapi库:

npm install --save hapi

一旦您安装了它,就可以找到该模块,尽管您将收到一个新的错误消息,指出在 hapi/lib/index.js 中无法解析 ./server,这是因为您将 resolve.extensions 配置为仅包括 .ts,但库在离开扩展名时使用 Node 自动解析 .js。因此,您还需要将 .js 包含在扩展名中:

extensions: ['.ts', '.js'],

解决了上述问题之后,你会遇到另一个问题,即 Node 内置模块(如fs)无法被解析。默认情况下,webpack 是为 web 构建的,因此 Node 内置模块是不可用的。但是,你可以通过在 webpack 配置中设置目标(target)选项为node来改变这一点:

target: 'node'

编辑

你遇到了其他 node_modules 的问题,因为你只使用了顶级的 node_modules,而你希望总是回退到常规的 node_modules 模块解析,所以 resolve.modules 应该像这样:

modules: [
  path.resolve('src'),
  'node_modules'
]

很棒的回答!我想问一个问题。使用webpack针对node.js有没有任何实际的原因?谢谢。 - Hoang Hiep
1
我想主要原因是为了拥有一个仅包含必要内容(可优化)的生产构建,并且运行应用程序所需的只是捆绑包(和 Node,当然),而无需安装任何依赖项。 - Michael Jungo
太好了,现在正在编译hapi。但我从hapi模块中得到了新的错误。 - Giovane
我编辑了答案以解决那个问题。我没有遇到那个问题,因为我正在使用Yarn,它将这些依赖项安装到顶层,而不像npm那样。 - Michael Jungo
哥们,你真是我的英雄!一切都运行得很好!我只需要从tsconfig.json中删除我添加的"typeRoots": ["node_modules"]就可以了。 - Giovane

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接