导入路径不能以'.ts'结尾 - NodeJS和Visual Code

Question

我在尝试构建一个简单的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
  }
};

有谁能够帮我？TKS!

Answer 1

我遇到了这个问题，我花了一个多小时才意识到我所要做的就是从导入中删除 .ts 扩展名。为我：

 // index.ts
import { renderSection, useConfig, writeToFile } from './hooks.ts'

// changed from `./hooks.ts` to `./hooks`
import { renderSection, useConfig, writeToFile } from './hooks'

Answer 2

这就是我使用的，效果很好。

完整的Webpack配置在这里：https ://gist.github.com/victorhazbun/8c97dc578ea14776facef09a115ae3ad

webpack.config.js

'use strict';
const webpack = require('webpack');

module.exports = {
  ...
  resolve: {
    extensions: [".ts", ".tsx", ".js"]
  },
  ...
};

Answer 3

我不确定这个问题的确切解决方案是什么。显然，解决方案是删除 .ts 扩展名 - 如果找不到该文件，则这是一个配置问题。对我来说，当我开始使用 ts-loader 时，配置问题就得到了解决。