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

Question

因此，我们决定开始将我们的 React 应用程序转换为 Typescript。计划是逐步做到这一点。根据我在网上阅读的内容，这应该不是问题，但是，我在尝试转换 "leaf-level" 类时遇到了问题。所以，这是我的问题。我的类看起来像这样：

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 的代码审查，有人指出我缺少“。”在扩展列表 [".js", ".jsx", ".tsx", "ts"] 中的 "ts" 上。

Answer 1

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

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

Non-Typescripts imports failing when trying to incrementally convert to Typescript

javascript

typescript

reactjs

webpack

webpack-2