使用 webpack 设置打字稿

Question

我正在使用 Typescript 开发带有 graphql 和 express 的后端 API。我正在使用 webpack 来管理项目开发和构建过程。

我正在使用 raw-loader 加载 graphql 模式和 sql 从文件中以字符串形式查询。

目前我遇到了一些不太明白的问题。

webpack.config.js

const path = require('path');

module.exports = {
  target: 'node',
  entry: {
    server: path.resolve(__dirname, 'server.ts'),
  },
  output: {
    filename: 'server.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.(gql|sql)$/,
        loader: 'raw-loader',
      },
      {
        test: /\.ts$/,
        loader: 'ts-loader',
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  watch: {
    ignored: /node_modues/,
  },
};

server.ts

import express from 'express';
import morgan from 'morgan';
import bodyParser from 'body-parser';
import graphqlHTTP from 'express-graphql';

import { affairSchema } from './src/schemas';
import affairRoot from './src/resolvers/affairs';

const app = express();

app.use(morgan('combined'));
app.use(bodyParser.json());

app.use(
  '/graphql',
  graphqlHTTP({
    schema: affairSchema,
    rootValue: affairRoot,
    graphiql: true,
  })
);

const port = process.env.PORT || 4000;
app.listen(port, () => console.log('Server waiting on ', port));

错误：

ERROR in ./node_modules/graphql/index.mjs
88:0-148:42 Can't reexport the named export 'typeFromAST' from non EcmaScript module (only default export is available)
 @ ./node_modules/graphql/index.mjs
 @ ./src/schemas/index.ts
 @ ./server.ts

ERROR in ./node_modules/graphql/index.mjs
88:0-148:42 Can't reexport the named export 'valueFromAST' from non EcmaScript module (only default export is available)
 @ ./node_modules/graphql/index.mjs
 @ ./src/schemas/index.ts
 @ ./server.ts

ERROR in ./node_modules/graphql/index.mjs
88:0-148:42 Can't reexport the named export 'valueFromASTUntyped' from non EcmaScript module (only default export is available)
 @ ./node_modules/graphql/index.mjs
 @ ./src/schemas/index.ts
 @ ./server.ts

ERROR in C:\Users\houssem\Projects\ctc\services\affairs\src\schemas\index.ts
./src/schemas/index.ts
[tsl] ERROR in C:\Users\houssem\Projects\ctc\services\affairs\src\schemas\index.ts(5,28)
      TS2307: Cannot find module './affairs.gql'.

ERROR in C:\Users\houssem\Projects\ctc\services\affairs\services\database\engineer.ts
./services/database/engineer.ts
[tsl] ERROR in C:\Users\houssem\Projects\ctc\services\affairs\services\database\engineer.ts(7,19)
      TS2307: Cannot find module './engineer.sql'.
.
.
.
.
.

Answer 1

您可以使用webpack-node-externals 来防止捆绑节点模块。这样可以去掉这样的错误，当然也需要node_modules时运行的应用。

使用 webpack 设置打字稿

setting up typescript with webpack

express

typescript

webpack

ts-loader