因此,如果我键入以下内容,我将遇到的问题是
presets: ["@babel/preset-typescript]
我的代码被编译,但是如果我输入:
presets: [["@babel/preset-typescript", {allExtensions: true, isTSX: true}]]
不是。
我正在使用webpack,但问题绝对在babel方面。不过,这是我的webpack配置:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const envSettings = require(`./frontend.env.${process.env.NODE_ENV}.json`)
module.exports = {
watchOptions: {
ignored: [/src\/backend/, /node_modules/],
},
entry: {
app: './src/frontend/react/browserRouter.tsx'
},
output: {
path: path.resolve(__dirname, 'assets/scripts'),
publicPath: '/assets/scripts'
},
/*resolve: {
extensions: [".ts", ".tsx", ".js"]
},*/
module: {
rules: [{
test: /\.ts.*$/, // include .js files
exclude: [/src\/backend/, /node_modules/], // exclude any and all files in the node_modules folder
use: [{ loader: "babel-loader",
options:{
presets: [["@babel/preset-typescript", {allExtensions: true, isTSX: true}]]
}}]
},{
test: /\.js.*$/, // include .js files
exclude: [/index\.template\.html/, /html-webpack-plugin/],
use: [{ loader: "babel-loader",
options:{
presets: [["@babel/preset-env", {useBuiltIns: 'usage'}]]
} }]
},
{
test: /\.js$/, // include .js files
enforce: "pre", // preload the jshint loader
exclude: /node_modules/, // exclude any and all files in the node_modules folder
use: [{ loader: "source-map-loader" }]
},{
test: /\.css$/, use: [
'style-loader', 'css-loader']
},{
test: /\.(png|svg|jpg|gif|jpeg)$/, use: [
'file-loader']
}]
},
plugins: [
// new BundleAnalyzerPlugin(),
new webpack.DefinePlugin({
ENV_SETTINGS: JSON.stringify(envSettings),
}),
new HtmlWebpackPlugin({
filename: path.resolve(__dirname, 'index.html'),
template: path.resolve(__dirname, 'src/index.template.html')
}),
],
externals: {
fs: 'fs'
}
};
正在向我编译的第一个文件出现以下错误:
ERROR in ./src/frontend/react/browserRouter.tsx 7:22
Module parse failed: Unexpected token (7:22)
You may need an appropriate loader to handle this file type.
| import "../../../node_modules/antd/dist/antd.min.css";
| import { AppLoadWithRouter } from "./AppLoader";
> const browserRouter = <BrowserRouter>
| <AppLoadWithRouter />
| </BrowserRouter>;