同构应用程序，TypeORM && TypeScript && Express && Webpack 设置问题

Question

我正在尝试制作同构 JavaScript 应用程序。

服务器端代码和客户端代码均由Webpack编译。

当我尝试运行编译包含 typeorm 连接的服务器端包时，我收到这样的错误

错误

(node:324) UnhandledPromiseRejectionWarning: /var/www/server/database/entity/WasteGroup.ts:1
(function (exports, require, module, __filename, __dirname) { import {Entity,PrimaryGeneratedColumn, OneToMany} from "typeorm";
                                                                     ^

SyntaxError: Unexpected token {
    at new Script (vm.js:74:7)
    at createScript (vm.js:246:10)
    at Object.runInThisContext (vm.js:298:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)

预编译Server.ts

// Set up ======================================================================
// get all the tools we need
import express from 'express';
import http from 'http';
import logger from 'morgan';
import path from 'path';
import {createConnection} from "typeorm";
import apiVersion1 from './api/api1';
import  renderRouterMiddleware from '../iso-middleware/renderRoute';

const init = () => {
  createConnection().then(() => {

    require('dotenv').config();
    // Configuration ===============================================================
    const app = express();

    app.set('port', process.env.PORT || 3000);
    app.use(logger('short'));


    // Request Handlers
    const buildPath = path.join(__dirname, '../', 'build');

    app.use('/', express.static(buildPath));
    app.use('/api', apiVersion1);

    app.get('*', renderRouterMiddleware);

    // launch ======================================================================
    // Starts the Express server on port 3001 and logs that it has started
    http.createServer(app).listen(app.get('port'), () => {
      console.log(`Express server started at: http://localhost:${app.get('port')}/`); // eslint-disable-line no-console
    }, );

  })
}

export {
  init
}

Webpack相关配置

普通

const path = require('path')
const webpack = require('webpack')

module.exports = {
    mode: 'development',
    devtool: '#source-map',

    output: {
      path: path.resolve(__dirname, '..','build'),
      publicPath: '/',
      filename: '[name].js'
    },
    module: {
      rules: [
        {
          test: /\.(jsx?|tsx?)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', "@babel/preset-react"],

            }
          }
        },
        {
          test: /\.tsx?$/,
          loader: 'awesome-typescript-loader',
          exclude: /node_modules/
        },
        {
          enforce: "pre",
          test: /\.js$/,
          exclude: /node_modules/,
          loader: "eslint-loader",
          options: {
            emitWarning: true,
            failOnError: false,
            failOnWarning: false,
            fix:true
          }
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        },
        {
          test: /\.(png|svg|jpg|gif)$/,
          use: ['file-loader']
        }
      ]
    },
    resolve: {
      alias: {
        Shared: path.resolve(__dirname, '../shared')
      },
      extensions: ['.js','.ts', '.tsx', '.jsx', '.css', '.es6'],
    },
    plugins: [
      // new webpack.NoEmitOnErrorsPlugin()
    ],
  }

服务器

const path = require('path')
const webpack = require('webpack')
const nodeExternals = require('webpack-node-externals')
const merge = require('webpack-merge')
const commonDevConfig = require('./webpack.dev.common.js')

const server = {
  target: 'node',
  node: {
    // Need this when working with express, otherwise the build fails
    __dirname: false,   // if you don't put this is, __dirname
    __filename: false,  // and __filename return blank or /
  },
  externals: [nodeExternals()],
  entry: {
    server: './server/server.ts',
  },
  output:{
    libraryTarget:'commonjs2'
  }
}

module.exports = merge(commonDevConfig, server)

WasteGroup.ts

    import {Entity,PrimaryGeneratedColumn, OneToMany} from "typeorm";
    import {WasteType} from './WasteType'
    @Entity()
    export class WasteGroup {
        @PrimaryGeneratedColumn()
        id: number;

        @OneToMany(type => WasteType, WasteType => WasteType.wasteGroup)
    types:WasteType;

}

ormconfig.json

{
    "type": "mysql",
    "host": "mysql",
    "port": 3306,
    "username": "nodedock",
    "password": "nodedock",
    "database": "wietlin_osada_db",
    "entities": ["server/database/entity/*.ts"],
    "migrations":[
      "server/database/migration/*.ts"
    ],
    "cli":{
      "migrationsDir":"server/database/migration",
      "entitiesDir": "server/database/entity"
    },
    "logging": true,
    "synchronize": false
  }

tsconfig.json

{
    "compilerOptions": {
        "module":"es6",
        "target":"es6",
        "moduleResolution":"node",
        "noImplicitAny": false,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports":true,
        "removeComments": true,
        "preserveConstEnums": true,
        "experimentalDecorators":true,
        "emitDecoratorMetadata":true,
        // "noEmit":true,
        "jsx":"react",
        "sourceMap":true
    },
    "include": [
        "server/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

我运行使用这样的 npm 脚本编译 webpack 后正在运行应用程序

"runNodeServerApp":"node -e 'require(\"./build/server.js\").init()'"

当在没有 TypeORM 连接的情况下运行ning 应用程序时，它确实可以正常工作。

这是 TypeORM 问题还是我的设置问题？

如果它能帮助到任何人，这就是我的项目树。

├── build
│   ├── main.js
│   ├── main.js.map
│   ├── server.js
│   └── server.js.map
├── client
│   └── main.js
├── configs
│   ├── webpack.dev.client.js
│   ├── webpack.dev.common.js
│   └── webpack.dev.server.js
├── iso-middleware
│   └── renderRoute.js
├── ormconfig.json
├── package.json
├── package-lock.json
├── README.md
├── server
│   ├── api
│   │   └── api1.ts
│   ├── controller
│   │   └── WastePickupController.ts
│   ├── database
│   │   ├── entity
│   │   │   ├── WasteGroup.ts
│   │   │   ├── WastePickupEvent.ts
│   │   │   └── WasteType.ts
│   │   ├── migration
│   │   │   └── 1567256869205-Init.ts
│   │   └── repositories
│   │       └── TestRepository
│   │           └── index.js
│   └── server.ts
├── shared
│   ├── App.js
│   ├── components
│   │   ├── HTML.js
│   │   ├── icons
│   │   │   └── DumpTruck
│   │   │       └── index.js
│   │   ├── Main.js
│   │   ├── NotFound.js
│   │   ├── pages
│   │   │   └── Home
│   │   │       ├── components
│   │   │       │   ├── MainAppBar
│   │   │       │   │   └── index.js
│   │   │       │   ├── WasteScheduleCard
│   │   │       │   │   ├── DumpTruck
│   │   │       │   │   │   └── index.js
│   │   │       │   │   ├── index.js
│   │   │       │   │   └── WasteScheduleLegendOpener
│   │   │       │   │       └── index.js
│   │   │       │   ├── WeatherCard
│   │   │       │   │   └── index.js
│   │   │       │   └── WeatherWidget
│   │   │       │       └── index.js
│   │   │       └── index.js
│   │   └── Root.js
│   ├── renderFullApp.js
│   ├── routes.js
│   └── theme
│       └── index.js
└── tsconfig.json

Answer 1

这里的问题是您在 ormconfig.json 中引用了 TypeScript 文件，而您的节点服务器无法处理 TypeScript。您需要转译它们并引用 JavaScript 文件。另见 .

同构应用程序，TypeORM && TypeScript && Express && Webpack 设置问题

Isomoprhic application, problem with TypeORM && TypeScript && Express && Webpack setup

node.js

typescript

webpack

isomorphic-javascript

typeorm