https://webpack.js.org/guides/
- https://babeljs.io/setup#installation Please select webpack, then following the steps
- https://babeljs.io/docs/en/babel-preset-react
Important
runtimeclassic | automatic, defaults to classic automatic auto imports the functions that JSX transpiles to. classic does not automatic import anything.
备注：如果runtime不使用automatic, 且组件顶部没有引入import React from 'react';，则会报React不存在错误。
App.js:6 Uncaught ReferenceError: React is not defined
at App (App.js:6)
at renderWithHooks (react-dom.development.js:14985)
at mountIndeterminateComponent (react-dom.development.js:17811)
at beginWork (react-dom.development.js:19049)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at beginWork$1 (react-dom.development.js:23964)
at performUnitOfWork (react-dom.development.js:22776)
at workLoopSync (react-dom.development.js:22707)
react-dom.development.js:20085 The above error occurred in the <App> component:
at App (http://localhost:8080/main.f202e1f6ecde810a7d1a.js:21:3)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:20085
bootstrap:27 Uncaught ReferenceError: React is not defined
at App (App.js:6)
at renderWithHooks (react-dom.development.js:14985)
at mountIndeterminateComponent (react-dom.development.js:17811)
at beginWork (react-dom.development.js:19049)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at beginWork$1 (react-dom.development.js:23964)
at performUnitOfWork (react-dom.development.js:22776)
at workLoopSync (react-dom.development.js:22707)- babel config中"runtime"未设置为"automatic"的问题
- ReferenceError: process is not defined,使用如下方式解决
// new webpack.DefinePlugin({
// 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
// 'process.env.WDS_SOCKET_HOST': JSON.stringify(process.env.WDS_SOCKET_HOST),
// 'process.env.WDS_SOCKET_PORT': JSON.stringify(process.env.WDS_SOCKET_PORT),
// 'process.env.WDS_SOCKET_PATH': JSON.stringify(process.env.WDS_SOCKET_PATH),
// })
[-] https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#manual-babel-setup [-] https://www.robinwieruch.de/minimal-react-webpack-babel-setup
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent