我正在尝试在 AngularJS 应用程序中渲染使用 tsx 构建的 React 组件。我的 AngularJS 应用程序使用 babel 和 webpack 4。同时,库构建包括require('react/jsx-runtime'),这可能是问题的一部分, 但需要
这是我的 .babelrc 文件:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-object-rest-spread",
["@babel/plugin-transform-react-jsx", {
"runtime": "automatic"
}]
]
}
这是我的 package.json
"devDependencies": {
"@babel/core": "^7.15.0",
"@babel/plugin-proposal-object-rest-spread": "^7.14.7",
"@babel/plugin-transform-react-jsx": "^7.14.9",
"@babel/preset-env": "^7.15.0",
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.15.0",
"babel-loader": "^8.2.2",
"babel-preset-env": "1.6.0",
最后,我的 webpack 配置包括以下规则:
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(ts|tsx)$/,
exclude: ['/node_modules/'],
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-typescript']
}
}
},
任何形式的帮助将不胜感激