Question

我有以下结构（基于lerna）：

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

index.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}`)
    });
  }
}

我正在尝试使用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

> app-core@0.0.1 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! app@0.0.1 build: `webpack --mode development`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the app-core@0.0.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Answer 1

使用path代替/。
您似乎正在构建一个节点js项目。您不需要tsx。它是网站的响应文件的扩展。
awesome-typescript-loader的GitHub似乎不再受支持。尝试移至ts-loader或babel-loader。

我有一个示例和最小的项目就可以做到这一点（babel-loader）： https://github.com/stavalfi/lerna-yarn-workspaces-example/blob/master/packages/x-cli/webpack.config.ts

您还应该使用我的.babelrc，以便所有es6语法也都可以显示。

使用lerna子包为节点TS配置webpack

1 个答案: