使用 Babel 转换 Typescript 文件时出错

编程问答 2022-05-03

问题描述

我正在使用在 webpack.config.js 中配置的 babel 来转换我的打字稿文件，但不知何故它对我不起作用，每当我运行 npm run watch 时我都会收到错误，它说 SyntaxError: xxxxx: Unexpected token几乎 13-14 个文件。

以下是我的配置文件和错误描述。任何人都可以强调错误或遇到类似问题，然后请提及。

谢谢！

错误

Module build Failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\EndNode.ts: Unexpected token (4:11)

export class BlankEndNode extends Node {
public readonly isEndNode: boolean = true;
}

Webpack 文件

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const copyPlugin = require('copy-webpack-plugin');
const HtmlWebPackPlugin = require("html-webpack-plugin");

const mode = process.env.NODE_ENV ? process.env.NODE_ENV : 'development';

console.log('Webpack running in ' + mode + ' mode');

module.exports = {
    mode: mode,entry: './src/index.tsx',resolve: {
        fallback: {
            fs: false
        }
    },devtool: ('development' === mode) ? 'inline-source-map' : 'none',module: {
        rules: [
            {
                test: /\.s?css$/,use: ['style-loader','css-loader','postcss-loader','sass-loader']
            },{
                test: /\.(ts|tsx|js)$/,exclude: /(node_modules)/,loader: 'babel-loader'
            },{
                test: /\.(woff2?|ttf|otf|eot|png|svg|jpg)(\?.*$|$)$/,loader: 'file-loader'
            }
        ],},plugins: [
        new CleanWebpackPlugin(),new copyPlugin({
           patterns: [
                { from: "./src/images/",to: "images/" }
            ]
        }),new HtmlWebPackPlugin({
            template: "./src/index.html",filename: "./index.html"
        })
    ],resolve: {
        symlinks: false,modules: ['node_modules'],extensions: ['.ts','.tsx','.js','.json',".css",".scss"]
    }
};

babelrc

{
    "presets": [
        "@babel/preset-react",[
        "@babel/preset-env",{ "modules": "commonjs" }
      ],"@babel/typescript"
    ],"plugins": [
        "@babel/proposal-class-properties","@babel/proposal-object-rest-spread","@babel/plugin-Syntax-dynamic-import","babel-plugin-styled-components",]
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

babeljsnpmnpmnpmtranspilertypescripttypescripttypescriptwebpackwebpackwebpack