Question

我的react组件建立在.jsx上，但是现在我正在Typescript上逐一迁移它们。面对同时支持ts和jsx的babel配置问题。另外，我的webpack在构建时没有提供正确的掉毛错误日志。

如何一起支持.jsx和.tsx

我的目录结构看起来像

src
应用
- ** /。jsx
应用
- .tsx
某些组件
- .tsx
webpack
- webpac.config.js
tslint.json
tslint.config

.babelrc

{
    "presets": ["@babel/preset-env", "@babel/react", "@babel/typescript"],
    "plugins": ["babel-plugin-transform-class-properties"]
}

.tsconfig

{
    "compilerOptions": {
        "jsx": "react",
        "rootDir": "./src/",
        "module": "commonjs",
        "target": "es5",
        "lib": ["es6", "dom"],
        "sourceMap": true,
        "moduleResolution": "node",
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noImplicitAny": true,
        "strictNullChecks": true,
        "baseUrl": "./",
        "paths": {
            "ui-components/*": ["./src/ui-components/*"]
        }
    },
    "file": ["global.d.ts"],

    "include": ["./src/**/*"],
    "exclude": ["node_modules", "webpack"]
}

.tslint

{
    "defaultSeverity": "error",
    "extends": ["tslint:recommended", "tslint-react", "tslint-eslint-rules"],
    "rules": {
        "max-line-length": [true, 300],
        "max-line": ["error", 100],
        "no-consecutive-blank-lines": ["error", true, 2]
    }
}

Webpack

module: {
        rules: [
            {
                enforce: "pre",
                test: /\.tsx?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "tslint-loader",
                        options: {
                            tsConfigFile: "../tsconfig.json",
                            emitErrors: true
                        }
                    }
                ]
            },
            {
                test: /\.jsx?$/,
                loader: "babel-loader",
                exclude: /node_modules/
            },
            {
                test: /\.tsx?$/,
                use: ["awesome-typescript-loader"]
            }
        ]

在一个项目中支持.jsx和.ts的配置

0 个答案: