虽然这是目前一个令人难以置信的旧员额,但我注意到了多份意见,建议使用<代码>从反应代码>进口回复,包括最近张贴的海报——这些海报令人难以置信,无助于解决问题。 这里的指示是,使联合计算机X转换成在STS、网络包、Babel环境中工作,并删除这些浮星-UMD全球错误信息。
- Add @babel/core, @babel/preset-react and babel-loader to the project
- Add a babel.config.ts with the following code
{
"presets": [
["@babel/preset-react", {
"runtime": "automatic" // This bit does the transformation
}]
]
}
- Add babel loader rule to webpack module.rules, under ts-loader to load that babel config
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
- Add the following rule to TSConfig.ts
"jsx": "react-jsx",
- Add this (or variation of pointing to src folder) to TSConfig includes. Make sure you have excludes node_modules too
"include": [
"./src/**/*.ts",
"./src/**/*.tsx",
"./src/**/*.jsx",
"./src/**/*.js",
],
- VERY IMPORTANT STEP FOR VSC-ers. Do ctrl+p in visual studio, type
> TypeScript
. Somewhere will be an option called TypeScript: Select TypeScript Version
. Pick the TS version in node_modules, not the shitty out of date inbuilt VSC TS which should be condemned.
- Restart VSC. You should be able to test JSX transformation is working with the following in a
.tsx
file.
import { FC } from "react";
const Component: FC = () => {
return <></>;
};
export default Component;
如果您使用另一种反应方法,即预言,你还需要在您的《服贸总协定》中添加以下规则,以备这项工作<编码>“jsxImportSource”:“preact”,。
而且,如果采用像下等框架,你就不需要作为自己固有的工具来加以利用。