我在尝试构建一个简单的NodeJS应用程序时遇到了一个错误:
即使Visual Code提示错误,我的代码也能运行。当我从import语句中删除.ts扩展名时,我得到一个错误,即无法找到该文件。
我使用的是webpack,但这些文件来自服务器。下面是我的文件夹结构:
这是我的webpack文件:
var webpack = require('webpack');
var helpers = require('./helpers');
//# Webpack Plugins
var CopyWebpackPlugin = (CopyWebpackPlugin = require('copy-webpack-plugin'), CopyWebpackPlugin.default || CopyWebpackPlugin);
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
var ExtractTextPlugin = require('extract-text-webpack-plugin');
//# Webpack Constants
const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
const HMR = helpers.hasProcessFlag('hot');
const METADATA = {
title: 'My Application',
baseUrl: '/',
host: process.env.HOST || '0.0.0.0',
port: process.env.PORT || 8080,
ENV: ENV,
HMR: HMR
};
//# Webpack Configuration
module.exports = {
metadata: METADATA,
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'main': './src/main.ts',
},
resolve: {
extensions: ['', '.ts', '.tsx', '.js', '.scss'],
root: helpers.root('src'),
modulesDirectories: [
'node_modules',
'server'
]
},
module: {
preLoaders: [
{
test: /\.js$/,
loader: 'source-map-loader',
exclude: [
helpers.root('node_modules/rxjs'),
helpers.root('node_modules/@angular2-material'),
helpers.root('node_modules/@angular')
]
}
],
loaders: [
{
test: /\.ts$/,
loader: 'awesome-typescript-loader',
exclude: [/\.(spec|e2e)\.ts$/]
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.css$/,
loader: 'raw-loader'
},
{
test: /\.html$/,
loader: 'raw-loader',
exclude: [helpers.root('src/index.html')]
},
{
test: /\.scss|css$/,
loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader!sass-loader' }),
exclude: [ helpers.root('node_modules') ]
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
},
{
test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
loader : 'file-loader'
}
]
},
plugins: [
new ForkCheckerPlugin(),
new webpack.optimize.OccurrenceOrderPlugin(true),
new webpack.optimize.CommonsChunkPlugin({
name: ['polyfills', 'vendor'].reverse()
}),
new ExtractTextPlugin("[name].css"),
new CopyWebpackPlugin([{
from: 'src/assets',
to: 'assets'
}]),
new HtmlWebpackPlugin({
template: 'src/index.html',
chunksSortMode: 'dependency'
}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery',
"Tether": 'tether',
"window.Tether": "tether"
})
],
node: {
global: 'window',
crypto: 'empty',
module: false,
clearImmediate: false,
setImmediate: false
}
};
有人能帮我吗谢谢
7条答案
按热度按时间yiytaume1#
我遇到了这个问题,我花了一个小时的时间才意识到我所要做的就是从导入中删除.ts扩展名。对我来说:
xkrw2x1b2#
这是我用的,效果很好。
完整的webpack配置如下:https://gist.github.com/victorhazbun/8c97dc578ea14776facef09a115ae3ad
webpack.config.js
z31licg03#
对我来说,情况是VSCode使用不同的Typescript版本,因为工作区依赖于不同的版本。需要从工作区中选择一个。
单击状态栏中的版本:
并从工作区中选择版本。
q9rjltbz4#
我也遇到了同样的问题,对我来说,解决方案就是重新运行应用程序。在我的情况下,我刚刚完成了一些文件转换为.tsx,也许这解释了它。
cl25kdpy5#
我不知道这个问题的确切答案是什么。显然,解决方案是remove the .ts extension — it is a configuration issue if it cannot find the file。对我来说,当我开始使用ts-loader时,配置问题就解决了。
j2cgzkjk6#
要解决您的问题,您需要:
1.确保project.json中有一个tsconfig.json文件,其中包含代码
{ "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx" }, "include": ["src"] }
1.检查或创建一个react-app-env.in.ts文件,其中包含以下代码
/// <reference types="react-scripts" />
这个react-app-env.d.ts文件解释了TypeScript如何使用ts、tsx等文件扩展名
1.在导入中删除tsx文件扩展名。同时移除所有TypeScript将发誓的扩展
例如之前:
import { Header } from "./Header.tsx";
删除扩展后应该是这种情况:
import { Header } from "./Header";
1.如果在进行这些更改时有一个项目正在运行,请停止该项目,然后重新启动。由于这些更改仅在编译阶段启动项目时应用
k0pti3hp7#
上述解决方案都不起作用。在tsconfig.json中添加
allowImportingTsExtensions
解决了这个问题。我的完整答案在这里:https://stackoverflow.com/a/76332913/1778834