导入路径不能以".ts"结尾-NodeJS和可视代码 [英] An import path cannot end with '.ts' - NodeJS and Visual Code
本文介绍了导入路径不能以".ts"结尾-NodeJS和可视代码的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
尝试构建一个简单的NodeJS应用时出现错误:
I've got an error while trying to build a simple NodeJS app:
即使Visual Code提示错误,我的代码也正在运行.当我从import语句中删除.ts扩展名时,我收到一个错误,即找不到该文件.
Even that Visual Code prompts an error, my code got running.. When I remove the .ts extension from import statement, I got an error that the file cannot be found.
我正在使用webpack,但是这些文件来自服务器.这是我的文件夹结构:
I'm using webpack, but these files are from server. Here's my folder structure:
这是我的webpack文件:
And here's my webpack file:
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
}
};
有人可以帮助我吗?谢谢!
Can anybody help me? Tks!
推荐答案
这就是我使用的方法,效果很好.
This is what I use and it works pretty well.
webpack.config.js
'use strict';
const webpack = require('webpack');
module.exports = {
...
resolve: {
extensions: [".ts", ".tsx", ".js"]
},
...
};
这篇关于导入路径不能以".ts"结尾-NodeJS和可视代码的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文