node.js - การกำหนดค่า webpack สำหรับ node TS กับ lerna subpackages

ฉันมีโครงสร้างดังต่อไปนี้ (อิงตาม lerna)

app/
  packages/
    core/
      index.ts
      src/
        server.ts
      node_nodules/
        ...
        express/
    auth/
      ...

ดัชนี.ts

import { Server } from './src/server';

new Server()

console.log('test');

src/server.ts

import * as express from 'express';

export class Server {

  private app: express.Application

  constructor() {
    this.init();
    this.bootstrap();
  }

  init(): void {
    this.app = express();
    this.app.get('/', (req, res, next) => {
      res.send("Hello world");
      next();
    });
  }

  bootstrap(): void {
    const PORT = 3000;
    this.app.listen(PORT, () => {
      console.log(`Express server listening on port ${PORT}.\nEnvironment: ${process.env.NODE_ENV}`)
    });
  }
}

ฉันกำลังพยายามคอมไพล์โค้ด TypeScript ด้วย webpack นี่คือไฟล์คอนฟิกของฉัน:

webpack.config.js

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  target: 'node',
  entry: {
    app: './packages/core/index.ts'
  },
  devtool: 'inline-source-map',
  plugins: [
    new CleanWebpackPlugin(['dist']),
  ],
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
    modules: ['node_modules']
  },
  module: {
    rules: [{
      test: /\.ts|\.tsx$/,
      include: ['packages/**/src'],
      use: [{
        loader: 'awesome-typescript-loader',
        options: {
            configFileName: 'tsconfig.json',
            sourceMap: true
        },
      }],
    }],
  },
};

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "strictNullChecks": false,
    "noImplicitAny": true,
    "removeComments": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015",
      "esnext.asynciterable"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5"
  },
  "include": [
    "packages/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "./packages/**/node_modules",
    "./packages/**/*.spec.ts",
    "e2e"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

แต่เมื่อรัน webpack ฉันได้รับดังต่อไปนี้:

➜  app git:(master) ✗ npm run build

> [email  build /home/dev/app
> webpack --mode development

clean-webpack-plugin: /home/dev/app/dist has been removed.
Hash: a2cdfcfd39d5692648d6
Version: webpack 4.1.0
Time: 80ms
Built at: 2018-3-7 10:50:04
 Asset      Size  Chunks             Chunk Names
app.js  7.83 KiB     app  [emitted]  app
Entrypoint app = app.js
[./packages/core/index.ts] 80 bytes {app} [built]
[./packages/core/src/server.ts] 218 bytes {app} [built] [failed] [1 error]

ERROR in ./packages/core/src/server.ts
Module parse failed: Unexpected token (5:10)
You may need an appropriate loader to handle this file type.
| export class Server {
| 
|   private app: express.Application
| 
|   constructor() {
 @ ./packages/core/index.ts 1:0-38 3:4-10
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email  build: `webpack --mode development`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email  build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

คำตอบ #1

1. ใช้ path แทน /
2. ดูเหมือนว่าคุณกำลังสร้างโปรเจกต์ Node.js คุณไม่จำเป็นต้องใช้ tsx มันเป็นนามสกุลสำหรับไฟล์ React สำหรับเว็บไซต์
3. GitHub ของ awesome-typescript-loader ดูเหมือนว่าจะไม่ได้รับการสนับสนุนแล้ว ลองย้ายไปใช้ ts-loader หรือ babel-loader ดู

ฉันมีตัวอย่างและโปรเจกต์ขนาดเล็กที่ทำสิ่งนั้น (babel-loader): https://github.com/stavalfi/lerna-yarn-workspaces-example/blob/master/packages/x-cli/webpack.config.ts

คุณควรใช้ไฟล์ .babelrc ของฉันด้วยเช่นกัน เพื่อให้ไวยากรณ์ es6 ทั้งหมดถูกแปลงด้วย