javascript - 尝试增量转换为 Typescript 时，非 Typescript 导入失败

Question

因此，我们决定开始将 React 应用程序转换为 Typescript。计划是逐步进行。从我在网上读到的内容来看，这不应该是一个问题，但是，在尝试转换我的“叶级”类时，我遇到了一个问题。所以，这是我的问题。我的类(class)如下所示:

ModelClassA.ts

export default class ModelClassA{ }

ModelClassAFactory.js

import {ProdTour}  from './ProdTour';

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "es6",
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "jsx": "preserve",
    "allowJs": false,
    "moduleResolution": "node",
    "lib": [
      "dom", 
      "es7"
    ]},
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

webpack.js

module.exports = {
    entry: {
        'app': ["./scripts/EntryPoint.jsx", './Content/main.scss']
    },
    resolve: {
        extensions: [".js", ".jsx", ".tsx", "ts"]
    },
    output: {
        path: __dirname + "/Scripts",
        filename: "[name].js"
    },
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    },
    module: {

        rules: [
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [{ loader: 'css-loader', options: {sourceMap: true, minimize: process.env.NODE_ENV === 'production' } }, 'sass-loader']
                })
            },
            {
                test: /\.jsx?$/,
                use: [{
                    loader: "babel-loader"
                }],
                exclude: /node_modules/
            },
            {
                test: /\.tsx?$/,
                use: [
                    {
                        loader: "babel-loader"
                    },
                    {
                        loader: "ts-loader",
                    }
                ]
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: '../Content/main.css',
            allChunks: true
        })
    ]
};

运行 webpack 时出现此错误:

ERROR in ./scripts/Models/ModelClassAFactory.js Module not found: Error: Can't resolve './ModelClassA' in 'C:\Source\scripts\Models\' @ ./scripts/Models/ModelClassAFactory.js 8:16-37 @ ./scripts/Components/SomeComponent/SomeReducer.js @ ./scripts/EntryPoint.jsx @ multi ./scripts/EntryPoint.jsx ./Content/main.scss

这个错误是有道理的。 ModelClassAFactory 文件上的导入正在查找必须从 .ts 文件编译的 ModelClassA.js。任何帮助将不胜感激!

编辑:根据@TylerSebastian 的代码审查，有人指出我缺少“.”。在扩展列表中的“ts”上[".js", ".jsx", ".tsx", "ts"]。

Answer 1

您的扩展 webpack 配置扩展中缺少 .:[".js", ".jsx", ".tsx", "ts"] 。 ts 应该是 .ts