[英]How to compile TypeScript/Less files into JavaScript/CSS by using webpack and Babel?
[英]Babel could not compile ? syntax in typescript
我在尝试编译 typescript 时遇到了这个问题。 好像 babel 听不懂“?” node.current?.contains(event.target) 行的语法
export function useOnClickOutside(node: any, handler: any) {
const handlerRef = useRef(handler);
useEffect(() => {
handlerRef.current = handler;
}, [handler]);
useEffect(() => {
const listener = (event: { target: any }) => {
// Do nothing if clicking ref's element or descendent elements
if (node.current?.contains(event.target) ?? false) {
return;
}
handler && handler(false);
if (handlerRef.current) handlerRef.current();
};
document.addEventListener('mousedown', listener);
return () => {
document.removeEventListener('mousedown', listener);
};
}, [node, handler]);
}
您可能需要在 webpack 配置中包含 ts 文件的 babel 加载程序,如下所示
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx|tsx|ts)$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
}
安装npm i @babel/preset-env
后,可以将@babel/preset-env
添加到 .babelrc 的“ .babelrc
”部分,例如
{
"presets": [
[
"@babel/preset-react",
{
"runtime": "automatic"
}
],
[
"@babel/preset-typescript"
],
[
"@babel/preset-env",
{
"targets": {
"esmodules": false
}
}
]
]
//some other settings follows
}
{
"name": "typescript-near",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.11.41",
"@types/react": "^18.0.14",
"@types/react-dom": "^18.0.5",
"@types/react-router-dom": "^5.3.3",
"babel-preset-typescript": "^7.0.0-alpha.19",
"near-api-js": "^0.45.1",
"react-dom": "^16.14.0",
"react-icons": "^4.4.0",
"react-router-dom": "^6.3.0",
"react-scripts": "^2.1.3",
"styled-components": "^5.3.5",
"typescript": "^4.7.4",
"web-vitals": "^2.1.4",
"webpack-cli": "^4.9.2",
"@babel/preset-env": "^7.18.6",
"react": "^16.14.0",
"react-router": "^5.3.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/preset-typescript": "^7.18.6",
"@types/styled-components": "^5.1.25",
"ts-loader": "^9.3.1",
"webpack-cli": "^4.10.0"
}
}
我的 package.json
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.