Babel common package
- @ babel/core: babel compiler core api
- @ babel/preset-env: compilation syntax parsing of each version of javaScript (es6, 7, 8 to es5)
- @ babel/preset-react: compile the jsx syntax 4.: compile ts syntax
- Babel-loader: all code files are handed over to babel through babel-loader.
- Babel-plugin-import: antd project loading on demand
if it is a react-native project, you need to deal with flow syntax and install @ babel/preset-flow
Ordinary js project
Installation
yarn add -D babel-loader @babel/core @babel/preset-env
.babelrc
{ "presets": [ "@babel/preset-env" ] }
Webpack.config.js
module.exports = { module: { rules: [ { test: /\.(js|jsx|ts|tsx)$/, use: ['babel-loader'], } ], } }
Ordinary ts project
Installation
yarn add -D babel-loader @babel/core @babel/preset-env @babel/preset-typescript
.babelrc
{ "presets": [ "@babel/preset-env", "@babel/preset-typescript" ] }
Webpack.config.js Same as above
React project
The above supplementary installation
yarn add -D @babel/preset-react
.babelrc
{ "presets": [ "@babel/preset-env", "@babel/preset-typescript", "@babel/preset-react" ] }
Webpack.config.js Same as above
Flow project
Supplemental installation above
yarn add -D @babel/preset-flow
.babelrc
{ "presets": [ "@babel/preset-env", "@babel/preset-typescript", "@babel/preset-react", "@babel/preset-flow" ] }
webpack.config.js Same as above