![](/img/trans.png)
[英]Typescript syntax error on CommonJS/Node module: Unexpected token ':' on function param
[英]Typescript/Node Unexpected token *
我正在嘗試將我的應用程序節點后端更新為打字稿,但我一直遇到此語法錯誤:
/Users/Shared/website/src/server.ts:1
(function (exports, require, module, __filename, __dirname) { import *
as express from 'express';
^
SyntaxError: Unexpected token *
我的 tsconfig/webpack/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 / node 文件的問題。 我對嘗試設置這一切很陌生,但我想練習使用多種技術(react/node/typescript/sass/webpack/etc)制作網站。 到目前為止,除了打字稿/節點關系之外,我擁有一切。
在我意識到未應用 tsconfig 之后,我遇到了同樣的問題。
如果
"module": "commonjs"
實際上,你不會有這個錯誤。
我之前也遇到過同樣的問題。 我通過更改導入“調用”來解決它:
從:
import * as express from 'express';
至:
const express = require('express');
正如其他人所說,問題是您的 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 包含的另一個路徑一樣簡單。
所以我在 github 上看到了這篇文章,其中基本上有兩種工作方法,因為您使用的是針對 es6 add 的捆綁工具
"allowSyntheticDefaultImports": true
對”compilerOptions”
"allowSyntheticDefaultImports": true
或者換
import express from "express";
至
import express = require('express');
如果您的tsconfig.json
不在項目的根目錄下,則可能會發生這種情況。 將 webpack 配置為指向您的目標配置文件(您可以使用變量對其進行更改以指向 dev 和 prod 配置)。
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")
}
}
]
}
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.