web-dev-qa-db-ja.com

Typescript / Node予期しないトークン*

アプリノードバックエンドをTypeScriptに更新しようとしていますが、次の構文エラーが発生します。

/Users/Shared/website/src/server.ts:1
(function (exports, require, module, __filename, __dirname) { import * 
as express from 'express';
                                                                 ^

SyntaxError: Unexpected token *

Tsconfig/webpack/serverなどを次のように設定しています。

server.ts

import * as express from 'express';
import * as path from 'path';

const app = express();
const port = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname, 'dist')));
app.get('*', function(req, res, next){
    res.sendFile(path.resolve(__dirname, '/public', 'index.html'));
});

app.listen(port, () => console.log(`Listening on port ${port}!`));

webpack.config.json：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const outputDirectory = 'dist';

module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "bundle.js",
        path: path.join(__dirname, outputDirectory)
    },
    mode: 'development',

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx", ".js", ".json"]
    },

    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-TypeScript-loader'.
            { test: /\.tsx?$/, loader: "ts-loader" },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },

            {
                test: /\.scss$/,
                use: [
                    "style-loader", // creates style nodes from JS strings
                    "css-loader", // translates CSS into CommonJS
                    "sass-loader" // compiles Sass to CSS, using Node Sass by default
                ]
            }
        ]
    },

    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.
    externals: {
    },

    plugins: [
        new CleanWebpackPlugin([outputDirectory]),
        new HtmlWebpackPlugin({
          template: './public/index.html',
          favicon: './public/favicon.gif'
        }),
        new CopyWebpackPlugin([
            { from: 'public' }
        ])
    ]
};

tsconfig.json：

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": false,
        "module": "commonjs",
        "target": "es6",
        "jsx": "react"
    },
    "include": [
        "./src/**/*"
    ],
}

ビルドプロセスは成功しますが、実行時にsyntaxErrorにヒットします。 TypeScript/tsxを使用して設定された反応フロントエンドもあり、問題なく動作します。 server.ts/nodeファイルで問題が発生しているようです。私はこれをすべてセットアップしようとするのは初めてですが、多数のテクノロジー（react/node/TypeScript/sass/webpack/etc）を使用してサイトを作成する練習をしたかったのです。これまでのところ、TypeScriptとノードの関係以外はすべて揃っています。

node.jstypescriptwebpackcommonjs
6
jajabarr

以前にも同じ問題に直面しました。インポートの「呼び出し」を変更して解決します。

から：

import * as express from 'express';

に：

const express = require('express');
1
Rodrigo Aires

だから私は出会った this githubへの投稿es6 addをターゲットにしたバンドルツールを使用しているため、基本的に2種類の動作方法が提示されている

"allowSyntheticDefaultImports": true〜”compilerOptions”

または変更

import express from "express";

に

import express = require('express');
0
Vaibhav Kumar Goyal

他の人が述べたように、問題はtsconfig.jsonがserver.tsに適用されていないことです。セットアップの重要な詳細が省略されているため、他の人がこの問題を再現できません。

私は問題が何であるかについて十分に推測しており、この同じ問題に私自身で苦労してきたので、この問題によって他の貧しい魂が苦しんでいるのを助けることを期待してここで私の推測を説明します。

基本的な問題は、サーバーコードが反応コードとは異なるツリーにあることです。これは、tsconfig.jsonが指定された「./src/」パスの外にある（私はそう思います）ため、それに適用されない理由です。 （おそらく "./website/src/"）。

Package.jsonファイルは表示していませんが、サーバーエントリは「server」のようなものである可能性が高いです：「ts-node ./website/src/server.ts」

Tsconfig.jsonアプリケーションが問題であることを確認するには、コマンドラインからこれを試してください...

$ ts-node -O '{\"module\":\"commonjs\"}' ./website/src/server.ts

おそらく、物事は機能し始めるでしょう。現在のソリューションは、tsconfig.jsonに含まれる別のパスを追加するのと同じくらい簡単です。

0
AQuirky

これは、tsconfig.jsonがプロジェクトのルートにない場合に発生する可能性があります。ターゲットの構成ファイル（devとprodの構成を指すように変数で変更できます）を指すようにwebpackを構成します。

https://github.com/TypeStrong/ts-loader

設定されている場合、指定された絶対パスをベースパスとしてTypeScript構成ファイルを解析します。デフォルトでは、構成ファイルのディレクトリがベースパスとして使用されます。構成ファイルの相対パスは、解析時にベースパスを基準に解決されます。オプションコンテキストでは、オプションconfigFileをプロジェクトルート以外のパス（NPMパッケージなど）に設定できますが、ts-loaderのベースパスはプロジェクトルートのままにできます。

webpack.config.jsファイルを次のように変更してみてください。

module.exports = {
  ...
  module: {
    rules: [
      {
        options: {
          configFile: path.join(__dirname, "tsconfig.json")
        }
      }
    ]
  }
};
0
nwayve