Question

所以，我们决定开始将我们的反应应用程序转换为Typescript。计划是逐步做到这一点。从我在网上看到的这不应该是一个问题但是，当我尝试转换我的“叶级”类时，我遇到了一个问题。所以，这是我的问题。我的课程看起来像这样：

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时出现此错误：

./scripts/Models/ModelClassAFactory.js中的错误模块没有发现：错误：无法解析'./ModelClassA' 'C：\来源\脚本\型号\' @ ./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

1 个答案: