我正在尝试将我的应用程序节点后端更新为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/**/*"
],
}
构建过程成功,但是在运行时出现了语法错误。我有一个也使用typescript / tsx设置的React前端,它工作得很好。我似乎只是遇到server.ts /节点文件的问题。我对尝试完成所有这些工作非常陌生,但是我想练习制作具有多种技术(react / node / typescript / sass / webpack / etc)的网站。到目前为止,除了打字稿/节点关系之外,我已经拥有一切。
答案 0 :(得分:4)
我以前也遇到过同样的问题。我可以通过更改导入的“通话”来解决它:
发件人:
import * as express from 'express';
收件人:
const express = require('express');
答案 1 :(得分:1)
在意识到未应用tsconfig之后,我遇到了同样的问题。
如果
"module": "commonjs"
生效,您不会遇到此错误。
答案 2 :(得分:0)
所以我遇到了github上的this帖子,基本上介绍了两种工作方法,因为您使用的是针对es6 add的捆绑工具
select distinct on (symbol) sc.*
from ((select distinct on (cnd.symbol) cnd.*, 1 as ord
from test.key_ratios_cnd cnd
order by cnd.symbol, cnd.fiscal_year desc
) union all
(select distinct on (snd.symbol) cnd.*, 2 as ord
from test.key_ratios_cnd cnd
order by snd.symbol, snd.fiscal_year desc
)
) sc
order by symbol, fiscal_year desc, ord;
至(symbol, fiscal_year desc)
或更改
"allowSyntheticDefaultImports": true
到
”compilerOptions”
答案 3 :(得分:0)
如果您的tsconfig.json
不在项目的根目录下,则可能会发生这种情况。将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")
}
}
]
}
};
答案 4 :(得分:0)
正如其他人所述,问题是您的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包含的另一个路径一样。