Javascript CommonJS/Node模块上的Typescript语法错误:意外标记';:';关于函数参数
此文件通过TS验证为有效,不再有错误,但在运行时,我在指定的任何TS上获得意外的标记“:”,例如它在Javascript CommonJS/Node模块上的Typescript语法错误:意外标记';:';关于函数参数,javascript,node.js,typescript,Javascript,Node.js,Typescript,此文件通过TS验证为有效,不再有错误,但在运行时,我在指定的任何TS上获得意外的标记“:”,例如它在函数(err:string) 以下是我的构建和启动脚本。我当然会运行build,然后运行start: "start": "node --trace-warnings dist/server.ts", "build": "NODE_ENV=production webpack -p --env=prod", api.
函数(err:string)
以下是我的构建和启动脚本。我当然会运行build,然后运行start:
"start": "node --trace-warnings dist/server.ts",
"build": "NODE_ENV=production webpack -p --env=prod",
api.ts
const _ = require('lodash'),
companyTable = require('./shared/data/companies.json'),
countryTable = require('./shared/data/countries.json'),
compression = require('compression'),
express = require('express'),
expressApp = (module.exports = express()),
historyApi = require('connect-history-api-fallback'),
oneYear = 31536000;
expressApp.use(compression());
module.exports = expressApp
.on('error', function (err: string) {
console.log(err);
})
.get('/api/v1/countries', (res: any) => {
res.json(
countryTable.map((country: any) => {
return _.pick(country, ['id', 'name', 'images']);
})
);
})
const app = require('./api.js');
const cluster = require('cluster'),
os = require('os'),
port = process.env.PORT || 8080;
console.log(port);
if (cluster.isMaster) {
for (let i = 0; i < os.cpus().length; i++) {
cluster.fork();
}
console.log('Ready on port %d', port);
} else {
app.listen(port, (err: string) => {
console.log(`express is listening on port ${port}`);
if (err) {
console.log('server startup error');
console.log(err);
}
});
}
server.ts
const _ = require('lodash'),
companyTable = require('./shared/data/companies.json'),
countryTable = require('./shared/data/countries.json'),
compression = require('compression'),
express = require('express'),
expressApp = (module.exports = express()),
historyApi = require('connect-history-api-fallback'),
oneYear = 31536000;
expressApp.use(compression());
module.exports = expressApp
.on('error', function (err: string) {
console.log(err);
})
.get('/api/v1/countries', (res: any) => {
res.json(
countryTable.map((country: any) => {
return _.pick(country, ['id', 'name', 'images']);
})
);
})
const app = require('./api.js');
const cluster = require('cluster'),
os = require('os'),
port = process.env.PORT || 8080;
console.log(port);
if (cluster.isMaster) {
for (let i = 0; i < os.cpus().length; i++) {
cluster.fork();
}
console.log('Ready on port %d', port);
} else {
app.listen(port, (err: string) => {
console.log(`express is listening on port ${port}`);
if (err) {
console.log('server startup error');
console.log(err);
}
});
}
更新
所以有人指出了显而易见的事实。询问为什么我的dist中有一个.ts文件(server.ts
)和api.ts
。这是因为我正在我的webpack.config.js中复制它:
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';
const html = () => {
return new HtmlWebPackPlugin({
template: path.resolve(__dirname, 'src/client', 'index.html'),
filename: 'index.html',
hash: true,
});
};
const copyAllOtherDistFiles = () => {
return new CopyPlugin({
patterns: [
{ from: 'src/client/assets', to: 'lib/assets' },
{ from: 'src/server.ts', to: './' },
{ from: 'src/api.ts', to: './' },
{ from: 'package.json', to: './' },
{ from: 'ext/ink-3.1.10/js/ink-all.min.js', to: 'lib/js' },
{ from: 'ext/ink-3.1.10/js/autoload.min.js', to: 'lib/js' },
{ from: 'ext/js/jquery-2.2.3.min.js', to: 'lib/js' },
{ from: 'ext/ink-3.1.10/css/ink.min.css', to: 'lib/css/ink.min.css' },
{ from: 'feed.xml', to: './' },
{
from: 'src/shared',
to: './shared',
globOptions: {
ignore: ['**/*suppressed.json'],
},
},
],
});
};
module.exports = {
entry: './src/client/index.tsx',
output: {
filename: 'scripts/app.[hash].bundle.js',
publicPath: '/',
path: path.resolve(__dirname, 'dist'),
},
resolve: {
extensions: ['.ts', '.tsx', '.js'],
},
devtool: 'inline-source-map',
devServer: {
writeToDisk: true,
port: 8080,
},
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true,
},
},
},
},
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.(tsx|ts)?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
},
],
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: process.env.NODE_ENV === 'development',
},
},
'css-loader',
],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
loader: 'file-loader',
options: {
outputPath: 'lib/assets/fonts',
},
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['url-loader'],
},
],
},
plugins: isProduction
? [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: isProduction ? 'lib/css/main.[hash].css' : 'main.css',
}),
html(),
copyAllOtherDistFiles(),
]
: [new CleanWebpackPlugin(), html(), copyAllOtherDistFiles()],
};
所以…我需要做些不同的事情。虽然我在开发过程中确实需要server.ts和api.ts,但我不确定如何传输这两个文件,然后将其复制到上面(不包括我创建的web包).所以我不完全确定直接复制文件的用例是什么-但让我通过指出如何在开发中仍然使用原始
.ts
源文件的情况下实现将传输的文件保存在输出目录中来回答:
首先,您可以在开发中使用,这有助于您通过动态传输来运行原始源文件,这样您就可以像使用节点
二进制文件一样使用它,而是在源文件而不是发出的文件上使用它。我在开发中使用与此类似的命令:NODE\u ENV=development ts NODE dev--watch./src/server.ts--transpileOnly./src/server.ts
然后,对于生产,如果您没有在编译器选项中指定noEmit
选项,TypeScript将传输文件并将文件发送到提供的outDir
。因此,您可以使用节点二进制文件运行这些发出的文件:node\u ENV=production node./dist/server.js
。这将允许您从复制插件中删除源目录下的文件,因为TypeScript将为您传输并发出目录中传输的js
编辑(来自注释):要仅包括要传输的文件,您可以在tsconfig的中指定那些文件:
include:['./src/api.ts','./src/server.ts']
因此,我不完全确定直接复制文件的用例是什么-但让我指出,在开发中仍然使用原始.ts
源文件的情况下,如何实现将传输的文件保存在输出目录中:
首先,您可以在开发中使用,这有助于您通过动态传输来运行原始源文件,这样您就可以像使用节点
二进制文件一样使用它,而是在源文件而不是发出的文件上使用它。我在开发中使用与此类似的命令:NODE\u ENV=development ts NODE dev--watch./src/server.ts--transpileOnly./src/server.ts
然后,对于生产,如果您没有在编译器选项中指定noEmit
选项,TypeScript将传输文件并将文件发送到提供的outDir
。因此,您可以使用节点二进制文件运行这些发出的文件:node\u ENV=production node./dist/server.js
。这将允许您从复制插件中删除源目录下的文件,因为TypeScript将为您传输并发出目录中传输的js
编辑(来自注释):要仅包括要传输的文件,您可以在tsconfig的中指定那些文件:
include:['./src/api.ts','./src/server.ts']
你是如何运行这段代码的?@awarrier99,从图片上看,它看起来像是node--trace warnings dist/server.ts
@Tico啊是的,很好,别担心,我实际上已经开始学习ts了,我对这一点很好奇嗯,是的,我不应该在我的区域有一个.ts罚款。嗯,我正在通过我的服务器进行复制。问题出在我的地区。让我在这里更新我的帖子你是如何运行这个代码的?@awarrier99,从图片上看,它看起来像节点--trace warnings dist/server.ts
@Tico啊是的,很好。别担心,我实际上已经开始学习ts了,我对这个很好奇。嗯,是的,我不应该在我的区有一个.ts罚款。嗯,我正在通过我的服务器进行复制。问题出在我的地区。让我在这里更新我的帖子我复制了不属于src的文件,这些文件是外部库或我的NodeJS服务器本身,以及其他根文件,这些文件不会被webpack的构建获取并作为web捆绑包的一部分,所以你是说让TS输出我的服务器内容而不是webpack。当然对于其他东西,如我的ext lib和feed.xhm,我会让webpack复制它们,或者只是用bash脚本复制它们,因为它们不是捆绑包的一部分。@PositiveGuy没问题,我非常同意,我发现了一个很棒的指南,当我第一次开始使用TypeScript时,有人写了这个指南,如果我能再次找到它,我会将它链接到youcool,如果你发现该指南会很乐意在你的答案中包含它。我想大多数人都在对他们的整个应用程序进行类型检查。这是一个React应用程序,所以是的,整个src tooI复制的文件不是src的一部分,这些文件是外部库或我的NodeJS服务器本身,以及其他根文件,这些根文件不会被webpack的构建获取并作为web捆绑包的一部分,所以你是说让TS输出我的服务器内容而不是webpack。当然对于其他东西,如我的ext lib和feed.xhm,我会让webpack复制它们,或者只是用bash脚本复制它们,因为它们不是捆绑包的一部分。@PositiveGuy没问题,我非常同意,我发现了一个很棒的指南,当我第一次开始使用TypeScript时,有人写了这个指南,如果我能再次找到它,我会将它链接到youcool,如果你发现该指南会很乐意在你的答案中包含它。我想大多数人都在对他们的整个应用程序进行类型检查。这是一个React应用程序,所以是的,整个src也是