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